"use client";

import { ArrowLeft, ClipboardList, FileClock, Files } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";

import DynamicDocumentsAutomatiques from "@/components/impressions/DynamicDocumentsAutomatiques";
import EtatsPanel from "@/components/impressions/EtatsPanel";
import LegacyDocumentsAutomatiques from "@/components/impressions/LegacyDocumentsAutomatiques";

export default function DocumentsAutomatiquesPage() {
  const router = useRouter();
  const [mode, setMode] = useState<"templates" | "legacy" | "states">("templates");

  return (
    <div className="min-h-screen bg-slate-100">
      <header className="border-b border-slate-200 bg-white px-4 py-4 shadow-sm md:px-6">
        <div className="mx-auto flex max-w-[1500px] flex-wrap items-center justify-between gap-3">
          <div>
            <p className="text-sm font-semibold text-blue-600">Impressions</p>
            <h1 className="text-2xl font-bold text-slate-900">Documents</h1>
            <p className="text-sm text-slate-500">Générez les documents automatiques et les états RH de l'établissement.</p>
          </div>
          <button type="button" onClick={() => router.back()} className="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 font-semibold text-slate-700 hover:bg-slate-50"><ArrowLeft size={18} />Retour</button>
        </div>
        <div className="mx-auto mt-4 flex max-w-[1500px] gap-2">
          <button type="button" onClick={() => setMode("templates")} className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold ${mode === "templates" ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-700"}`}><Files size={17} />Modèles importés</button>
          <button type="button" onClick={() => setMode("legacy")} className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold ${mode === "legacy" ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-700"}`}><FileClock size={17} />Documents historiques</button>
          <button type="button" onClick={() => setMode("states")} className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold ${mode === "states" ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-700"}`}><ClipboardList size={17} />États</button>
        </div>
      </header>
      {mode === "templates" ? <DynamicDocumentsAutomatiques /> : mode === "legacy" ? <LegacyDocumentsAutomatiques /> : <EtatsPanel />}
    </div>
  );
}