import { Link } from "wouter";
import { ArrowRight, ShieldCheck } from "lucide-react";
import { useMemo, useState } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { dataPrivacyConsentContextLabels, type DataPrivacyConsentContext } from "@shared/privacyCompliance";

type DataPrivacyValidationDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  context: DataPrivacyConsentContext;
  confirmLabel?: string;
  onConfirm: () => void;
};

export default function DataPrivacyValidationDialog({
  open,
  onOpenChange,
  context,
  confirmLabel = "Valider",
  onConfirm,
}: DataPrivacyValidationDialogProps) {
  const [acknowledged, setAcknowledged] = useState(false);

  const contextLabel = useMemo(() => dataPrivacyConsentContextLabels[context], [context]);

  return (
    <Dialog
      open={open}
      onOpenChange={(nextOpen) => {
        onOpenChange(nextOpen);
        if (!nextOpen) {
          setAcknowledged(false);
        }
      }}
    >
      <DialogContent className="max-h-[92vh] max-w-2xl overflow-hidden p-0 sm:max-h-[88vh]">
        <div className="border-b bg-emerald-50/80 px-4 py-4 sm:px-6">
          <div className="flex items-start gap-3">
            <div className="mt-0.5 rounded-full bg-emerald-100 p-2 text-emerald-700">
              <ShieldCheck className="h-5 w-5" />
            </div>
            <div>
              <DialogHeader className="text-left">
                <DialogTitle>Validation des données personnelles</DialogTitle>
                <DialogDescription>
                  Avant de poursuivre avec l’action <span className="font-medium text-foreground">{contextLabel}</span>, merci de confirmer la gestion des données personnelles.
                </DialogDescription>
              </DialogHeader>
            </div>
          </div>
        </div>

        <div className="max-h-[calc(92vh-190px)] space-y-4 overflow-y-auto px-4 py-5 sm:max-h-[calc(88vh-190px)] sm:px-6">
          <div className="rounded-xl border border-emerald-200 bg-emerald-50/70 px-4 py-3">
            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-700">Action à valider</p>
            <p className="mt-1 text-sm font-semibold leading-6 text-slate-950">{confirmLabel}</p>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              Cette confirmation porte sur l’action métier suivante : <span className="font-medium text-slate-900">{contextLabel}</span>.
            </p>
          </div>

          <div className="rounded-lg border bg-muted/20 p-4 text-sm text-muted-foreground">
            Le portail collecte uniquement les informations nécessaires au traitement des dossiers associatifs, à l’instruction administrative, au suivi documentaire et à la sécurité opérationnelle du service.
          </div>

          <ul className="space-y-3 text-sm text-foreground">
            <li>Les données saisies sont utilisées pour traiter les demandes, gérer les pièces jointes et assurer le suivi du portail.</li>
            <li>Les accès sont limités selon les rôles internes et les actions sensibles sont tracées dans le journal du portail.</li>
            <li>Les personnes concernées disposent d’un droit d’accès, de rectification, d’opposition et de suppression selon le RGPD.</li>
            <li>Le portail applique une logique de minimisation des données et de séparation des accès en cohérence avec les bonnes pratiques ISO 27001.</li>
          </ul>

          <div className="rounded-lg border border-primary/15 bg-primary/5 p-4 text-sm">
            <p className="font-medium">En savoir plus</p>
            <p className="mt-1 text-muted-foreground">
              Consulte la page de confidentialité pour les finalités, la base légale, les durées de conservation et les modalités d’exercice des droits.
            </p>
            <Link href="/confidentialite" className="mt-2 inline-flex text-sm font-medium text-primary underline underline-offset-4">
              Ouvrir la politique de confidentialité
            </Link>
          </div>

          <label className="flex items-start gap-3 rounded-lg border p-4">
            <Checkbox
              checked={acknowledged}
              onCheckedChange={(value) => setAcknowledged(Boolean(value))}
              aria-label="Je confirme avoir pris connaissance des informations relatives aux données personnelles"
            />
            <span className="text-sm leading-6">
              Je confirme avoir pris connaissance des informations relatives aux données personnelles et je poursuis cette action en connaissance de cause.
            </span>
          </label>
        </div>

        <DialogFooter className="border-t bg-background/98 px-4 py-4 shadow-[0_-14px_28px_-24px_rgba(15,23,42,0.35)] backdrop-blur sm:px-6">
          <div className="w-full rounded-xl border border-slate-200 bg-slate-50/85 px-3 py-2 text-sm text-slate-600 sm:mr-auto sm:max-w-md">
            {acknowledged
              ? `La confirmation est prête. Cliquez sur « ${confirmLabel} » pour poursuivre.`
              : "Cochez la confirmation ci-dessus, puis validez l’action pour continuer."}
          </div>
          <Button variant="outline" onClick={() => onOpenChange(false)} className="w-full sm:w-auto">
            Annuler
          </Button>
          <Button
            onClick={() => {
              onConfirm();
              setAcknowledged(false);
            }}
            disabled={!acknowledged}
            className="w-full gap-2 sm:w-auto"
          >
            <ArrowRight className="h-4 w-4" />
            {confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
