import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider, App as AntApp } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'antd/dist/reset.css';
import App from './App';
import { initializeMonitoring, Sentry } from './monitoring';

initializeMonitoring();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
          fontFamily:
            '-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif',
        },
      }}
    >
      <Sentry.ErrorBoundary
        fallback={
          <div style={{ maxWidth: 560, margin: '96px auto', padding: 24 }}>
            <h1>管理后台发生错误</h1>
            <p>错误已经记录，请刷新页面重试。若仍然失败，请联系管理员。</p>
          </div>
        }
      >
        <AntApp>
          <App />
        </AntApp>
      </Sentry.ErrorBoundary>
    </ConfigProvider>
  </React.StrictMode>,
);