// Main app

const { useState: uS, useEffect: uE, useCallback: uCb } = React;

// Global fetch interceptor: auto-logout when any /api/admin/ call returns 401
(function () {
  const _fetch = window.fetch.bind(window);
  window.fetch = function (input, init) {
    const url = typeof input === "string" ? input : input?.url ?? "";
    return _fetch(input, init).then(r => {
      if (r.status === 401 && url.includes("/api/admin/")) {
        window.__onAdminUnauth?.();
      }
      return r;
    });
  };
})();

const STORAGE_KEY = "duidui_admin_state";

const App = () => {
  const [authed, setAuthed] = uS(() => {
    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}").authed || false; } catch { return false; }
  });
  const [adminEmail, setAdminEmail] = uS(() => {
    try {
      const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
      return s.adminEmail || localStorage.getItem("adminEmail") || "";
    } catch { return ""; }
  });
  const [page, setPage] = uS(() => {
    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}").page || "dashboard"; } catch { return "dashboard"; }
  });
  const [adminAvatar, setAdminAvatar] = uS(null);
  const [tweakState, setTweakState] = uS(window.TweakDefaults);
  const [tweaksOpen, setTweaksOpen] = uS(false);
  const [pendingApplications, setPendingApplications] = uS(0);
  const [pendingReports, setPendingReports] = uS(0);

  const loadAvatar = uCb(() => {
    if (!authed) return;
    fetch("/api/admin/profile/avatar")
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d?.avatar) setAdminAvatar(d.avatar); })
      .catch(() => {});
  }, [authed]);

  uE(() => { loadAvatar(); }, [loadAvatar]);

  // Wire global interceptor to this component's logout
  uE(() => {
    window.__onAdminUnauth = () => setAuthed(false);
    return () => { window.__onAdminUnauth = null; };
  }, []);

  // Verify session cookie on mount; auto-logout if missing/expired
  uE(() => {
    if (!authed) return;
    fetch("/api/admin/stats")
      .then(r => { if (r.status === 401) setAuthed(false); })
      .catch(() => {});
  }, [authed]);

  uE(() => {
    if (!authed) return;
    fetch("/api/admin/applications")
      .then(r => { if (r.status === 401) { setAuthed(false); return []; } return r.ok ? r.json() : []; })
      .then(data => Array.isArray(data) && setPendingApplications(data.filter(a => a.status === "pending").length))
      .catch(() => {});
    fetch("/api/admin/reports", { credentials: "include" })
      .then(r => r.ok ? r.json() : { reports: [] })
      .then(data => setPendingReports((data.reports ?? []).filter(r => r.status === "pending").length))
      .catch(() => {});
  }, [authed]);

  uE(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ authed, page, adminEmail }));
  }, [authed, page, adminEmail]);

  uE(() => {
    if (adminEmail) localStorage.setItem("adminEmail", adminEmail);
  }, [adminEmail]);

  // apply accent color
  uE(() => {
    document.documentElement.style.setProperty("--accent", tweakState.accentColor);
    // derive soft + ink variants
    document.documentElement.style.setProperty("--accent-soft", tweakState.accentColor + "18");
  }, [tweakState.accentColor]);

  // Tweaks host protocol
  uE(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const updateTweak = (partial) => {
    setTweakState(s => ({ ...s, ...partial }));
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: partial }, "*");
  };

  if (!authed) {
    return (
      <ToastProvider>
        <LoginScreen onLogin={(email) => { setAdminEmail(email); setAuthed(true); }}/>
      </ToastProvider>
    );
  }

  const PageComponent = {
    dashboard: DashboardPage,
    growth: GrowthPage,
    users: UsersPage,
    applications: ApplicationsPage,
    orders: OrdersPage,
    disputes: DisputesPage,
    content: ContentPage,
    r18: R18Page,
    finance: FinancePage,
    admins: AdminsPage,
    audit: AuditPage,
    settings: SettingsPage,
  }[page] || DashboardPage;

  return (
    <ToastProvider>
      <div data-screen-label={page} style={{ display: "flex", height: "100vh", background: "var(--bg)", overflow: "hidden" }}>
        <Sidebar current={page} onNav={setPage} variant={tweakState.sidebarVariant} badges={{ ...(pendingApplications > 0 ? { applications: pendingApplications } : {}), ...(pendingReports > 0 ? { disputes: pendingReports } : {}) }} adminEmail={adminEmail}/>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
          <TopBar adminEmail={adminEmail} adminAvatar={adminAvatar} onAvatarChange={setAdminAvatar} onLogout={() => setAuthed(false)} onNav={setPage} variant={tweakState.sidebarVariant}/>
          <main key={page} style={{ flex: 1, overflow: "auto", padding: "28px 32px" }}>
            <div style={{ maxWidth: 1280, margin: "0 auto" }}>
              <PageComponent adminEmail={adminEmail} onNav={setPage} onPendingCountChange={setPendingApplications}/>
            </div>
          </main>
        </div>
        <TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} state={tweakState} setState={updateTweak}/>
      </div>
    </ToastProvider>
  );
};

const rootEl = document.getElementById("root");
rootEl.innerHTML = '<div style="display:flex;height:100vh;align-items:center;justify-content:center;font-family:var(--font-sans);color:var(--ink-3);font-size:14px;gap:10px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" opacity=".25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" dur=".8s" from="0 12 12" to="360 12 12" repeatCount="indefinite"/></path></svg>載入中…</div>';
window.loadRealData().then(() => {
  rootEl.innerHTML = "";
  ReactDOM.createRoot(rootEl).render(<App/>);
});