import { useEffect, useMemo, useState } from "react";
import { Link, useLocation } from "wouter";
import { AlertTriangle, ArrowLeft, CalendarDays, ClipboardCheck, Loader2, Package2, Send, ShieldCheck } from "lucide-react";
import { toast } from "sonner";

import { useAuth } from "@/_core/hooks/useAuth";
import { AuthenticatedPageSkeleton } from "@/components/AuthenticatedPageSkeleton";
import DataPrivacyValidationDialog from "@/components/DataPrivacyValidationDialog";
import { PortalDashboardHeader, PortalMetricTile, PortalSectionIntro, PortalSurface } from "@/components/portal/PortalSurface";
import { ProfileRequiredState } from "@/components/ProfileRequiredState";
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 { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { useViewportFlags } from "@/hooks/useMobile";
import { cn } from "@/lib/utils";
import { trpc } from "@/lib/trpc";
import ccdsLogo from "@/assets/ccds.png";
import { buildDataPrivacyConsent } from "@shared/privacyCompliance";
import { getFriendlyActionError } from "@/lib/userFeedback";
import {
  emptyMaterialEventQuantities,
  emptyMaterialEventSelection,
  materialEventItems,
  type MaterialEventItemKey,
} from "@/lib/materialEvent";

function addDays(dateStr: string, days: number) {
  const date = new Date(dateStr);
  if (Number.isNaN(date.getTime())) return "";
  date.setDate(date.getDate() + days);
  return date.toISOString().split("T")[0];
}

function maxDate(dateA: string, dateB: string) {
  if (!dateA) return dateB;
  if (!dateB) return dateA;
  return dateA > dateB ? dateA : dateB;
}

function getTodayDateString() {
  return new Date().toISOString().split("T")[0];
}

export default function DemandeMaterielEvenementiel() {
  const [, setLocation] = useLocation();
  const { user } = useAuth();
  const { isMobile, isTablet } = useViewportFlags();
  const { data: association, isLoading: loadingAssociation } = trpc.association.getMyProfile.useQuery();
  const { data: logisticsPolicy } = trpc.request.getLogisticsPolicy.useQuery();
  const restitutionGraceDays = logisticsPolicy?.materialReturnGraceDays ?? 3;

  const [materielsDemandes, setMaterielsDemandes] = useState(emptyMaterialEventSelection);
  const [quantitesDemandees, setQuantitesDemandees] = useState(emptyMaterialEventQuantities);
  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(false);
  const [formData, setFormData] = useState({
    commune: "",
    direction: "",
    service: "",
    demandeurNomPrenom: "",
    dateDemande: getTodayDateString(),
    dateDebutManifestation: "",
    dateFinManifestation: "",
    motifDemande: "",
    datePriseEnCharge: "",
    dateRestitution: "",
    autreMaterielPrecisions: "",
    dgsSignataire: "",
  });

  useEffect(() => {
    if (!association) return;
    setFormData(prev => ({
      ...prev,
      commune: prev.commune || association.ville || "",
      demandeurNomPrenom: prev.demandeurNomPrenom || user?.name || association.nomRepresentant || "",
      dgsSignataire: prev.dgsSignataire || association.nomRepresentant || "",
    }));
  }, [association, user?.name]);

  useEffect(() => {
    if (!formData.dateDebutManifestation) return;
    setFormData(prev => ({
      ...prev,
      dateFinManifestation: prev.dateFinManifestation || formData.dateDebutManifestation,
      dateRestitution: prev.dateRestitution || addDays(prev.dateFinManifestation || formData.dateDebutManifestation, restitutionGraceDays),
    }));
  }, [formData.dateDebutManifestation, restitutionGraceDays]);

  useEffect(() => {
    if (!formData.dateFinManifestation) return;
    setFormData(prev => ({
      ...prev,
      dateRestitution: addDays(formData.dateFinManifestation, restitutionGraceDays),
    }));
  }, [formData.dateFinManifestation, restitutionGraceDays]);

  const createMutation = trpc.request.create.useMutation({
    onSuccess: data => {
      toast.success("Demande envoyée avec succès");
      setLocation(`/dashboard/requests/${data.id}?submitted=1&source=materiel-evenementiel`);
    },
    onError: error => {
      toast.error(
        getFriendlyActionError(
          error,
          "Impossible d'envoyer la demande de matériel pour le moment. Vérifiez les dates, les quantités et le motif puis réessayez.",
          {
            invalidInputMessage:
              "Impossible d'envoyer la demande : merci de compléter les champs obligatoires et les quantités demandées.",
          }
        )
      );
    },
  });

  const selectedMaterialCount = useMemo(
    () => Object.values(materielsDemandes).filter(Boolean).length,
    [materielsDemandes]
  );

  const materialAvailabilityQuery = trpc.request.getMaterialAvailability.useQuery(
    {
      dateDebut: formData.dateDebutManifestation || undefined,
      dateFin: formData.dateRestitution || formData.dateFinManifestation || undefined,
    },
    {
      enabled: Boolean(formData.dateDebutManifestation && (formData.dateRestitution || formData.dateFinManifestation)),
      refetchInterval: 10000,
      refetchOnWindowFocus: true,
    }
  );

  const availabilityByKey = useMemo(() => {
    const map = new Map<string, { capacity: number | null; reserved: number; available: number | null; blocked: boolean }>();
    (materialAvailabilityQuery.data?.items || []).forEach((item) => {
      map.set(item.key, {
        capacity: item.capacity,
        reserved: item.reserved,
        available: item.available,
        blocked: item.blocked,
      });
    });
    return map;
  }, [materialAvailabilityQuery.data]);

  const handleToggleMaterial = (key: MaterialEventItemKey, checked: boolean) => {
    setMaterielsDemandes(prev => ({ ...prev, [key]: checked }));
    if (!checked) {
      setQuantitesDemandees(prev => ({ ...prev, [key]: "" }));
      if (key === "autres") {
        setFormData(prev => ({ ...prev, autreMaterielPrecisions: "" }));
      }
    }
  };

  const handleSubmit = () => {
    if (!association) {
      toast.error("Veuillez d'abord compléter votre profil association");
      return;
    }

    if (!formData.direction || !formData.service || !formData.dateDebutManifestation || !formData.dateFinManifestation || !formData.motifDemande) {
      toast.error("Veuillez remplir les champs obligatoires");
      return;
    }

    if (formData.dateFinManifestation < formData.dateDebutManifestation) {
      toast.error("La date de fin de manifestation doit être postérieure ou égale à la date de début");
      return;
    }

    if (selectedMaterialCount === 0) {
      toast.error("Veuillez sélectionner au moins un matériel");
      return;
    }

    const invalidQuantity = materialEventItems.some(item => materielsDemandes[item.key] && !quantitesDemandees[item.key]);
    if (invalidQuantity) {
      toast.error("Veuillez renseigner la quantité pour chaque matériel sélectionné");
      return;
    }

    const stockConflict = materialEventItems.find((item) => {
      if (!materielsDemandes[item.key]) return false;
      const requested = Number.parseInt(quantitesDemandees[item.key] || "0", 10);
      const availability = availabilityByKey.get(item.key);
      return Boolean(availability && availability.available !== null && requested > (availability.available || 0));
    });
    if (stockConflict) {
      const availability = availabilityByKey.get(stockConflict.key);
      toast.error(
        `Stock insuffisant pour ${stockConflict.label}. Disponible sur cette période : ${availability?.available ?? 0}.`
      );
      return;
    }

    if (materielsDemandes.autres && !formData.autreMaterielPrecisions.trim()) {
      toast.error("Veuillez préciser le matériel demandé dans le champ \"Autres\"");
      return;
    }

    if (formData.dateRestitution) {
      const maxReturnDate = addDays(formData.dateFinManifestation, restitutionGraceDays);
      if (formData.dateRestitution > maxReturnDate) {
        toast.error(`La date de restitution ne peut pas dépasser ${restitutionGraceDays} jour(s) après la fin de la manifestation`);
        return;
      }
    }

    setPrivacyDialogOpen(true);
  };

  const submitMaterialRequestWithPrivacyConsent = () => {
    if (!association) return;

    const payload = {
      formulaireType: "demande_materiel_evenementiel",
      commune: formData.commune,
      direction: formData.direction,
      service: formData.service,
      demandeurNomPrenom: formData.demandeurNomPrenom,
      dateDemande: getTodayDateString(),
      dateManifestation: formData.dateDebutManifestation,
      dateDebutManifestation: formData.dateDebutManifestation,
      dateFinManifestation: formData.dateFinManifestation,
      motifDemande: formData.motifDemande,
      datePriseEnCharge: formData.datePriseEnCharge,
      dateRestitution: formData.dateRestitution,
      dgsSignataire: formData.dgsSignataire,
      autreMaterielPrecisions: formData.autreMaterielPrecisions,
      materielsDemandes,
      quantitesDemandees,
      nomAssociation: association.nomAssociation || "",
      adresseAssociation: association.adresse ? `${association.adresse}, ${association.codePostal || ""} ${association.ville || ""}`.trim() : "",
      communeSiege: association.ville || "",
      representantLegal: association.nomRepresentant || "",
      telephoneAssociation: association.telephone || "",
      emailAssociation: association.emailContact || "",
      emailDestinataire: "sport-culture@ccds-guyane.fr",
      destinataire: "Direction des Services aux Usagers (DSU)",
    };

    createMutation.mutate({
      type: "demande_materiel_evenementiel",
      titre: `Demande du matériel événementiel - ${formData.commune || association.nomAssociation}`,
      description: formData.motifDemande,
      formData: JSON.stringify(payload),
      submitImmediately: true,
      privacyConsent: buildDataPrivacyConsent("create_request"),
    });
  };

  if (loadingAssociation) {
    return (
      <div className="portal-immersive-page min-h-screen">
        <PortalDashboardHeader
          title="Demande du matériel événementiel"
          description="Chargement du formulaire et des stocks"
        />
        <main className="container py-8">
          <div className="mx-auto max-w-5xl">
            <AuthenticatedPageSkeleton
              message="Chargement de votre profil association et des disponibilités matérielles..."
              cards={2}
              formRows={6}
            />
          </div>
        </main>
      </div>
    );
  }

  if (!association) {
    return (
      <div className="portal-immersive-page min-h-screen">
        <PortalDashboardHeader title="Demande du matériel événementiel" />
        <main className="container py-8">
          <ProfileRequiredState
            title="Préparez votre fiche avant la demande de matériel"
            description="Le formulaire matériel reprend votre association, votre référent et vos coordonnées pour constituer une demande plus fiable côté logistique et côté instruction."
            icon={Package2}
            highlights={[
              "Le nom de l'association, la commune et le contact principal sont repris dès l'ouverture du formulaire.",
              "Le service logistique gagne du temps si les responsables et les coordonnées sont déjà à jour.",
              "Une fiche propre limite les demandes de précision avant la validation du matériel accordé.",
              "Votre prochaine demande matériel repartira sur cette base sans nouvelle ressaisie.",
            ]}
          />
        </main>
      </div>
    );
  }

  return (
    <div className="portal-immersive-page min-h-screen">
      <PortalDashboardHeader
        title="Demande du matériel événementiel"
        description="Formulaire auto-rempli à destination de la DSU"
        actions={
          <div className="flex items-start gap-2 rounded-xl border border-primary/15 bg-primary/5 px-3 py-2 text-xs text-primary sm:items-center">
            <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 sm:mt-0" />
            <span>Le cadre DSU reste réservé à l’administration. Vous vous concentrez sur la période, le besoin et le stock demandé.</span>
          </div>
        }
      />

      <main className={cn("container py-6 sm:py-8", (isMobile || isTablet) && "pb-28")}>
        <div className="max-w-5xl mx-auto space-y-6">
          <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="Matériels cochés" value={selectedMaterialCount} detail="Sélection actuelle" tone="success" />
              <PortalMetricTile label="Début" value={formData.dateDebutManifestation || "—"} detail="Période de manifestation" tone="info" />
              <PortalMetricTile label="Restitution" value={formData.dateRestitution || "Auto"} detail={`Délai max ${restitutionGraceDays} jour(s)`} tone="warning" />
            </div>

            <PortalSectionIntro
              eyebrow="Demande guidée"
              title="Préparez une demande lisible pour la logistique"
              description="Le portail reprend votre association, vérifie le stock sur la période et garde séparé le cadre réservé à la DSU."
              aside="Renseignez d’abord la période et les quantités réellement nécessaires."
            />

            <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
              <div className="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                <div className="flex items-center gap-2 text-base font-semibold text-primary">
                  <ClipboardCheck className="h-5 w-5" />
                  <span>Repères de la demande</span>
                </div>
                <div className="mt-4 grid gap-3 sm:grid-cols-2">
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Association</span>
                    <p className="mt-1 font-medium text-slate-900">{association.nomAssociation || "Association non renseignée"}</p>
                  </div>
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Commune</span>
                    <p className="mt-1 font-medium text-slate-900">{formData.commune || association.ville || "À renseigner"}</p>
                  </div>
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Demandeur</span>
                    <p className="mt-1 font-medium text-slate-900">{formData.demandeurNomPrenom || user?.name || "À renseigner"}</p>
                  </div>
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Contact</span>
                    <p className="mt-1 font-medium text-slate-900">{association.emailContact || user?.email || "À renseigner"}</p>
                  </div>
                </div>
              </div>

              <div className="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                <div className="flex items-center gap-2 text-base font-semibold text-primary">
                  <CalendarDays className="h-5 w-5" />
                  <span>Période à préparer</span>
                </div>
                <div className="mt-4 space-y-3">
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Manifestation</span>
                    <p className="mt-1 font-medium text-slate-900">
                      {formData.dateDebutManifestation || "À renseigner"} {formData.dateFinManifestation ? `au ${formData.dateFinManifestation}` : ""}
                    </p>
                  </div>
                  <div className="rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5">
                    <span className="text-[11px] uppercase tracking-wide text-muted-foreground">Restitution</span>
                    <p className="mt-1 font-medium text-slate-900">{formData.dateRestitution || "Calculée automatiquement"}</p>
                  </div>
                  <div className="rounded-xl border border-dashed border-primary/20 bg-primary/5 px-3 py-3 text-sm text-primary">
                    Le stock se recalcule selon la période choisie. Vous pouvez ensuite ajuster les quantités au plus juste.
                  </div>
                </div>
              </div>
            </div>
          </PortalSurface>

          <Card className="overflow-hidden rounded-2xl border-[#f0c94b]/70 bg-white/96">
            <div className="border-t-4 border-[#f0c94b]" />
            <CardContent className="p-0">
              <div className="bg-white px-4 pb-3 pt-5 sm:px-6 sm:pt-6">
                <div className="space-y-3 text-center">
                  <div className="flex justify-center">
                    <img src={ccdsLogo} alt="Logo CCDS" className="h-16 w-auto object-contain sm:h-24" />
                  </div>
                  <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                    Communauté de Communes Des Savanes
                  </p>
                    <div className="inline-flex items-center gap-3 rounded-xl border border-[#f0c94b] bg-sky-100 px-4 py-2.5 sm:px-5">
                    <Package2 className="h-6 w-6 text-primary" />
                      <h2 className="text-sm font-bold uppercase tracking-wide text-[oklch(0.25_0.05_265)] sm:text-lg">
                      Fiche de demande de mise à disposition du matériel événementiel
                    </h2>
                  </div>
                  <p className="text-sm text-red-700 font-medium">
                    Fiche à remplir obligatoirement (1 mois avant la manifestation) et à retourner à l'adresse suivante :
                  </p>
                  <p className="text-sm font-semibold text-primary">sport-culture@ccds-guyane.fr</p>
                </div>
              </div>

              <div className="space-y-5 px-4 pb-5 sm:px-6">
                <div className="space-y-4 rounded-2xl border border-[#e6b48c] bg-white p-4 sm:p-5">
                  <div className="grid gap-3 sm:grid-cols-3">
                    <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
                      <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Matériels cochés</p>
                      <p className="mt-1 text-2xl font-semibold text-slate-900">{selectedMaterialCount}</p>
                    </div>
                    <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
                      <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Début</p>
                      <p className="mt-1 text-sm font-semibold text-slate-900">{formData.dateDebutManifestation || "À renseigner"}</p>
                    </div>
                    <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
                      <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Restitution</p>
                      <p className="mt-1 text-sm font-semibold text-slate-900">{formData.dateRestitution || "Calculée automatiquement"}</p>
                    </div>
                  </div>

                  <div className="grid gap-4 md:grid-cols-2">
                    <Field label="Commune">
                      <Input value={formData.commune} onChange={e => setFormData(prev => ({ ...prev, commune: e.target.value }))} />
                    </Field>
                    <Field label="Direction *">
                      <Input value={formData.direction} onChange={e => setFormData(prev => ({ ...prev, direction: e.target.value }))} />
                    </Field>
                    <Field label="Service *">
                      <Input value={formData.service} onChange={e => setFormData(prev => ({ ...prev, service: e.target.value }))} />
                    </Field>
                    <Field label="Nom et prénom du demandeur">
                      <Input value={formData.demandeurNomPrenom} onChange={e => setFormData(prev => ({ ...prev, demandeurNomPrenom: e.target.value }))} />
                    </Field>
                  </div>

                  <Separator />

                  <div className="space-y-4">
                    <div className="flex items-center gap-2 text-base font-semibold">
                      <ClipboardCheck className="h-5 w-5 text-primary" />
                      Matériel demandé
                    </div>
                    {materialAvailabilityQuery.data?.items?.length ? (
                      <div className="rounded-lg border bg-muted/20 p-4 space-y-3">
                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                          <div>
                            <p className="text-sm font-medium">Disponibilité estimée sur la période</p>
                            <p className="text-xs text-muted-foreground">
                              Du {formData.dateDebutManifestation || "-"} au {formData.dateRestitution || formData.dateFinManifestation || "-"}
                            </p>
                          </div>
                          {materialAvailabilityQuery.isFetching ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                        </div>
                        <div className="grid gap-3 md:grid-cols-2">
                          {materialAvailabilityQuery.data.items.map((item) => (
                            <div key={item.key} className={`rounded-xl border px-3 py-3 ${item.blocked ? 'border-red-200 bg-red-50' : 'bg-white'}`}>
                              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                <span className="font-medium">{item.label}</span>
                                {item.blocked ? (
                                  <span className="inline-flex items-center gap-1 text-xs font-medium text-red-700">
                                    <AlertTriangle className="h-3.5 w-3.5" />
                                    Stock atteint
                                  </span>
                                ) : null}
                              </div>
                              <p className="mt-2 text-xs text-muted-foreground">
                                {item.capacity === null
                                  ? "Matériel libre, quantité non stockée dans le portail"
                                  : `${item.available} disponible(s) / ${item.capacity} au total, ${item.reserved} déjà demandé(s) ou validé(s)`}
                              </p>
                            </div>
                          ))}
                        </div>
                      </div>
                    ) : null}
                    <div className="grid gap-4 md:grid-cols-2">
                      {materialEventItems.map(item => (
                        <div key={item.key} className="space-y-3 rounded-2xl border border-slate-200 bg-white/95 p-3.5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md">
                          <div className="flex items-center gap-3">
                            <Checkbox
                              checked={materielsDemandes[item.key]}
                              onCheckedChange={checked => handleToggleMaterial(item.key, Boolean(checked))}
                            />
                            <span className="font-medium">{item.label}</span>
                          </div>
                          <Field label="Quantité demandée">
                            <Input
                              value={quantitesDemandees[item.key]}
                              onChange={e => setQuantitesDemandees(prev => ({ ...prev, [item.key]: e.target.value }))}
                              disabled={!materielsDemandes[item.key]}
                              inputMode="numeric"
                              placeholder="..."
                            />
                          </Field>
                          {availabilityByKey.get(item.key)?.available !== null && materielsDemandes[item.key] ? (
                            <p className={`text-xs ${Number.parseInt(quantitesDemandees[item.key] || "0", 10) > (availabilityByKey.get(item.key)?.available || 0) ? 'text-red-700' : 'text-muted-foreground'}`}>
                              Disponible sur la période : {availabilityByKey.get(item.key)?.available ?? 0}
                            </p>
                          ) : null}
                          {item.key === "autres" && materielsDemandes.autres && (
                            <Field label="Précisions sur le matériel">
                              <Textarea
                                value={formData.autreMaterielPrecisions}
                                onChange={e => setFormData(prev => ({ ...prev, autreMaterielPrecisions: e.target.value }))}
                                rows={3}
                              />
                            </Field>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="grid gap-4 md:grid-cols-2">
                    <Field label="Date de la demande">
                      <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
                        Enregistrée automatiquement le jour de l'envoi.
                      </div>
                    </Field>
                    <Field label="Début de la manifestation *">
                      <Input
                        type="date"
                        value={formData.dateDebutManifestation}
                        onChange={e => {
                          const nextStart = e.target.value;
                          setFormData(prev => {
                            const currentEnd = prev.dateFinManifestation || nextStart;
                            const nextEnd = currentEnd && currentEnd < nextStart ? nextStart : currentEnd;
                            const baseManifestationDate = maxDate(nextStart, nextEnd);
                            return {
                              ...prev,
                              dateDebutManifestation: nextStart,
                              dateFinManifestation: nextEnd,
                              dateRestitution: prev.dateRestitution || addDays(baseManifestationDate, restitutionGraceDays),
                            };
                          });
                        }}
                      />
                    </Field>
                    <Field label="Fin de la manifestation *">
                      <Input
                        type="date"
                        value={formData.dateFinManifestation}
                        min={formData.dateDebutManifestation || undefined}
                        onChange={e => {
                          const nextEnd = e.target.value;
                          setFormData(prev => ({
                            ...prev,
                            dateFinManifestation: nextEnd,
                            dateRestitution: nextEnd ? addDays(nextEnd, restitutionGraceDays) : "",
                          }));
                        }}
                      />
                    </Field>
                  </div>

                  <Field label="Motif de la demande *">
                    <Textarea
                      value={formData.motifDemande}
                      onChange={e => setFormData(prev => ({ ...prev, motifDemande: e.target.value }))}
                      rows={4}
                    />
                  </Field>

                  <div className="grid gap-4 md:grid-cols-2">
                    <Field label="Date de prise en charge du matériel">
                      <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
                        Cette date est renseignée par l'administration.
                      </div>
                    </Field>
                    <Field label={`Date de restitution (maximum ${restitutionGraceDays} jour(s) après la fin de la manifestation)`}>
                      <Input type="date" value={formData.dateRestitution} readOnly />
                    </Field>
                  </div>
                </div>

                <div className="rounded-2xl border border-[#e0c46b] bg-sky-100/70 p-4 space-y-4 sm:p-5">
                  <h3 className="text-center text-xl font-semibold underline underline-offset-4">
                    Cadre réservé à la DSU
                  </h3>
                  <div className="grid gap-4 md:grid-cols-2">
                    <DisplayField label="Date de réception de la demande" />
                    <DisplayField label="Décision (date)" />
                  </div>
                  <div className="grid gap-4 md:grid-cols-4">
                    {materialEventItems.map(item => (
                      <div key={item.key} className="rounded-lg border bg-white/70 p-3">
                        <p className="font-medium">{item.label}</p>
                        <p className="mt-2 text-sm text-muted-foreground">Accordé / quantité : à compléter par la DSU</p>
                      </div>
                    ))}
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Cette partie sera remplie uniquement par l'administration lors de la validation de votre demande.
                  </p>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <Field label="Signature du DGS de la commune (nom du signataire)">
                    <Input value={formData.dgsSignataire} onChange={e => setFormData(prev => ({ ...prev, dgsSignataire: e.target.value }))} />
                  </Field>
                  <DisplayField label="Signature de la DSU" />
                </div>
              </div>
            </CardContent>
          </Card>

          <div className={cn(
            "flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end",
            isMobile && "fixed inset-x-0 bottom-0 z-20 border-t border-border bg-white/96 px-4 py-3 shadow-[0_-12px_30px_rgba(15,23,42,0.08)] backdrop-blur"
          )}>
            <Button variant="outline" asChild className="min-h-11">
              <Link href="/dashboard">Retour au tableau de bord</Link>
            </Button>
            <Button onClick={handleSubmit} disabled={createMutation.isPending} className="w-full min-h-11 sm:w-auto">
              {createMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
              {createMutation.isPending ? "Envoi en cours..." : "Envoyer la demande"}
            </Button>
          </div>
        </div>
      </main>

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

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="space-y-2">
      <Label>{label}</Label>
      {children}
    </div>
  );
}

function DisplayField({ label }: { label: string }) {
  return (
    <div className="space-y-2">
      <Label>{label}</Label>
      <div className="h-10 rounded-md border bg-white/70" />
    </div>
  );
}
