/**
 * 更新主入口，引入全局样式
 * V21 设计系统配置
 */
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import router from "./router";
import "./index.css";
import "./styles/global.css";

// 创建 React Query 客户端
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
      staleTime: 5 * 60 * 1000, // 5 分钟
      gcTime: 10 * 60 * 1000, // 10 分钟
    },
  },
});

// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
const theme = {
  token: {
    // 主色调 - Indigo
    colorPrimary: "#4f46e5",
    colorSuccess: "#10b981",
    colorWarning: "#f59e0b",
    colorError: "#ef4444",
    colorInfo: "#4f46e5",

    // 圆角 - V21 大圆角
    borderRadius: 14,
    borderRadiusLG: 22,
    borderRadiusSM: 10,

    // 文字色
    colorText: "#0f172a",
    colorTextSecondary: "#64748b",
    colorTextTertiary: "#94a3b8",

    // 背景色
    colorBgContainer: "#ffffff",
    colorBgLayout: "#f8fafc",

    // 边框色
    colorBorder: "#e2e8f0",
    colorBorderSecondary: "#f1f5f9",

    // 阴影
    boxShadow: "0 10px 30px rgba(15, 23, 42, 0.06)",
    boxShadowSecondary: "0 24px 70px rgba(15, 23, 42, 0.09)",
  },
  components: {
    Button: {
      // 按钮圆角
      borderRadius: 14,
      // 主按钮渐变通过 CSS 实现
      colorPrimary: "#4f46e5",
      colorPrimaryHover: "#6366f1",
      primaryShadow: "0 14px 26px rgba(79, 70, 229, 0.22)",
    },
    Card: {
      borderRadiusLG: 28,
      paddingLG: 28,
    },
    Input: {
      borderRadius: 14,
    },
    Select: {
      borderRadius: 14,
    },
    Modal: {
      borderRadiusLG: 28,
    },
    InputNumber: {
      borderRadius: 14,
    },
    DatePicker: {
      borderRadius: 14,
    },
  },
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ConfigProvider locale={zhCN} theme={theme}>
        <RouterProvider router={router} />
      </ConfigProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);