/** 前端入口:antd v6 + react-router(Vite 构建);亮/暗主题状态在顶层持有 */
import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { ConfigProvider, App as AntdApp } from "antd";
import zhCN from "antd/locale/zh_CN";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { applyDarkMode, buildAntdTheme, loadDarkMode } from "./theme.ts";
import { ThemeContext } from "./theme-context.ts";
import "./styles.css";
import { App } from "./App.tsx";
import { LoginPage } from "./pages/Login.tsx";
import { OAuthSimPage } from "./pages/OAuthSim.tsx";
import { DashboardPage } from "./pages/Dashboard.tsx";
import { AccountsPage } from "./pages/Accounts.tsx";
import { DomainsPage } from "./pages/Domains.tsx";
import { MailboxesPage } from "./pages/Mailboxes.tsx";
import { InboxPage } from "./pages/Inbox.tsx";
import { setUnauthorizedHandler } from "./api.ts";

/** # 成员变量: 路由表(邮件页路由 /inboxs,v2.1.0) **/
const router = createBrowserRouter([
  { path: "/login", element: <LoginPage /> },
  { path: "/oauth/sim/authorize", element: <OAuthSimPage /> },
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <DashboardPage /> },
      { path: "accounts", element: <AccountsPage /> },
      { path: "domains", element: <DomainsPage /> },
      { path: "mailboxes", element: <MailboxesPage /> },
      { path: "inboxs", element: <InboxPage /> },
    ],
  },
]);

/** # 函数
 * 顶层壳:持有主题状态,注入 Context 与 ConfigProvider
 */
function Shell() {
  const [dark, setDark] = useState(loadDarkMode);

  useEffect(() => {
    applyDarkMode(dark);
  }, [dark]);

  return (
    <ThemeContext.Provider value={{ dark, toggle: () => setDark((v) => !v) }}>
      <ConfigProvider locale={zhCN} theme={buildAntdTheme(dark)}>
        <AntdApp>
          <RouterProvider router={router} />
        </AntdApp>
      </ConfigProvider>
    </ThemeContext.Provider>
  );
}

/** 未登录统一跳登录页 */
setUnauthorizedHandler(() => {
  if (!location.pathname.startsWith("/login")) {
    location.href = "/login";
  }
});

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Shell />
  </React.StrictMode>,
);