import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import { useTranslation } from 'react-i18next';
import { ThemeProvider, useTheme } from './contexts/ThemeContext';
import './i18n';
import MainLayout from './layouts/MainLayout';
import LoginPage from './pages/Login';
import Dashboard from './pages/Dashboard';
import Monitoring from './pages/Monitoring';
import Analysis from './pages/Analysis';
import Alarms from './pages/Alarms';
import Carbon from './pages/Carbon';
import Reports from './pages/Reports';
import Devices from './pages/Devices';
import DeviceDetail from './pages/DeviceDetail';
import SystemManagement from './pages/System';
import Quota from './pages/Quota';

import Maintenance from './pages/Maintenance';
import DataQuery from './pages/DataQuery';
import Management from './pages/Management';
import Prediction from './pages/Prediction';
import EnergyStrategy from './pages/EnergyStrategy';
import AIOperations from './pages/AIOperations';
import BigScreen from './pages/BigScreen';

import { isLoggedIn } from './utils/auth';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  if (!isLoggedIn()) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

function AppContent() {
  const { darkMode } = useTheme();
  const { i18n } = useTranslation();

  return (
    <ConfigProvider
      locale={i18n.language === 'en' ? enUS : zhCN}
      theme={{
        algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: { colorPrimary: '#52c41a', borderRadius: 6 },
      }}
    >
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/bigscreen" element={<BigScreen />} />

          <Route path="/" element={<ProtectedRoute><MainLayout /></ProtectedRoute>}>
            <Route index element={<Dashboard />} />
            <Route path="monitoring" element={<Monitoring />} />
            <Route path="devices" element={<Devices />} />
            <Route path="devices/:id" element={<DeviceDetail />} />
            <Route path="analysis" element={<Analysis />} />
            <Route path="alarms" element={<Alarms />} />
            <Route path="carbon" element={<Carbon />} />
            <Route path="reports" element={<Reports />} />
            <Route path="quota" element={<Quota />} />

            <Route path="maintenance" element={<Maintenance />} />
            <Route path="data-query" element={<DataQuery />} />
            <Route path="management" element={<Management />} />
            <Route path="prediction" element={<Prediction />} />
            <Route path="energy-strategy" element={<EnergyStrategy />} />
            <Route path="ai-operations" element={<AIOperations />} />
            <Route path="system/*" element={<SystemManagement />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
}