import { useMemo, useState } from "react";
import { FileText, Plus, Search } from "lucide-react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { DocumentItem } from "@/components/dashboard/DocumentItem";
import { DocumentUpload } from "@/components/dashboard/documents/DocumentUpload";
import { DOCUMENT_CATEGORIES, getDocumentCategoryLabel } from "@/services/documentCategories";
import { workspaceHref } from "@/services/tripWorkspaceState";
import type { Document, Trip, TripStep } from "@/types";

const filters = [["all", "Tous"], ...DOCUMENT_CATEGORIES.map(({ value, label }) => [value, label])] as const;

export function TripDocumentLibrary({ trip }: { trip: Trip }) {
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState<(typeof filters)[number][0]>("all");
  const [uploading, setUploading] = useState(false);
  const rows = useMemo(() => trip.documents.map((document) => { const step = trip.steps.find((candidate) => candidate.id === document.stepId); return { document, step, category: document.type }; }).filter(({ document, step, category }) => { const needle = query.trim().toLowerCase(); const matchesQuery = !needle || [document.name, getDocumentCategoryLabel(document.type), document.type, step?.activity, step?.location, step ? `jour ${step.day}` : "document général"].some((value) => value?.toLowerCase().includes(needle)); return matchesQuery && (filter === "all" || category === filter); }), [filter, query, trip.documents, trip.steps]);
  const linked = rows.filter((row) => row.step);
  const general = rows.filter((row) => !row.step);

  return <div>
    <header className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end"><div><h2 className="page-title">Documents</h2><p className="mt-2 text-muted-foreground">Tous les fichiers utiles de ce voyage, reliés à leur contexte.</p></div><Button onClick={() => setUploading(true)}><Plus className="mr-2 h-4 w-4" />Ajouter un document</Button></header>
    <div className="mt-8 flex flex-col gap-4">{trip.documents.length >= 6 && <label className="relative max-w-md"><span className="sr-only">Rechercher un document</span><Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" /><Input className="pl-9" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Rechercher un document…" /></label>}<div className="flex gap-2 overflow-x-auto pb-1" role="group" aria-label="Filtrer les documents">{filters.map(([value, label]) => <Button key={value} size="sm" variant={filter === value ? "secondary" : "ghost"} aria-pressed={filter === value} onClick={() => setFilter(value)}>{label}</Button>)}</div></div>
    {rows.length ? <div className="mt-8 space-y-10">{linked.length > 0 && <DocumentSection title="Documents liés aux étapes" rows={linked} trip={trip} />}{general.length > 0 && <DocumentSection title="Documents généraux" rows={general} trip={trip} />}</div> : <div className="mt-10 rounded-xl bg-muted/40 px-6 py-14 text-center"><FileText className="mx-auto h-8 w-8 text-muted-foreground" /><h3 className="mt-4 text-lg font-semibold">{query || filter !== "all" ? "Aucun document trouvé" : "Aucun document pour ce voyage"}</h3><p className="mx-auto mt-2 max-w-md text-sm text-muted-foreground">Ajoutez billets, réservations et autres fichiers utiles. Vous pourrez aussi les rattacher directement à une étape.</p><Button className="mt-5" onClick={() => setUploading(true)}><Plus className="mr-2 h-4 w-4" />Ajouter un document</Button></div>}
    <DocumentUpload tripId={trip.id} steps={trip.steps} isOpen={uploading} onClose={() => setUploading(false)} />
  </div>;
}

function DocumentSection({ title, rows, trip }: { title: string; rows: Array<{ document: Document; step?: TripStep; category: string }>; trip: Trip }) {
  return <section><div className="mb-3 flex items-center gap-2"><h3 className="text-lg font-semibold">{title}</h3><Badge variant="outline">{rows.length}</Badge></div><div className="divide-y border-y">{rows.map(({ document, step }) => { const search = new URLSearchParams(); if (step) { search.set("day", String(step.day)); search.set("step", step.id); search.set("panel", "step"); } return <article key={document.id} className="py-3"><DocumentItem document={document} tripId={trip.id} isPlanner /><div className="flex flex-wrap items-center gap-2 px-3 pt-2 text-xs text-muted-foreground"><Badge variant="outline">{getDocumentCategoryLabel(document.type)}</Badge>{step ? <><span>Jour {step.day} · {step.activity}{step.location ? ` · ${step.location}` : ""}</span><Badge variant={step.isPublished ? "default" : "outline"}>{step.isPublished ? "Visible avec cette étape" : "Masqué avec cette étape"}</Badge><Button asChild variant="link" size="sm" className="ml-auto h-auto p-0"><Link to={workspaceHref(`/dashboard/trips/${trip.id}/itinerary`, search)}>Voir l’étape</Link></Button></> : <Badge variant="secondary">Document général</Badge>}</div></article>; })}</div></section>;
}