/**
 * Page /historique — liste paginée des simulations de l'utilisateur connecté.
 *
 * Consommateurs amont :
 *   - `usePlan` (cache partagé avec dashboard/simulation)
 *   - `useSimulationsList(page, limit)` — cache `['simulations', 'list', p, l]`
 *
 * Gating Free via `hasAccess(plan, 'dashboard')` délégué à `SimulationsList`.
 * Pagination : Précédent/Suivant via state local `page`.
 *
 * Règle H : aucune logique métier — toute l'orchestration vit dans SimulationsList.
 */

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { usePlan } from '@/features/dashboard/hooks/usePlan'
import { useSimulationsList } from '../hooks/useSimulationsList'
import { SimulationsList } from '../components/SimulationsList'

const PAGE_SIZE = 20

export function HistoriquePage() {
  const navigate = useNavigate()
  const [page, setPage] = useState(1)

  const { data: planData, isLoading: isPlanLoading } = usePlan()
  const { data, isLoading, isError } = useSimulationsList(page, PAGE_SIZE)

  return (
    <main className="mx-auto max-w-3xl space-y-6 px-4 py-6">
      <header className="space-y-1">
        <h1 className="text-lg font-semibold text-ink-primary">Historique</h1>
        <p className="text-sm text-ink-secondary">
          Retrouvez toutes vos simulations passées et leur progression.
        </p>
      </header>

      {isPlanLoading || !planData ? (
        <div className="space-y-3" aria-busy="true">
          <div className="h-20 animate-pulse rounded-lg bg-surface" />
          <div className="h-20 animate-pulse rounded-lg bg-surface" />
        </div>
      ) : (
        <SimulationsList
          plan={planData.plan}
          data={data}
          isLoading={isLoading}
          isError={isError}
          page={page}
          limit={PAGE_SIZE}
          onPrev={() => setPage((p) => Math.max(1, p - 1))}
          onNext={() => setPage((p) => p + 1)}
          onUpgrade={() => navigate('/plan')}
        />
      )}
    </main>
  )
}