import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConfigProvider, ThemeConfig } from 'antd';
import koKR from 'antd/locale/ko_KR';
import 'dayjs/locale/ko';
import App from './App';
import './index.css';

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 1, staleTime: 30_000 } },
});

const theme: ThemeConfig = {
  token: {
    // 브랜드
    colorPrimary: '#1677FF',
    colorSuccess: '#0F6E56',
    colorWarning: '#BA7517',
    colorError:   '#E24B4A',
    colorInfo:    '#1677FF',

    // 폰트
    fontFamily: "'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif",
    fontSize: 13,
    fontSizeHeading1: 22,
    fontSizeHeading2: 18,
    fontSizeHeading3: 16,

    // 라운딩
    borderRadius:   6,
    borderRadiusLG: 8,

    // 간격
    padding:   16,
    paddingLG: 24,
    margin:    16,

    // 배경
    colorBgContainer: '#ffffff',
    colorBgLayout:    '#f5f5f5',
    colorBgElevated:  '#ffffff',
  },
  components: {
    Menu: {
      itemHeight: 40,
      itemMarginInline: 8,
      itemBorderRadius: 6,
      subMenuItemBg: 'transparent',
      itemSelectedBg: '#e6f1fb',
      itemSelectedColor: '#185fa5',
    },
    Table: {
      headerBg: '#fafafa',
      rowHoverBg: '#f5f7fa',
      cellPaddingBlock: 10,
      cellPaddingInline: 12,
      headerSplitColor: '#f0f0f0',
    },
    Button: {
      controlHeight: 32,
      controlHeightSM: 28,
      paddingInline: 16,
    },
    Input:  { controlHeight: 32, paddingInline: 10 },
    Select: { controlHeight: 32 },
    Card:   { paddingLG: 16 },
    Layout: {
      headerHeight: 48,
      headerBg: '#ffffff',
      headerPadding: '0 16px',
      siderBg: '#ffffff',
      bodyBg: '#f5f5f5',
    },
  },
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider locale={koKR} theme={theme}>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </QueryClientProvider>
    </ConfigProvider>
  </React.StrictMode>,
);