/**
 * # 应用入口
 * Providers：TanStack Query + antd ConfigProvider + Router
 */
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConfigProvider, App as AntApp, theme as antdTheme } from "antd";
import zhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { BrowserRouter } from "react-router-dom";
import App from "./app";
import { useThemeStore } from "./stores/theme";

dayjs.locale("zh-cn");

/** # 全局 QueryClient（服务端状态缓存） **/
const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, refetchOnWindowFocus: false, staleTime: 10_000 },
  },
});

/** # 主题根组件：跟随全局主题切换 antd algorithm 与背景色 */
function ThemedRoot({ children }: { children: React.ReactNode }) {
  const mode = useThemeStore((s) => s.mode);
  const dark = mode === "dark";
  if (typeof document !== "undefined") {
    document.body.style.background = dark ? "#141619" : "#f5f5f5";
    document.body.style.color = dark ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.88)";
  }
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: dark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
        token: { colorPrimary: "#4f46e5", borderRadius: 6 },
      }}
    >
      {children}
    </ConfigProvider>
  );
}

createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <ThemedRoot>
      <AntApp>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </AntApp>
      </ThemedRoot>
  </QueryClientProvider>,
);