import React from 'react';
import { RouterProvider } from 'react-router-dom';
import { ConfigProvider, App as AntdApp } from 'antd';
import { CubeProvider } from '@cubejs-client/react';
import zhCN from 'antd/locale/zh_CN';
import router from './router';
import cubejsApi from './api/cubejs';
import AppVersionGuard from './components/AppVersionGuard';
import { SycmStandaloneFrame, SycmStandalonePage } from './components/Common';
import { sycmAntdTheme } from './design-system/theme';
import './index.css';

function App() {
  // 如果 cubejsApi 未定义，显示错误
  if (!cubejsApi) {
    return (
      <SycmStandalonePage centered>
        <SycmStandaloneFrame maxWidth={560} className="app-fatal-state">
          <h1>Cube.js 客户端初始化失败</h1>
          <p>请检查控制台日志</p>
        </SycmStandaloneFrame>
      </SycmStandalonePage>
    );
  }

  return (
    <ConfigProvider locale={zhCN} theme={sycmAntdTheme}>
      <AntdApp>
        <AppVersionGuard />
        <CubeProvider cubejsApi={cubejsApi}>
          <RouterProvider router={router} />
        </CubeProvider>
      </AntdApp>
    </ConfigProvider>
  );
}

export default App;