import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AppProvider, useApp } from './context/AppContext';
import Sidebar from './components/Sidebar';
import P1Overview from './pages/P1Overview';
import P2FactorAnalysis from './pages/P2FactorAnalysis';
import P3RiskPrediction from './pages/P3RiskPrediction';
import P4StressTest from './pages/P4StressTest';
import P5IndustryImpact from './pages/P5IndustryImpact';
import P6ModelValidation from './pages/P6ModelValidation';
import P7DataGovernance from './pages/P7DataGovernance';
import P9AIAgent from './pages/P9AIAgent';
import P9Pipeline from './pages/P9Pipeline';
import './App.css';

function Layout() {
  const { loading } = useApp();

  return (
    <div className="app-layout">
      <Sidebar />
      <main className="main-content">
        {loading ? (
          <div className="loading-overlay">
            <div className="loader">
              <div className="loader-spinner" />
              <p>加载数据中...</p>
            </div>
          </div>
        ) : (
          <Routes>
            <Route path="/" element={<P1Overview />} />
            <Route path="/factors" element={<P2FactorAnalysis />} />
            <Route path="/prediction" element={<P3RiskPrediction />} />
            <Route path="/stress" element={<P4StressTest />} />
            <Route path="/industry" element={<P5IndustryImpact />} />
            <Route path="/validation" element={<P6ModelValidation />} />
            <Route path="/governance" element={<P7DataGovernance />} />
            <Route path="/hedging" element={<Navigate to="/industry" replace />} />
            <Route path="/agent" element={<P9AIAgent />} />
            <Route path="/pipeline" element={<P9Pipeline />} />
          </Routes>
        )}
      </main>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <AppProvider>
        <Layout />
      </AppProvider>
    </BrowserRouter>
  );
}