import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, App as AntApp, Spin } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import AppLayout from './components/Layout/AppLayout';
import LoginPage from './pages/LoginPage';
import ProjectsPage from './pages/ProjectsPage';
import GeneratePage from './pages/GeneratePage';
import RecordsPage from './pages/RecordsPage';
import CreditsPage from './pages/CreditsPage';
import GenerateConver from './pages/GenerateConver';
import InitialReplication from './pages/InitialReplication';
import InitialInfo from './pages/InitialInfo';
import RemoveLens from './pages/RemoveLens';
import GeneratedRecord from './pages/GeneratedRecord';
import AuthorizationPage from './pages/AuthorizationPage';
import RemoveInfo from './pages/RemoveInfo';
import ConsumePage from './pages/ConsumePage';





import { useAuthStore } from './store/useAuthStore';

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { user, loading, checkAuth } = useAuthStore();

  useEffect(() => {
    const token = localStorage.getItem('auth_token');
    if (!token && !loading && !user) {
      window.location.href = '/login';
    }
  }, [user, loading]);

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <Spin size="large" />
      </div>
    );
  }
  if (!user) {
    window.location.href = '/login';
    return null;
  }
  return <>{children}</>;
};

const App = () => {
  const { checkAuth } = useAuthStore();

  useEffect(() => {
    checkAuth();
  }, []);

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#6366f1',
          borderRadius: 8,
          fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
        },
        components: {
          Button: {
            controlHeight: 36,
            controlHeightLG: 44,
          },
          Card: {
            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
          },
          Table: {
            headerBg: '#fafbfc',
          },
        },
      }}
    >
      <AntApp>
        <BrowserRouter>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <AppLayout />
                </ProtectedRoute>
              }
            >
              <Route index element={<Navigate to="/projects" replace />} />
              <Route path="projects" element={<ProjectsPage />} />
              <Route path="projects/:projectId/generate" element={<GeneratePage />} />
              <Route path="records" element={<RecordsPage />} />
              <Route path="credits" element={<CreditsPage />} />
              <Route path="conversation" element={<GenerateConver />} />
              <Route path="initial" element={<InitialReplication />} />
              <Route path="initial/:creatID/initialinfo" element={<InitialInfo />} />
              <Route path="removelens" element={<RemoveLens />} />
              <Route path="removelens/:creatID/removeinfo" element={<RemoveInfo />} />
              <Route path="generated" element={<GeneratedRecord />} />
              <Route path="authorization" element={<AuthorizationPage />} />
              <Route path="consume" element={<ConsumePage />} />
            </Route>
            <Route path="*" element={<Navigate to="/projects" replace />} />
          </Routes>
        </BrowserRouter>
      </AntApp>
    </ConfigProvider>
  );
};

export default App;