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 dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.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 CreditRecordsPage from './pages/CreditRecordsPage';
import OrderRecordsPage from './pages/OrderRecordsPage';
import MessagesPage from './pages/MessagesPage';
import UserCenterPage from './pages/UserCenterPage';
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 PreTest from './pages/PreTest';
import AuthorizationPage from './pages/AuthorizationPage';
import AuthAccountPage from './pages/AuthAccountPage';
import MaterialListPage from './pages/MaterialListPage';
import RemoveInfo from './pages/RemoveInfo';
import RemoveRw from './pages/RemoveRw';
import HomePage from './pages/HomePage';
// import RemoveFenbu from './pages/RemoveFenbu';
import ConsumePage from './pages/ConsumePage';
import AuthorizationWaitingPage from './pages/AuthorizationWaitingPage';
import PopularPage from './pages/PopularPage';
import CreativePlazaPage from './pages/CreativePlazaPage';
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="credit-records" element={<UserCenterPage />} />
              <Route path="order-records" element={<UserCenterPage />} />
              <Route path="user-center" element={<UserCenterPage />} />
              <Route path="messages" element={<MessagesPage />} />
              <Route path="home" element={<HomePage />} />
              <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="removelens/:creatID/removefenbu" element={<RemoveRw />} />
              {/* <Route path="removelens/:creatID/removefenbu" element={<RemoveFenbu />} /> */}
              <Route path="generated" element={<GeneratedRecord />} />
              <Route path="pretest" element={<PreTest />} />
              <Route path="authorization" element={<AuthorizationPage />} />
              <Route path="authoriza-waiting" element={<AuthorizationWaitingPage />} />
              <Route path="materials" element={<MaterialListPage />} />
              <Route path="consume" element={<ConsumePage />} />
              <Route path="popular" element={<PopularPage />} />
              <Route path="authacc" element={<AuthAccountPage />} />
              <Route path="creativeplaza" element={<CreativePlazaPage />} />
            </Route>
            <Route path="*" element={<Navigate to="/projects" replace />} />
          </Routes>
        </BrowserRouter>
      </AntApp>
    </ConfigProvider>
  );
};

export default App;