import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { ConfigProvider, App as AntdApp } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { UserProvider, AdminProvider, QuizProvider } from './contexts';
import App from './App';
import 'antd/dist/reset.css';
import './index.css';

dayjs.locale('zh-cn');

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <ConfigProvider
        locale={zhCN}
        theme={{
          token: {
            colorPrimary: '#008C8C',
            colorInfo: '#008C8C',
            colorLink: '#008C8C',
            borderRadius: 8,
            fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, sans-serif',
          },
          components: {
            Button: {
              controlHeight: 40,
              controlHeightLG: 48,
              borderRadius: 8,
              primaryShadow: '0 2px 0 rgba(0, 140, 140, 0.1)',
            },
            Input: {
              controlHeight: 40,
              controlHeightLG: 48,
              borderRadius: 8,
            },
            Select: {
              controlHeight: 40,
              controlHeightLG: 48,
              borderRadius: 8,
            },
            Card: {
              borderRadiusLG: 12,
              boxShadowTertiary: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
            },
            Layout: {
              headerBg: '#ffffff',
              siderBg: '#ffffff',
            },
          }
        }}
      >
        <AntdApp>
          <UserProvider>
            <AdminProvider>
              <QuizProvider>
                <App />
              </QuizProvider>
            </AdminProvider>
          </UserProvider>
        </AntdApp>
      </ConfigProvider>
    </BrowserRouter>
  </React.StrictMode>
);
