import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowLeft, Download, ExternalLink, FileCheck } from "lucide-react";
import { useMemo } from "react";
import { Link, useLocation } from "wouter";

export default function MaterialReturnFinalPdfView() {
  const [location] = useLocation();
  const searchParams = useMemo(() => {
    const queryIndex = location.indexOf("?");
    return new URLSearchParams(queryIndex >= 0 ? location.slice(queryIndex + 1) : "");
  }, [location]);

  const documentUrl = searchParams.get("url") || "";
  const rawReturnTo = searchParams.get("returnTo") || "";
  const returnTo = rawReturnTo.startsWith("/") ? rawReturnTo : "/admin?tab=logistique";
  const title = searchParams.get("title") || "Consulter le PDF final de restitution";
  const downloadName = searchParams.get("downloadName") || "fiche-finale-restitution.pdf";
  const hasDocument = Boolean(documentUrl);

  return (
    <div className="min-h-screen bg-muted/30 py-8">
      <main className="container max-w-4xl space-y-6">
        <div className="flex items-center justify-start">
          <Link href={returnTo}>
            <Button variant="outline" className="gap-2">
              <ArrowLeft className="h-4 w-4" />
              Retour
            </Button>
          </Link>
        </div>

        <Card className="border-primary/20">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileCheck className="h-5 w-5 text-primary" />
              {title}
            </CardTitle>
            <CardDescription>
              Consulte la fiche finale de restitution, puis reviens facilement au dossier ou à l’écran précédent.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {hasDocument ? (
              <div className="space-y-4">
                <div className="flex flex-wrap gap-3">
                  <a href={documentUrl} target="_blank" rel="noopener noreferrer">
                    <Button variant="outline" className="gap-2">
                      <ExternalLink className="h-4 w-4" />
                      Ouvrir dans un nouvel onglet
                    </Button>
                  </a>
                  <a href={documentUrl} target="_blank" rel="noopener noreferrer" download={downloadName}>
                    <Button className="gap-2">
                      <Download className="h-4 w-4" />
                      Télécharger le PDF final
                    </Button>
                  </a>
                  <Link href={returnTo}>
                    <Button variant="outline">Retour</Button>
                  </Link>
                </div>

                <div className="rounded-lg border bg-white overflow-hidden">
                  <div className="flex flex-col gap-3 border-b bg-muted/20 px-4 py-3 md:flex-row md:items-center md:justify-between">
                    <div>
                      <p className="text-sm font-semibold">Prévisualisation du document</p>
                      <p className="text-xs text-muted-foreground">
                        Le bouton retour reste disponible ici pendant toute la lecture.
                      </p>
                    </div>
                    <Link href={returnTo}>
                      <Button variant="outline" size="sm">
                        <ArrowLeft className="mr-2 h-4 w-4" />
                        Retour
                      </Button>
                    </Link>
                  </div>
                  <iframe
                    src={documentUrl}
                    title={title}
                    className="h-[70vh] w-full bg-white"
                  />
                </div>

                <div className="flex justify-end">
                  <Link href={returnTo}>
                    <Button variant="outline">
                      <ArrowLeft className="mr-2 h-4 w-4" />
                      Retour
                    </Button>
                  </Link>
                </div>
              </div>
            ) : (
              <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
                Ce PDF final n’est pas disponible pour le moment.
              </div>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  );
}
