import { useEffect } from 'react';
import { ConfigProvider, App as AntApp, theme } from 'antd';
import { ProConfigProvider } from '@ant-design/pro-components';
import { RouterProvider } from 'react-router';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import 'dayjs/locale/zh-cn';
import { router } from './router';
import { useAppStore } from './stores/useAppStore';
import { setMessageApi } from './utils/messageHolder';

const localeMap: Record<string, typeof zhCN> = {
  'zh-CN': zhCN,
  'en-US': enUS,
};

const MessageApiSetter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { message } = AntApp.useApp();
  useEffect(() => {
    setMessageApi(message);
  }, [message]);
  return <>{children}</>;
};

const AppRoot: React.FC = () => {
  const darkMode = useAppStore((s) => s.darkMode);
  const language = useAppStore((s) => s.language);
  const primaryColor = useAppStore((s) => s.primaryColor);
  const componentSize = useAppStore((s) => s.componentSize);

  return (
    <ConfigProvider
      locale={localeMap[language] ?? zhCN}
      componentSize={componentSize}
      theme={{
        algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: primaryColor,
          padding: 10,
          paddingLG: 12,
          paddingMD: 8,
          paddingSM: 6,
        },
        components: {
          Form: {
            itemMarginBottom: 10,  // 默认 24px → 10px
          },
          Card: {

          },
          Drawer: {
          },
        },
      }}

    >
      <ProConfigProvider dark={darkMode}>
        <AntApp>
          <MessageApiSetter>
            <RouterProvider router={router} />
          </MessageApiSetter>
        </AntApp>
      </ProConfigProvider>
    </ConfigProvider>
  );
};

export default AppRoot;