/* ============================================================
   谁是天眼 · 根组件
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8a24c",
  "serif": "\"Noto Serif SC\", serif",
  "radius": 4,
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const defaultView = window.TIANYAN_DEFAULT_VIEW || document.body.dataset.defaultView || "home";
  const [view, setView] = useState(defaultView);
  const [appealRec, setAppealRec] = useState(null);
  const [, force] = useState(0);
  const tapRef = useRef({ n: 0, last: 0 });

  useEffect(() => {
    const unsub = Store.subscribe(() => force(n => n + 1));
    Store.init().catch(() => {});
    return unsub;
  }, []);

  // 支持独立页面：/admin.html、/query.html、/register.html、/feedback.html
  useEffect(() => {
    const check = () => {
      const path = (location.pathname || "").toLowerCase();
      const hash = (location.hash || "").toLowerCase();
      if (path.endsWith("/admin.html") || hash.includes("admin")) setView("admin");
      if (path.endsWith("/query.html")) setView("query");
      if (path.endsWith("/register.html")) setView("register");
      if (path.endsWith("/feedback.html")) setView("feedback");
    };
    check();
    window.addEventListener("hashchange", check);
    return () => window.removeEventListener("hashchange", check);
  }, []);

  // 隐藏后台：连续点击天眼标识 5 次（普通用户单击只会回首页）
  const onBrand = () => {
    const now = Date.now();
    const s = tapRef.current;
    s.n = (now - s.last < 1200) ? s.n + 1 : 1;
    s.last = now;
    if (s.n >= 5) { s.n = 0; go("admin"); return; }
    go("home");
  };

  // 应用 tweaks 到 :root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    // 推导深色 deep
    r.style.setProperty("--radius", t.radius + "px");
    r.style.setProperty("--serif", t.serif);
    const padMap = { compact: 0.82, regular: 1, comfy: 1.18 };
    r.style.setProperty("--pad-scale", padMap[t.density] || 1);
  }, [t]);

  const go = (v) => {
    const pageMap = { home: "index.html", query: "query.html", register: "register.html", feedback: "feedback.html", admin: "admin.html" };
    const target = pageMap[v] || "index.html";
    const current = (location.pathname.split("/").pop() || "index.html").toLowerCase();
    if (current !== target) {
      location.href = target;
      return;
    }
    setView(v);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      <header className="topbar">
        <Brand onClick={onBrand} />
        <nav className="nav">
          <button className={view === "query" ? "active" : ""} onClick={() => go("query")}>查询</button>
          <button className={view === "register" ? "active" : ""} onClick={() => go("register")}>登记</button>
          <button className={view === "feedback" ? "active" : ""} onClick={() => go("feedback")}>投诉建议</button>
        </nav>
      </header>

      {view === "home" && <HomeScreen go={go} />}
      {view === "query" && <QueryScreen go={go} onAppeal={setAppealRec} />}
      {view === "register" && <RegisterScreen go={go} />}
      {view === "feedback" && <FeedbackScreen go={go} />}
      {view === "admin" && <AdminScreen go={go} />}

      <footer className="foot">
        <p className="disc">
          <strong style={{ color: "var(--text-mute)" }}>免责声明：</strong>
          本平台为剧本杀玩家信用提示工具，所登记内容由用户自行提供，不代表平台立场。
          平台不公开浏览数据，仅提供精确查询，并对查询行为留痕。被登记者如有异议可发起申诉，经核实后撤档。
          请勿登记与剧本杀信用无关的隐私信息；滥用登记将被风控。
        </p>
        <p style={{ marginTop: 12 }}>谁是天眼 · Tianyan Doc — 数据由服务端留存，查询与登记均记录风控信息</p>
      </footer>

      {appealRec && <AppealModal rec={appealRec} onClose={() => setAppealRec(null)} />}
      <Lightbox />

      <TweaksPanel title="Tweaks">
        <TweakSection label="主题" />
        <TweakColor label="点缀色" value={t.accent}
          options={["#c8a24c", "#b3392c", "#5f9a6a", "#7c8aa5", "#c97f4c"]}
          onChange={v => setTweak("accent", v)} />
        <TweakSection label="字体" />
        <TweakSelect label="标题字体" value={t.serif}
          options={[
            { value: "\"Noto Serif SC\", serif", label: "思源宋体（典雅）" },
            { value: "\"Noto Sans SC\", sans-serif", label: "思源黑体（现代）" },
            { value: "\"Ma Shan Zheng\", cursive", label: "手写体（个性）" }
          ]}
          onChange={v => setTweak("serif", v)} />
        <TweakSection label="布局" />
        <TweakSlider label="圆角" value={t.radius} min={0} max={14} unit="px" onChange={v => setTweak("radius", v)} />
        <TweakRadio label="留白密度" value={t.density} options={["compact", "regular", "comfy"]} onChange={v => setTweak("density", v)} />
      </TweaksPanel>
    </>
  );
}

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