import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, App as AntdApp, Spin } from 'antd';
import { XProvider } from '@ant-design/x';
import xZhCN from '@ant-design/x/es/locale/zh_CN';
import zhCN from 'antd/es/locale/zh_CN';
import MainLayout from './layouts/MainLayout';
import PermissionRoute from './components/PermissionRoute';
import DefaultRoute from './components/DefaultRoute';
import AppMessageBridge from './ui/AppMessageBridge';

const LoginPage = lazy(() => import('./pages/Login'));
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const StudentsPage = lazy(() => import('./pages/Students'));
const RoomsPage = lazy(() => import('./pages/Rooms'));
const OccupanciesPage = lazy(() => import('./pages/Occupancies'));
const ExpensesPage = lazy(() => import('./pages/Expenses'));
const BillsPage = lazy(() => import('./pages/Bills'));
const WalletsPage = lazy(() => import('./pages/Wallets'));
const RoomVisualPage = lazy(() => import('./pages/RoomVisual'));
const OperationLogsPage = lazy(() => import('./pages/OperationLogs'));
const UsersPage = lazy(() => import('./pages/Users'));
const ClassroomsPage = lazy(() => import('./pages/Classrooms'));
const DepositsPage = lazy(() => import('./pages/Deposits'));
const TeachersPage = lazy(() => import('./pages/Teachers'));
const StudentProfilePage = lazy(() => import('./pages/StudentProfile'));
const ClassesPage = lazy(() => import('./pages/Classes'));
const ClassDetailPage = lazy(() => import('./pages/Classes/detail'));
const ExamsPage = lazy(() => import('./pages/Exams'));
const ExamDetailPage = lazy(() => import('./pages/Exams/detail'));
const OrganizationsPage = lazy(() => import('./pages/Organizations'));
const ClassroomRentalsPage = lazy(() => import('./pages/ClassroomRentals'));
const ClassroomSchedulePage = lazy(() => import('./pages/ClassroomSchedule'));
const SchedulesPage = lazy(() => import('./pages/Schedules'));
const RolesPage = lazy(() => import('./pages/Roles'));
const PermissionsPage = lazy(() => import('./pages/Permissions'));
const AttendancePage = lazy(() => import('./pages/Attendance'));
const AttendanceDevicesPage = lazy(() => import('./pages/AttendanceDevices'));
const TeacherWorkspacePage = lazy(() => import('./pages/TeacherWorkspace'));
const NotificationsPage = lazy(() => import('./pages/Notifications'));
const IntegrationConfigPage = lazy(() => import('./pages/IntegrationConfig'));
const AiConfigPage = lazy(() => import('./pages/AiConfig'));

const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const token = localStorage.getItem('token');
  return token ? <>{children}</> : <Navigate to="/login" />;
};

const App: React.FC = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#007AFF',
          borderRadius: 10,
          colorBgContainer: '#fff',
          fontFamily:
            "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif",
        },
      }}
    >
      <XProvider
        locale={{ ...zhCN, ...xZhCN }}
        theme={{
          token: { colorPrimary: '#007AFF', borderRadius: 10 },
          components: {
            Sender: { colorBorder: '#d9d9de' },
            Bubble: { colorBgContainer: '#f5f7fa' },
          },
        }}
      >
        <AntdApp>
          <AppMessageBridge />
          <BrowserRouter>
          <Suspense
            fallback={
              <div style={{ minHeight: '40vh', display: 'grid', placeItems: 'center' }}>
                <Spin size="large" />
              </div>
            }
          >
            <Routes>
              <Route path="/login" element={<LoginPage />} />
              <Route
                path="/"
                element={
                  <PrivateRoute>
                    <MainLayout />
                  </PrivateRoute>
                }
              >
                <Route index element={<DefaultRoute />} />
                <Route
                  path="dashboard"
                  element={
                    <PermissionRoute permission="dashboard:view">
                      <DashboardPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="room-visual"
                  element={
                    <PermissionRoute permission="room:view">
                      <RoomVisualPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="students"
                  element={
                    <PermissionRoute permission="student:view">
                      <StudentsPage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="students/:id/profile"
                  element={
                    <PermissionRoute permission="student:view">
                      <StudentProfilePage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="rooms"
                  element={
                    <PermissionRoute permission="room:view">
                      <RoomsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="occupancies"
                  element={
                    <PermissionRoute permission="occupancy:view">
                      <OccupanciesPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="expenses"
                  element={
                    <PermissionRoute permission="expense:view">
                      <ExpensesPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="deposits"
                  element={
                    <PermissionRoute permission="deposit:view">
                      <DepositsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="wallets"
                  element={
                    <PermissionRoute permission="wallet:view">
                      <WalletsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="bills"
                  element={
                    <PermissionRoute permission="bill:view">
                      <BillsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="classes"
                  element={
                    <PermissionRoute permission="class:view">
                      <ClassesPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="classes/:id"
                  element={
                    <PermissionRoute permission="class:view">
                      <ClassDetailPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="exams"
                  element={
                    <PermissionRoute permission="exam:view">
                      <ExamsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="exams/:id"
                  element={
                    <PermissionRoute permission="exam:view">
                      <ExamDetailPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="operation-logs"
                  element={
                    <PermissionRoute permission="log:view">
                      <OperationLogsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="roles"
                  element={
                    <PermissionRoute permission="role:view">
                      <RolesPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="permissions"
                  element={
                    <PermissionRoute permission="role:view">
                      <PermissionsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="users"
                  element={
                    <PermissionRoute permission="user:view">
                      <UsersPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="teachers"
                  element={
                    <PermissionRoute permission="teacher:view">
                      <TeachersPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="classrooms"
                  element={
                    <PermissionRoute permission="classroom:view">
                      <ClassroomsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="organizations"
                  element={
                    <PermissionRoute permission="organization:view">
                      <OrganizationsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="classroom-rentals"
                  element={
                    <PermissionRoute permission="rental:view">
                      <ClassroomRentalsPage />
                    </PermissionRoute>
                  }
                />
                <Route
                  path="classroom-schedule"
                  element={
                    <PermissionRoute permission="rental:view">
                      <ClassroomSchedulePage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="attendance-devices"
                  element={
                    <PermissionRoute permission="classroom:view">
                      <AttendanceDevicesPage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="attendance"
                  element={
                    <PermissionRoute permission="attendance:view">
                      <AttendancePage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="schedules"
                  element={
                    <PermissionRoute permission="schedule:view">
                      <SchedulesPage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="teacher-workspace"
                  element={
                    <PermissionRoute permission="teacher-workspace:view">
                      <TeacherWorkspacePage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="notifications"
                  element={
                    <PermissionRoute permission="notification:view">
                      <NotificationsPage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="integration-config"
                  element={
                    <PermissionRoute permission="integration:read">
                      <IntegrationConfigPage />
                    </PermissionRoute>
                  }
                />

                <Route
                  path="ai-config"
                  element={
                    <PermissionRoute permission="ai:config:read">
                      <AiConfigPage />
                    </PermissionRoute>
                  }
                />
              </Route>
            </Routes>
          </Suspense>
          </BrowserRouter>
        </AntdApp>
      </XProvider>
    </ConfigProvider>
  );
};

export default App;