import DataPrivacyValidationDialog from "@/components/DataPrivacyValidationDialog";
import { AuthenticatedPageSkeleton } from "@/components/AuthenticatedPageSkeleton";
import { PortalDashboardHeader, PortalMetricTile, PortalSectionIntro, PortalSurface } from "@/components/portal/PortalSurface";
import { ProfileRequiredState } from "@/components/ProfileRequiredState";
import { useViewportFlags } from "@/hooks/useMobile";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { trpc } from "@/lib/trpc";
import { getFriendlyActionError } from "@/lib/userFeedback";
import { cn } from "@/lib/utils";
import { buildDataPrivacyConsent } from "@shared/privacyCompliance";
import { ArrowLeft, ArrowRight, Building2, CheckCircle, FileText, Loader2, Send } from "lucide-react";
import { useEffect, useState } from "react";
import { useLocation } from "wouter";
import { toast } from "sonner";

const NEW_REQUEST_DRAFT_KEY = "new-request-draft";

const requestTypes = [
  { 
    value: 'subvention_fonctionnement', 
    label: 'Subvention de fonctionnement',
    description: 'Financement des activités courantes de l\'association',
    icon: '💰'
  },
  { 
    value: 'subvention_projet', 
    label: 'Subvention de projet',
    description: 'Financement d\'un projet spécifique',
    icon: '🎯'
  },
  { 
    value: 'agrement_jeunesse_education', 
    label: 'Agrément Jeunesse et Éducation Populaire',
    description: 'Reconnaissance officielle par le ministère',
    icon: '📚'
  },
  { 
    value: 'agrement_sport', 
    label: 'Agrément Sport',
    description: 'Agrément pour les associations sportives',
    icon: '⚽'
  },
  { 
    value: 'autorisation_occupation', 
    label: 'Autorisation d\'occupation',
    description: 'Demande d\'occupation du domaine public',
    icon: '🏛️'
  },
  { 
    value: 'autre', 
    label: 'Autre demande',
    description: 'Autre type de demande administrative',
    icon: '📋'
  },
];

type RequestType = typeof requestTypes[number]['value'];

const requestTypeLookup = Object.fromEntries(
  requestTypes.map((type) => [type.value, type])
) as Record<RequestType, (typeof requestTypes)[number]>;

const requestSteps = [
  {
    id: 1,
    title: "Choix du parcours",
    description: "Sélectionnez la nature de votre demande pour afficher le bon formulaire.",
  },
  {
    id: 2,
    title: "Informations essentielles",
    description: "Renseignez le contenu de la demande et vérifiez les éléments pré-remplis.",
  },
  {
    id: 3,
    title: "Pièces et validation",
    description: "Ajoutez les documents utiles puis relisez le récapitulatif avant l'envoi.",
  },
] as const;

export default function NewRequest() {
  const [, setLocation] = useLocation();
  const { isMobile, isTablet } = useViewportFlags();
  const { data: association, isLoading: associationLoading } = trpc.association.getMyProfile.useQuery();
  const { data: documents, isLoading: documentsLoading } = trpc.document.getMyDocuments.useQuery();
  const isCompactViewport = isMobile || isTablet;

  const [step, setStep] = useState(1);
  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(false);
  const [selectedType, setSelectedType] = useState<RequestType | null>(null);
  const [formData, setFormData] = useState({
    titre: '',
    description: '',
    montantDemande: '',
    // Subvention specific
    objetProjet: '',
    dateDebut: '',
    dateFin: '',
    publicVise: '',
  });
  const [selectedDocuments, setSelectedDocuments] = useState<number[]>([]);
  const selectedRequestType = selectedType ? requestTypeLookup[selectedType] : null;
  const titleIsValid = formData.titre.trim().length > 0;
  const descriptionIsStarted = formData.description.trim().length > 0;
  const completionScore = [
    Boolean(selectedType),
    titleIsValid,
    step === 3 || selectedDocuments.length > 0,
  ].filter(Boolean).length;
  const completionLabel = `${completionScore}/3 repères principaux complétés`;

  const createMutation = trpc.request.create.useMutation({
    onSuccess: (data) => {
      sessionStorage.removeItem(NEW_REQUEST_DRAFT_KEY);
      toast.success('Demande créée avec succès');
      setLocation(`/dashboard/requests/${data.id}?submitted=1&source=new-request`);
    },
    onError: (error) => {
      toast.error(
        getFriendlyActionError(
          error,
          "Impossible d'envoyer la demande pour le moment. Vérifiez les informations saisies puis réessayez.",
          {
            invalidInputMessage:
              "Impossible d'envoyer la demande : merci de compléter les informations obligatoires avant la validation.",
          }
        )
      );
    },
  });

  const handleTypeSelect = (type: RequestType) => {
    setSelectedType(type);
    setStep(2);
  };

  useEffect(() => {
    const savedDraft = sessionStorage.getItem(NEW_REQUEST_DRAFT_KEY);
    if (!savedDraft) return;

    try {
      const parsed = JSON.parse(savedDraft);
      if (parsed?.selectedType) {
        setSelectedType(parsed.selectedType);
      }
      if (parsed?.formData) {
        setFormData((prev) => ({ ...prev, ...parsed.formData }));
      }
      if (Array.isArray(parsed?.selectedDocuments)) {
        setSelectedDocuments(parsed.selectedDocuments);
      }
      if (typeof parsed?.step === "number" && parsed.step >= 1 && parsed.step <= 3) {
        setStep(parsed.step);
      }
    } catch {
      sessionStorage.removeItem(NEW_REQUEST_DRAFT_KEY);
    }
  }, []);

  const saveDraftAndOpenDocuments = () => {
    sessionStorage.setItem(
      NEW_REQUEST_DRAFT_KEY,
      JSON.stringify({
        step,
        selectedType,
        formData,
        selectedDocuments,
      })
    );
    setLocation("/dashboard/documents?returnTo=/dashboard/requests/new");
  };

  const handleSubmit = () => {
    if (!selectedType || !formData.titre) {
      toast.error('Veuillez remplir tous les champs obligatoires');
      return;
    }

    setPrivacyDialogOpen(true);
  };

  const submitRequestWithPrivacyConsent = () => {
    const formDataJson = JSON.stringify({
      ...formData,
      associationInfo: association ? {
        nom: association.nomAssociation,
        siret: association.siret,
        adresse: `${association.adresse}, ${association.codePostal} ${association.ville}`,
        representant: association.nomRepresentant,
      } : null,
    });

    createMutation.mutate({
      type: selectedType as any,
      titre: formData.titre,
      description: formData.description,
      formData: formDataJson,
      montantDemande: formData.montantDemande ? parseInt(formData.montantDemande) * 100 : undefined,
      documentsJoints: selectedDocuments.length > 0 ? selectedDocuments : undefined,
      privacyConsent: buildDataPrivacyConsent("create_request"),
    });
  };

  if (associationLoading || documentsLoading) {
    return (
      <div className="portal-immersive-page min-h-screen">
        <PortalDashboardHeader
          title="Nouvelle demande"
          description="Préparation de votre formulaire"
        />
        <main className="container py-6 sm:py-8">
          <div className="mx-auto max-w-5xl">
            <AuthenticatedPageSkeleton
              message="Chargement de vos informations et de vos documents disponibles..."
              cards={3}
              formRows={5}
            />
          </div>
        </main>
      </div>
    );
  }

  if (!association) {
    return (
      <div className="portal-immersive-page min-h-screen">
        <PortalDashboardHeader title="Nouvelle demande" />
        <main className="container py-6 sm:py-8">
          <ProfileRequiredState
            title="Votre fiche association débloque ce parcours"
            description="Avant de créer une nouvelle demande, le portail a besoin de votre identité associative, de vos coordonnées et du représentant légal à réutiliser dans le dossier."
            icon={FileText}
            highlights={[
              "Le formulaire reprendra automatiquement les informations de votre association pour aller plus vite.",
              "Une fiche complète évite les demandes incomplètes et améliore le suivi de votre dossier.",
              "Vos futures démarches administratives s’appuieront sur cette même base, sans ressaisie.",
              "Les services internes verront une fiche plus claire et plus fiable dès la réception de la demande.",
            ]}
          />
        </main>
      </div>
    );
  }

  return (
    <div className="portal-immersive-page min-h-screen">
      <PortalDashboardHeader
        title="Nouvelle demande"
        description={`Étape ${step} sur 3 · ${requestSteps[step - 1].title}`}
      />

      {/* Progress bar */}
      <div className="border-b bg-white">
        <div className="container py-3 sm:py-4">
          <div
            className={cn(
              "gap-3",
              isCompactViewport ? "-mx-4 flex snap-x snap-mandatory overflow-x-auto px-4 pb-1" : "grid md:grid-cols-3"
            )}
          >
            {requestSteps.map((item) => {
              const isDone = item.id < step;
              const isCurrent = item.id === step;

              return (
                <div
                  key={item.id}
                  className={`rounded-xl border px-4 py-3 transition-colors ${
                    isCurrent
                      ? "border-primary/30 bg-primary/5"
                      : isDone
                        ? "border-emerald-200 bg-emerald-50/70"
                        : "border-border/70 bg-muted/30"
                  } ${isCompactViewport ? "min-w-[248px] shrink-0 snap-start" : ""}`}
                >
                  <div className="mb-3 flex items-center gap-3">
                    <div
                      className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold ${
                        isCurrent
                          ? "bg-primary text-primary-foreground"
                          : isDone
                            ? "bg-emerald-600 text-white"
                            : "bg-muted text-muted-foreground"
                      }`}
                    >
                      {isDone ? <CheckCircle className="h-4 w-4" /> : item.id}
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-foreground">{item.title}</p>
                      <p className="text-xs text-muted-foreground">
                        {isDone ? "Étape complétée" : isCurrent ? "Étape en cours" : "À venir"}
                      </p>
                    </div>
                  </div>
                  <div className="h-1.5 rounded-full bg-white/70">
                    <div
                      className={`h-1.5 rounded-full transition-all duration-300 ${
                        isDone ? "w-full bg-emerald-500" : isCurrent ? "w-2/3 bg-primary" : "w-0 bg-muted"
                      }`}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <main className={cn("container py-5 sm:py-8", isMobile && "pb-28")}>
        {/* Step 1: Select type */}
        {step === 1 && (
          <div className="mx-auto max-w-5xl space-y-8">
            <PortalSurface
              className="border-primary/10 bg-gradient-to-r from-primary/10 via-white to-primary/5"
              bodyClassName="space-y-5"
            >
              <div className="grid gap-4 md:grid-cols-3">
                <PortalMetricTile label="Parcours" value={completionScore} detail={completionLabel} tone="success" />
                <PortalMetricTile label="Étape active" value={step} detail={requestSteps[step - 1].title} tone="info" />
                <PortalMetricTile label="Documents joints" value={selectedDocuments.length} detail="Disponibles à l’étape finale" tone="default" />
              </div>
              <section className="rounded-2xl border border-primary/15 bg-[linear-gradient(135deg,rgba(245,251,247,0.96),rgba(255,255,255,0.98))] px-5 py-5 shadow-[0_24px_56px_-42px_rgba(22,101,52,0.32)] sm:px-6 sm:py-6 md:px-7">
                <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
                  <div className="max-w-2xl space-y-3">
                    <span className="inline-flex w-fit items-center rounded-full border border-primary/15 bg-white/85 px-3 py-1 text-xs font-semibold uppercase tracking-[0.08em] text-primary">
                      Parcours guidé
                    </span>
                    <div>
                      <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-[1.9rem]">
                        Une demande plus claire, étape par étape
                      </h2>
                      <p className="mt-2 text-sm leading-6 text-muted-foreground md:text-base">
                        Choisissez d&apos;abord le bon parcours. Le portail adapte ensuite le formulaire,
                        pré-remplit les informations déjà connues et vous indique la prochaine action utile.
                      </p>
                    </div>
                  </div>
                  <div className="grid gap-2.5 rounded-2xl border border-primary/10 bg-white/88 p-4 text-sm text-muted-foreground shadow-sm md:min-w-[250px]">
                    <div className="flex items-center justify-between">
                      <span>Progression</span>
                      <span className="font-semibold text-foreground">{completionLabel}</span>
                    </div>
                    <div className="h-2 rounded-full bg-primary/10">
                      <div
                        className="h-2 rounded-full bg-primary transition-all duration-300"
                        style={{ width: `${(completionScore / 3) * 100}%` }}
                      />
                    </div>
                    <p className="text-xs leading-5">
                      La sélection du bon type de demande permet d&apos;afficher un parcours plus court et plus précis.
                    </p>
                  </div>
                </div>
              </section>
            </PortalSurface>

            <PortalSectionIntro
              eyebrow="Choix du parcours"
              title="Quel type de demande souhaitez-vous faire ?"
              description="Sélectionnez le type de demande qui correspond à votre besoin."
            />

            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
              {requestTypes.map((type) => (
                <Card 
                  key={type.value}
                  className={`group cursor-pointer overflow-hidden border-border/70 bg-white/95 transition-all duration-200 hover:-translate-y-1 hover:border-primary/35 hover:shadow-[0_24px_45px_-30px_rgba(22,101,52,0.34)] ${
                    selectedType === type.value ? 'border-primary ring-2 ring-primary/20' : ''
                  }`}
                  onClick={() => handleTypeSelect(type.value as RequestType)}
                >
                  <CardContent className="p-4">
                    <div className="flex h-full flex-col gap-4">
                      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                        <div className="flex items-start gap-4">
                          <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/8 text-2xl shadow-inner">
                            {type.icon}
                          </span>
                          <div className="min-w-0 space-y-1">
                            <h3 className="font-semibold">{type.label}</h3>
                            <p className="line-clamp-2 text-sm leading-6 text-muted-foreground">{type.description}</p>
                          </div>
                        </div>
                        <span className="w-fit rounded-full border border-primary/10 bg-primary/5 px-2.5 py-1 text-[11px] font-medium text-primary opacity-80 transition-opacity group-hover:opacity-100">
                          Ouvrir
                        </span>
                      </div>
                      <div className="mt-auto flex items-center justify-between text-xs text-muted-foreground">
                        <span>Formulaire adapté</span>
                        <span className="font-medium text-foreground/80">Étape suivante</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

        {/* Step 2: Fill form */}
        {step === 2 && selectedType && (
          <div className="mx-auto max-w-2xl space-y-6">
            <Card className="border-primary/15 bg-[linear-gradient(135deg,rgba(245,251,247,0.98),rgba(255,255,255,0.98))]">
              <CardContent className="flex flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between">
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm font-medium text-primary">
                    <CheckCircle className="h-4 w-4" />
                    Parcours en cours de préparation
                  </div>
                  <div>
                    <h2 className="text-xl font-semibold text-foreground">{selectedRequestType?.label}</h2>
                    <p className="mt-1 text-sm leading-6 text-muted-foreground">
                      Complétez les champs principaux. Vous pourrez ensuite joindre vos documents et relire le récapitulatif avant l&apos;envoi.
                    </p>
                  </div>
                </div>
                <div className="rounded-2xl border border-primary/10 bg-white/88 px-4 py-2.5 text-sm shadow-sm">
                  <p className="font-semibold text-foreground">{titleIsValid ? "Prêt à continuer" : "Information attendue"}</p>
                  <p className="mt-1 text-muted-foreground">
                    {titleIsValid ? "Le titre de la demande est bien renseigné." : "Le titre de la demande reste obligatoire pour poursuivre sereinement."}
                  </p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FileText className="h-5 w-5 text-primary" />
                  Informations de la demande
                </CardTitle>
                <CardDescription>
                  {selectedRequestType?.label}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                    <Label htmlFor="titre">Titre de la demande *</Label>
                    {titleIsValid ? (
                      <span className="text-xs font-medium text-emerald-700">Champ complété</span>
                    ) : (
                      <span className="text-xs font-medium text-amber-700">Obligatoire</span>
                    )}
                  </div>
                  <Input
                    id="titre"
                    value={formData.titre}
                    onChange={(e) => setFormData(prev => ({ ...prev, titre: e.target.value }))}
                    placeholder="Ex: Subvention pour le projet culturel 2025"
                    aria-invalid={!titleIsValid}
                  />
                  <p className={`text-xs ${titleIsValid ? "text-emerald-700" : "text-muted-foreground"}`}>
                    {titleIsValid
                      ? "Le titre permettra d'identifier rapidement votre dossier lors du traitement."
                      : "Choisissez un intitulé précis et facilement reconnaissable par votre association."}
                  </p>
                </div>

                <div className="space-y-2">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                    <Label htmlFor="description">Description</Label>
                    <span className="text-xs text-muted-foreground">
                      {descriptionIsStarted ? "En cours de rédaction" : "Conseillé"}
                    </span>
                  </div>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                    placeholder="Décrivez votre demande en détail..."
                    rows={4}
                  />
                  <p className="text-xs text-muted-foreground">
                    Quelques lignes suffisent pour expliquer l&apos;objectif, le contexte et l&apos;attente principale.
                  </p>
                </div>

                {/* Subvention specific fields */}
                {(selectedType === 'subvention_fonctionnement' || selectedType === 'subvention_projet') && (
                  <>
                    <div className="space-y-2">
                      <Label htmlFor="montantDemande">Montant demandé (€)</Label>
                      <Input
                        id="montantDemande"
                        type="number"
                        value={formData.montantDemande}
                        onChange={(e) => setFormData(prev => ({ ...prev, montantDemande: e.target.value }))}
                        placeholder="5000"
                      />
                    </div>

                    {selectedType === 'subvention_projet' && (
                      <>
                        <div className="space-y-2">
                          <Label htmlFor="objetProjet">Objet du projet</Label>
                          <Textarea
                            id="objetProjet"
                            value={formData.objetProjet}
                            onChange={(e) => setFormData(prev => ({ ...prev, objetProjet: e.target.value }))}
                            placeholder="Décrivez l'objet et les objectifs du projet..."
                            rows={3}
                          />
                        </div>
                        <div className="grid gap-4 md:grid-cols-2">
                          <div className="space-y-2">
                            <Label htmlFor="dateDebut">Date de début</Label>
                            <Input
                              id="dateDebut"
                              type="date"
                              value={formData.dateDebut}
                              onChange={(e) => setFormData(prev => ({ ...prev, dateDebut: e.target.value }))}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="dateFin">Date de fin</Label>
                            <Input
                              id="dateFin"
                              type="date"
                              value={formData.dateFin}
                              onChange={(e) => setFormData(prev => ({ ...prev, dateFin: e.target.value }))}
                            />
                          </div>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="publicVise">Public visé</Label>
                          <Input
                            id="publicVise"
                            value={formData.publicVise}
                            onChange={(e) => setFormData(prev => ({ ...prev, publicVise: e.target.value }))}
                            placeholder="Ex: Jeunes de 12 à 25 ans"
                          />
                        </div>
                      </>
                    )}
                  </>
                )}

              </CardContent>
            </Card>

            {/* Pre-filled association info */}
            <Card className="bg-muted/40">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <Building2 className="h-5 w-5 text-primary" />
                  Informations de l'association (pré-remplies)
                </CardTitle>
                <CardDescription>
                  Ces éléments seront repris dans la demande. Mettez votre fiche à jour si une information doit être corrigée.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid gap-3 text-sm">
                  <div className="flex flex-col gap-1 rounded-xl border border-border/70 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                    <span className="text-muted-foreground">Nom</span>
                    <span className="font-medium">{association.nomAssociation}</span>
                  </div>
                  {association.siret && (
                    <div className="flex flex-col gap-1 rounded-xl border border-border/70 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                      <span className="text-muted-foreground">SIRET</span>
                      <span className="font-medium">{association.siret}</span>
                    </div>
                  )}
                  {association.adresse && (
                    <div className="flex flex-col gap-1 rounded-xl border border-border/70 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                      <span className="text-muted-foreground">Adresse</span>
                      <span className="font-medium">
                        {association.adresse}, {association.codePostal} {association.ville}
                      </span>
                    </div>
                  )}
                  {association.nomRepresentant && (
                    <div className="flex flex-col gap-1 rounded-xl border border-border/70 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                      <span className="text-muted-foreground">Représentant</span>
                      <span className="font-medium">{association.nomRepresentant}</span>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            <div
              className={cn(
                "flex flex-col-reverse gap-3 sm:flex-row sm:justify-between",
                isMobile &&
                  "fixed inset-x-0 bottom-0 z-30 border-t bg-background/96 px-4 py-3 shadow-[0_-18px_40px_-28px_rgba(15,23,42,0.4)] backdrop-blur supports-[backdrop-filter]:backdrop-blur"
              )}
            >
              <Button variant="outline" onClick={() => setStep(1)} className={cn("w-full sm:w-auto", isMobile && "min-h-11")}>
                <ArrowLeft className="mr-2 h-4 w-4" />
                Retour
              </Button>
              <Button onClick={() => setStep(3)} disabled={!titleIsValid} className={cn("w-full sm:w-auto", isMobile && "min-h-11")}>
                Continuer
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </div>
        )}

        {/* Step 3: Attach documents and submit */}
        {step === 3 && (
          <div className="mx-auto max-w-2xl space-y-6">
            <Card className="border-primary/15 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(241,248,245,0.98))]">
              <CardContent className="grid gap-4 p-5 md:grid-cols-[1fr_auto] md:items-center">
                <div className="space-y-2">
                  <p className="text-sm font-medium text-primary">Dernière vérification avant envoi</p>
                  <h2 className="text-xl font-semibold text-foreground">Votre dossier est presque prêt</h2>
                  <p className="text-sm leading-6 text-muted-foreground">
                    Ajoutez les pièces disponibles, relisez les informations principales puis transmettez la demande. Un accusé clair vous confirmera l&apos;enregistrement.
                  </p>
                </div>
                <div className="rounded-2xl border border-primary/10 bg-white/90 px-4 py-3 text-sm shadow-sm">
                  <p className="font-semibold text-foreground">{selectedDocuments.length} document{selectedDocuments.length > 1 ? "s" : ""} sélectionné{selectedDocuments.length > 1 ? "s" : ""}</p>
                  <p className="mt-1 text-muted-foreground">Les pièces jointes restent facultatives sauf demande contraire du service instructeur.</p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Documents à joindre</CardTitle>
                <CardDescription>
                  Sélectionnez les documents à joindre à votre demande
                </CardDescription>
              </CardHeader>
              <CardContent>
                {documents && documents.length > 0 ? (
                  <div className="space-y-3">
                    {documents.map((doc) => (
                      <div key={doc.id} className="flex items-start gap-3 rounded-xl border border-border/70 bg-white/90 p-4 transition-colors hover:border-primary/25 hover:bg-primary/5">
                        <Checkbox
                          id={`doc-${doc.id}`}
                          checked={selectedDocuments.includes(doc.id)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setSelectedDocuments(prev => [...prev, doc.id]);
                            } else {
                              setSelectedDocuments(prev => prev.filter(id => id !== doc.id));
                            }
                          }}
                        />
                        <Label htmlFor={`doc-${doc.id}`} className="min-w-0 flex-1 cursor-pointer">
                          <div className="font-medium">{doc.nom}</div>
                          <div className="text-sm text-muted-foreground">{doc.type}</div>
                        </Label>
                        {selectedDocuments.includes(doc.id) && (
                          <span className="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
                            Ajouté
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="rounded-2xl border border-dashed border-primary/20 bg-primary/5 px-6 py-8 text-center text-muted-foreground">
                    <p className="font-medium text-foreground">Aucun document disponible pour le moment.</p>
                    <p className="mt-2 text-sm">
                      Vous pouvez poursuivre sans pièce jointe ou ouvrir votre espace documentaire pour déposer les éléments utiles.
                    </p>
                    <button
                      type="button"
                      onClick={saveDraftAndOpenDocuments}
                      className="mt-3 text-sm font-medium text-primary hover:underline"
                    >
                      Téléverser des documents
                    </button>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Summary */}
            <Card className="bg-primary/5 border-primary/20">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="h-5 w-5 text-primary" />
                  Récapitulatif
                </CardTitle>
                <CardDescription>
                  Vérifiez les éléments principaux avant la transmission à l&apos;administration.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3 text-sm">
                  <div className="flex flex-col gap-1 rounded-xl border border-primary/10 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                    <span className="text-muted-foreground">Type</span>
                    <span className="font-medium">
                      {selectedRequestType?.label}
                    </span>
                  </div>
                  <div className="flex flex-col gap-1 rounded-xl border border-primary/10 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                    <span className="text-muted-foreground">Titre</span>
                    <span className="font-medium">{formData.titre || '-'}</span>
                  </div>
                  {formData.montantDemande && (
                    <div className="flex flex-col gap-1 rounded-xl border border-primary/10 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                      <span className="text-muted-foreground">Montant</span>
                      <span className="font-medium">{formData.montantDemande} €</span>
                    </div>
                  )}
                  <div className="flex flex-col gap-1 rounded-xl border border-primary/10 bg-white/85 px-4 py-3 md:flex-row md:items-center md:justify-between">
                    <span className="text-muted-foreground">Documents joints</span>
                    <span className="font-medium">{selectedDocuments.length}</span>
                  </div>
                </div>
                <div className="mt-4 rounded-2xl border border-primary/10 bg-white/75 px-4 py-3 text-sm text-muted-foreground">
                  Après validation, votre demande sera enregistrée puis transmise pour instruction. Vous pourrez suivre son évolution depuis <span className="font-medium text-foreground">Mes demandes</span>.
                </div>
              </CardContent>
            </Card>

            <div
              className={cn(
                "flex flex-col-reverse gap-3 sm:flex-row sm:justify-between",
                isMobile &&
                  "fixed inset-x-0 bottom-0 z-30 border-t bg-background/96 px-4 py-3 shadow-[0_-18px_40px_-28px_rgba(15,23,42,0.4)] backdrop-blur supports-[backdrop-filter]:backdrop-blur"
              )}
            >
              <Button variant="outline" onClick={() => setStep(2)} className={cn("w-full sm:w-auto", isMobile && "min-h-11")}>
                <ArrowLeft className="mr-2 h-4 w-4" />
                Retour
              </Button>
              <Button onClick={handleSubmit} disabled={createMutation.isPending} className={cn("w-full sm:w-auto", isMobile && "min-h-11")}>
                {createMutation.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Send className="mr-2 h-4 w-4" />
                )}
                {createMutation.isPending ? "Transmission en cours" : "Transmettre la demande"}
              </Button>
            </div>
          </div>
        )}
      </main>

      <DataPrivacyValidationDialog
        open={privacyDialogOpen}
        onOpenChange={setPrivacyDialogOpen}
        context="create_request"
        confirmLabel="Valider et enregistrer la demande"
        onConfirm={submitRequestWithPrivacyConsent}
      />
    </div>
  );
}
