import { useState } from "react";
import { App as AntApp, ConfigProvider, Tabs } from "antd";
import zhCN from "antd/locale/zh_CN";
import { CalculatorPanel } from "./CalculatorPanel";
import { HistoryTab } from "./HistoryTab";
import { UpdateButton } from "./UpdateButton";
import type { SampleInput } from "./types";

function Brand() {
  return (
    <div className="brand">
      <img className="brand-logo" src="/logo.png" alt="" />
      <span className="brand-name">建筑材料放射性判定分析</span>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState("calc");
  const [reloadSignal, setReloadSignal] = useState(0);
  // 复算：带入历史 input 并强制重挂 CalculatorPanel（key 递增）。
  const [loadedInput, setLoadedInput] = useState<SampleInput | undefined>(undefined);
  const [calcKey, setCalcKey] = useState(0);

  const recompute = (input: SampleInput) => {
    setLoadedInput(input);
    setCalcKey((k) => k + 1);
    setActiveTab("calc");
  };

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: "#243150",
          colorInfo: "#243150",
          colorLink: "#243150",
          colorLinkHover: "#3a4d78",
          borderRadius: 8,
          fontSize: 14
        }
      }}
    >
      <AntApp>
        <main className="app-shell">
          <Tabs
            activeKey={activeTab}
            onChange={setActiveTab}
            className="main-tabs"
            tabBarExtraContent={{ left: <Brand />, right: <UpdateButton /> }}
            items={[
              {
                key: "calc",
                label: "计算",
                children: (
                  <CalculatorPanel
                    key={calcKey}
                    initialInput={loadedInput}
                    onSaved={() => setReloadSignal((s) => s + 1)}
                  />
                )
              },
              {
                key: "history",
                label: "历史记录",
                children: (
                  <HistoryTab active={activeTab === "history"} reloadSignal={reloadSignal} onRecompute={recompute} />
                )
              }
            ]}
          />
        </main>
      </AntApp>
    </ConfigProvider>
  );
}

export { App };