import React, { Suspense } from 'react'
import { Navigate, Outlet, Routes, Route } from 'react-router-dom'

import { LoginPage } from '@/features/auth/pages/LoginPage'
import { RegisterPage } from '@/features/auth/pages/RegisterPage'
import { ProtectedRoute } from '@/features/auth/components/ProtectedRoute'
import { DashboardPage } from '@/features/dashboard/pages/DashboardPage'
import { SimulationPage } from '@/features/simulations/pages/SimulationPage'
import { SujetsPage } from '@/features/simulations/pages/SujetsPage'
import { RapportPage } from '@/features/simulations/pages/RapportPage'
import { SimulationFlowProvider } from '@/features/simulations/state/SimulationFlowProvider'
import { AppLayout } from './AppLayout'

const DesignSystemPage = import.meta.env.DEV
  ? React.lazy(() => import('@/features/design-system/DesignSystemPage'))
  : () => null

function ComingSoon() {
  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-2 px-4 text-center">
      <p className="text-sm font-medium text-ink-2">Page en cours de développement</p>
      <p className="text-xs text-ink-4">Disponible dans une prochaine version.</p>
    </div>
  )
}

function PrivateLayout() {
  return (
    <ProtectedRoute>
      <AppLayout>
        <Outlet />
      </AppLayout>
    </ProtectedRoute>
  )
}

function SimulationFlowLayout() {
  return (
    <SimulationFlowProvider>
      <Outlet />
    </SimulationFlowProvider>
  )
}

export function AppRouter() {
  return (
    <Routes>
      {/* ── Routes publiques ─────────────────────────────────────── */}
      <Route path="/login"    element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />

      {/* ── Routes privées — ProtectedRoute + AppLayout ──────────── */}
      <Route element={<PrivateLayout />}>
        <Route path="/"              element={<Navigate to="/dashboard" replace />} />
        <Route path="/dashboard"     element={<DashboardPage />} />

        {/* Simulation — /simulation/ee, /sujets et /rapport/:id partagent le
            SimulationFlowProvider. L'instance est préservée entre ces routes
            par React Router tant que le layout parent reste monté, ce qui
            permet à RapportPage.reset() d'agir sur le même state que
            SimulationPage (bouton « Nouvelle simulation » + breadcrumb). */}
        <Route path="/simulation"    element={<Navigate to="/simulation/ee" replace />} />
        <Route element={<SimulationFlowLayout />}>
          <Route path="/simulation/ee" element={<SimulationPage />} />
          <Route path="/sujets"        element={<SujetsPage />} />
          <Route path="/rapport/:id"   element={<RapportPage />} />
        </Route>
        <Route path="/simulation/eo" element={<ComingSoon />} />

        {/* Autres sections — Sprint 4+ */}
        <Route path="/examen"        element={<ComingSoon />} />
        <Route path="/progression"   element={<ComingSoon />} />
        <Route path="/methodologie"  element={<ComingSoon />} />
        <Route path="/historique"    element={<ComingSoon />} />
        <Route path="/plan"          element={<ComingSoon />} />
        <Route path="/parametres"    element={<ComingSoon />} />
      </Route>

      {/* ── Dev only ─────────────────────────────────────────────── */}
      {import.meta.env.DEV && (
        <Route
          path="/design-system"
          element={
            <Suspense fallback={<div className="p-6 text-ink-4">Loading…</div>}>
              <DesignSystemPage />
            </Suspense>
          }
        />
      )}
    </Routes>
  )
}