/* innerbloom — app shell: router, tab bar, toast */
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

const LS = {
  get(k, f) { try { const v = localStorage.getItem(k); return v == null ? f : JSON.parse(v); } catch (e) { return f; } },
  set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} },
};

/* ---- tab bar ---- */
function TabBar({ tabs, active, onTab }) {
  return (
    <div className="tabbar-wrap">
      <div className="tabbar A">
        {tabs.map((tb) => (
          <button key={tb.id} className={"tab-i" + (active === tb.id ? " on" : "")} onClick={() => onTab(tb.id)}>
            {tb.icon}<span className="lb">{tb.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [lang, setLangState] = useStateApp(() => LS.get("ib_lang", "zh"));
  const setLang = (v) => { setLangState(v); LS.set("ib_lang", v); };

  const [onboarded, setOnboarded] = useStateApp(() => LS.get("ib_onboarded", false));
  const [nums, setNums] = useStateApp(() => LS.get("ib_nums", { solar: 6, lunar: 3 }));
  const [saved, setSaved] = useStateApp(() => LS.get("ib_saved", []));
  const [tab, setTab] = useStateApp("home");
  const [sub, setSub] = useStateApp(null);
  const [toast, setToast] = useStateApp(null);
  const toastTimer = useRefApp(null);

  useEffectApp(() => LS.set("ib_onboarded", onboarded), [onboarded]);
  useEffectApp(() => LS.set("ib_nums", nums), [nums]);
  useEffectApp(() => LS.set("ib_saved", saved), [saved]);

  const showToast = (msg) => {
    setToast(msg); clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 1900);
  };
  const onSave = (reading) => {
    setSaved((s) => [{ ...reading, date: lang === "zh" ? "今天" : "TODAY" }, ...s].slice(0, 12));
    showToast(tt(lang, "dr_saved_toast"));
  };

  const go = (id) => { setTab(id); setSub(null); };
  const push = (s) => setSub(s);
  const pop = () => setSub(null);

  const tabs = [
    { id: "home", label: tt(lang, "tab_home"), icon: <IbIcon.Home /> },
    { id: "tools", label: tt(lang, "tab_tools"), icon: <IbIcon.Rainbow /> },
    { id: "events", label: tt(lang, "tab_events"), icon: <IbIcon.Event /> },
    { id: "me", label: tt(lang, "tab_me"), icon: <IbIcon.User /> },
  ];

  let screen;
  if (sub === "rainbow") screen = <RainbowTool lang={lang} onBack={pop} onResult={setNums} />;
  else if (sub === "draw") screen = <DrawFlow lang={lang} onBack={pop} onSave={onSave} />;
  else if (sub === "med") screen = <Meditation lang={lang} onBack={pop} />;
  else if (sub === "consult") screen = <Consultation lang={lang} onBack={pop} />;
  else if (tab === "tools") screen = <Tools lang={lang} push={push} />;
  else if (tab === "events") screen = <Events lang={lang} />;
  else if (tab === "me") screen = <Profile lang={lang} setLang={setLang} nums={nums} saved={saved} onRemoveSaved={(i) => setSaved((s) => s.filter((_, idx) => idx !== i))} push={push} />;
  else screen = <Home lang={lang} setLang={setLang} go={go} push={push} nums={nums} />;

  return (
    <div className="ib-app">
      {!onboarded ? (
        <Onboarding lang={lang} setLang={setLang} onDone={(n) => { setNums(n); setOnboarded(true); setTab("home"); }} />
      ) : (
        <>
          <div key={(sub || tab)} style={{ position: "absolute", inset: 0 }}>
            {screen}
          </div>
          {!sub && <TabBar tabs={tabs} active={tab} onTab={go} />}
        </>
      )}
      <div className={"toast" + (toast ? " show" : "")}>{toast}</div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);