frontend/src/App.tsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useState } from 'react';
import Sidebar from './components/Sidebar';
import Landing from './pages/Landing';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import MarketExplorer from './pages/MarketExplorer';
import FactorAnalysis from './pages/FactorAnalysis';
import StrategyBuilder from './pages/StrategyBuilder';
import PortfolioAnalysis from './pages/PortfolioAnalysis';
import BacktestResults from './pages/BacktestResults';
import Marketplace from './pages/Marketplace';
import ResearchInsights from './pages/ResearchInsights';
import HoldingsTracker from './pages/HoldingsTracker';
import Sentiment from './pages/Sentiment';
import EconomicCalendar from './pages/EconomicCalendar';
import PortfolioHealth from './pages/PortfolioHealth';
import BiasDetector from './pages/BiasDetector';
import CrisisReplay from './pages/CrisisReplay';
import PortfolioDNA from './pages/PortfolioDNA';
import Copilot from './pages/Copilot';
import PatternIntelligence from './pages/PatternIntelligence';
import PineScriptLab from './pages/PineScriptLab';
import PaperTrading from './pages/PaperTrading';
import './index.css';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const token = localStorage.getItem('qh_token');
  if (!token) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

function AppLayout({ children }: { children: React.ReactNode }) {
  const [sidebarExpanded, setSidebarExpanded] = useState(false);

  return (
    <div className="app-layout">
      <Sidebar onExpandChange={setSidebarExpanded} />
      <main className="app-main" style={{ marginLeft: sidebarExpanded ? 260 : 68, transition: 'margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1)' }}>
        {children}
      </main>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/dashboard" element={
          <ProtectedRoute><AppLayout><Dashboard /></AppLayout></ProtectedRoute>
        } />
        <Route path="/holdings" element={
          <ProtectedRoute><AppLayout><HoldingsTracker /></AppLayout></ProtectedRoute>
        } />
        <Route path="/market" element={
          <ProtectedRoute><AppLayout><MarketExplorer /></AppLayout></ProtectedRoute>
        } />
        <Route path="/factors" element={
          <ProtectedRoute><AppLayout><FactorAnalysis /></AppLayout></ProtectedRoute>
        } />
        <Route path="/sentiment" element={
          <ProtectedRoute><AppLayout><Sentiment /></AppLayout></ProtectedRoute>
        } />
        <Route path="/strategies" element={
          <ProtectedRoute><AppLayout><StrategyBuilder /></AppLayout></ProtectedRoute>
        } />
        <Route path="/portfolio" element={
          <ProtectedRoute><AppLayout><PortfolioAnalysis /></AppLayout></ProtectedRoute>
        } />
        <Route path="/backtests" element={
          <ProtectedRoute><AppLayout><BacktestResults /></AppLayout></ProtectedRoute>
        } />
        <Route path="/marketplace" element={
          <ProtectedRoute><AppLayout><Marketplace /></AppLayout></ProtectedRoute>
        } />
        <Route path="/research" element={
          <ProtectedRoute><AppLayout><ResearchInsights /></AppLayout></ProtectedRoute>
        } />
        <Route path="/calendar" element={
          <ProtectedRoute><AppLayout><EconomicCalendar /></AppLayout></ProtectedRoute>
        } />
        {/* ── New Analytics & AI Pages ──────────────────────────────────── */}
        <Route path="/portfolio-health" element={
          <ProtectedRoute><AppLayout><PortfolioHealth /></AppLayout></ProtectedRoute>
        } />
        <Route path="/bias-detector" element={
          <ProtectedRoute><AppLayout><BiasDetector /></AppLayout></ProtectedRoute>
        } />
        <Route path="/crisis-replay" element={
          <ProtectedRoute><AppLayout><CrisisReplay /></AppLayout></ProtectedRoute>
        } />
        <Route path="/portfolio-dna" element={
          <ProtectedRoute><AppLayout><PortfolioDNA /></AppLayout></ProtectedRoute>
        } />
        <Route path="/copilot" element={
          <ProtectedRoute><AppLayout><Copilot /></AppLayout></ProtectedRoute>
        } />
        <Route path="/pattern-intelligence" element={
          <ProtectedRoute><AppLayout><PatternIntelligence /></AppLayout></ProtectedRoute>
        } />
        <Route path="/pinescript-lab" element={
          <ProtectedRoute><AppLayout><PineScriptLab /></AppLayout></ProtectedRoute>
        } />
        <Route path="/paper-trading" element={
          <ProtectedRoute><AppLayout><PaperTrading /></AppLayout></ProtectedRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}