import React from "react";
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider, theme } from "antd";
import { ThemeProvider } from "./contexts/ThemeContext";
import { AuthProvider } from "./contexts/AuthContext";
import AppRoutes from "./routes/AppRoutes";
import { useTheme } from "./contexts/ThemeContext";
import { RootStoreProvider } from "./contexts/RootStore";

const ThemedApp = () => {
  const { isDarkMode } = useTheme();

  return (
    <ConfigProvider
      theme={{
        algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: "#1677ff",
          borderRadius: 4,
          colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
          colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
          colorText: isDarkMode
            ? "rgba(255, 255, 255, 0.85)"
            : "rgba(0, 0, 0, 0.85)",
          colorTextSecondary: isDarkMode
            ? "rgba(255, 255, 255, 0.45)"
            : "rgba(0, 0, 0, 0.45)",
        },
        components: {
          // 为所有支持 variant 的组件设置 filled 模式
          Form: {
            variant: 'filled',
          },
          Input: {
            variant: 'filled',
          },
          Select: {
            variant: 'filled',
          },
          TreeSelect: {
            variant: 'filled',
          },
          DatePicker: {
            variant: 'filled',
          },
          TimePicker: {
            variant: 'filled',
          },
          Cascader: {
            variant: 'filled',
          },
          AutoComplete: {
            variant: 'filled',
          },
        }
      }}
    >
      <div className={isDarkMode ? "dark" : ""}>
        <AppRoutes />
      </div>
    </ConfigProvider>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <AuthProvider>
        <RootStoreProvider>
          <ThemeProvider>
            <ThemedApp />
          </ThemeProvider>
        </RootStoreProvider>
      </AuthProvider>
    </BrowserRouter>
  );
};

export default App;
