"use client";

import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { X, Plus, Trash2, ChevronDown, ChevronRight, Loader2 } from "lucide-react";

type PrestationLine = {
  id?: string; // ID de la prestation existante (pour la suppression)
  type_prestation: string;
  quantite: number;
  tarif: number;
  total: number;
};

type ClientPrestations = {
  client: string;
  code: string;
  expanded: boolean;
  lines: PrestationLine[];
};

type ReferredClient = {
  org_id: string;
  code_employeur: string;
  organizations: {
    name: string;
  };
};

type Invoice = {
  id: string;
  amount_ht: string;
  created_at: string;
  period_label?: string;
  org_id: string;
};

type EditNAAModalProps = {
  naaId: string;
  onClose: () => void;
  onSuccess: () => void;
};

export default function EditNAAModal({ naaId, onClose, onSuccess }: EditNAAModalProps) {
  const [isUpdating, setIsUpdating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Formulaire
  const [referrerCode, setReferrerCode] = useState("");
  const [periode, setPeriode] = useState("");
  const [callsheetDate, setCallsheetDate] = useState("");
  const [limitDate, setLimitDate] = useState("");
  const [transferReference, setTransferReference] = useState("");
  const [soldeCompte, setSoldeCompte] = useState("0");
  const [deposit, setDeposit] = useState("0");
  
  // Prestations groupées par client
  const [clientsPrestations, setClientsPrestations] = useState<ClientPrestations[]>([]);
  // Factures détectées par organisation
  const [clientInvoices, setClientInvoices] = useState<Record<string, Invoice[]>>({});
  // Ensemble des invoices sélectionnées (IDs)
  const [selectedInvoiceIds, setSelectedInvoiceIds] = useState<Record<string, string[]>>({});
  // État d'expansion des sections factures par org_id
  const [invoicesExpanded, setInvoicesExpanded] = useState<Record<string, boolean>>({});

  const typesPrestation = [
    "Ouverture de compte",
    "Abonnement",
    "Paies CDDU",
    "Paies RG",
    "Avenants",
    "Autres"
  ];

  // Charger les données de la NAA existante
  const { data: naaData, isLoading: isLoadingNaa } = useQuery({
    queryKey: ["naa-detail", naaId],
    queryFn: async () => {
      const res = await fetch(`/api/staff/naa/${naaId}`, {
        credentials: "include"
      });
      if (!res.ok) throw new Error("Impossible de charger la NAA");
      return res.json();
    },
  });

  // Charger les clients apportés
  const { data: referredClients = [] } = useQuery<ReferredClient[]>({
    queryKey: ["referred-clients", referrerCode],
    queryFn: async () => {
      if (!referrerCode) return [];
      const res = await fetch(`/api/staff/referrers/${referrerCode}/clients`, {
        credentials: "include"
      });
      if (!res.ok) return [];
      return res.json();
    },
    enabled: !!referrerCode,
  });

  // Initialiser le formulaire avec les données existantes
  useEffect(() => {
    if (naaData) {
      setReferrerCode(naaData.referrer_code || "");
      setPeriode(naaData.periode || "");
      setCallsheetDate(naaData.callsheet_date || "");
      setLimitDate(naaData.limit_date || "");
      setTransferReference(naaData.transfer_reference || "");
      setSoldeCompte(String(naaData.solde_compte_apporteur || 0));
      setDeposit(String(naaData.deposit || 0));

      // Regrouper les prestations par client
      if (naaData.prestations && naaData.prestations.length > 0) {
        const grouped = naaData.prestations.reduce((acc: any, prest: any) => {
          const key = `${prest.client_code}_${prest.client_name}`;
          if (!acc[key]) {
            acc[key] = {
              client: prest.client_name,
              code: prest.client_code,
              expanded: false, // Replié par défaut
              lines: []
            };
          }
          acc[key].lines.push({
            id: prest.id,
            type_prestation: prest.type_prestation,
            quantite: prest.quantite,
            tarif: prest.tarif,
            total: prest.total
          });
          return acc;
        }, {});

        setClientsPrestations(Object.values(grouped));
      }
    }
  }, [naaData]);

  // Si des clients sont déjà présents (à l'ouverture), précharger leurs factures
  useEffect(() => {
    const preload = async () => {
      for (const client of clientsPrestations) {
        if (client.code) {
          const rc = referredClients.find(rc => rc.code_employeur === client.code);
          if (rc && rc.org_id && !(clientInvoices[rc.org_id] || []).length) {
            try {
              const res = await fetch(`/api/staff/organizations/${rc.org_id}/invoices?periode=${encodeURIComponent(periode)}`, { credentials: 'include' });
              if (!res.ok) continue;
              const invoices = await res.json();
              setClientInvoices(prev => ({ ...prev, [rc.org_id]: invoices }));
              if (invoices && invoices.length > 0) {
                setSelectedInvoiceIds(prev => ({ ...prev, [rc.org_id]: [invoices[0].id] }));
              }
            } catch (e) {
              // ignore
            }
          }
        }
      }
    };
    if (clientsPrestations.length > 0 && referredClients.length > 0) {
      preload();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [clientsPrestations, referredClients]);

  // Ajouter un nouveau client
  const addClient = () => {
    setClientsPrestations([...clientsPrestations, {
      client: "",
      code: "",
      expanded: true, // Nouveau client déplié pour faciliter la saisie
      lines: [{
        type_prestation: "",
        quantite: 1,
        tarif: 0,
        total: 0
      }]
    }]);
  };

  // Supprimer un client et toutes ses prestations
  const removeClient = (clientIndex: number) => {
    setClientsPrestations(clientsPrestations.filter((_, i) => i !== clientIndex));
  };

  // Ajouter une ligne de prestation pour un client
  const addLineToClient = (clientIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines.push({
      type_prestation: "",
      quantite: 1,
      tarif: 0,
      total: 0
    });
    setClientsPrestations(newClients);
  };

  // Supprimer une ligne de prestation
  const removeLine = (clientIndex: number, lineIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines = newClients[clientIndex].lines.filter((_, i) => i !== lineIndex);
    setClientsPrestations(newClients);
  };

  // Mettre à jour le client
  const updateClient = (clientIndex: number, clientName: string) => {
    const newClients = [...clientsPrestations];
    const selectedClient = referredClients.find(c => c.organizations.name === clientName);
    newClients[clientIndex].client = clientName;
    newClients[clientIndex].code = selectedClient?.code_employeur || "";
    setClientsPrestations(newClients);

    // Si on a trouvé l'org_id, récupérer les factures candidates
    if (selectedClient?.org_id) {
      fetch(`/api/staff/organizations/${selectedClient.org_id}/invoices?periode=${encodeURIComponent(periode)}`, {
        credentials: "include"
      })
        .then(res => res.ok ? res.json() : [])
        .then((invoices: Invoice[]) => {
          setClientInvoices(prev => ({ ...prev, [selectedClient.org_id]: invoices }));
          // Par défaut, sélectionner la facture la plus récente (la première)
          if (invoices && invoices.length > 0) {
            setSelectedInvoiceIds(prev => ({ ...prev, [selectedClient.org_id]: [invoices[0].id] }));
          }
        })
        .catch(() => {});
    }
  };

  const toggleInvoiceSelection = (orgId: string, invoiceId: string) => {
    setSelectedInvoiceIds(prev => {
      const current = prev[orgId] || [];
      // Si cette facture est déjà la seule sélectionnée, on la désélectionne
      if (current.length === 1 && current[0] === invoiceId) {
        return { ...prev, [orgId]: [] };
      }
      // Sinon, on remplace la sélection par cette facture uniquement (mode radio)
      return { ...prev, [orgId]: [invoiceId] };
    });
  };

  // Mettre à jour une ligne de prestation
  const updateLine = (clientIndex: number, lineIndex: number, field: keyof PrestationLine, value: any) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines[lineIndex] = {
      ...newClients[clientIndex].lines[lineIndex],
      [field]: value
    };
    
    // Calculer le total automatiquement
    if (field === "quantite" || field === "tarif") {
      const line = newClients[clientIndex].lines[lineIndex];
      const quantite = field === "quantite" ? parseFloat(value) || 0 : line.quantite;
      const tarif = field === "tarif" ? parseFloat(value) || 0 : line.tarif;
      newClients[clientIndex].lines[lineIndex].total = quantite * tarif;
    }
    
    setClientsPrestations(newClients);
  };

  // Basculer l'état expanded d'un client
  const toggleClientExpanded = (clientIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].expanded = !newClients[clientIndex].expanded;
    setClientsPrestations(newClients);
  };

  // Tout replier
  const collapseAll = () => {
    setClientsPrestations(clientsPrestations.map(c => ({ ...c, expanded: false })));
  };

  // Tout déplier
  const expandAll = () => {
    setClientsPrestations(clientsPrestations.map(c => ({ ...c, expanded: true })));
  };

  // Basculer l'expansion de la section factures
  const toggleInvoicesExpanded = (orgId: string) => {
    setInvoicesExpanded(prev => ({ ...prev, [orgId]: !prev[orgId] }));
  };

  // Calculer le total pour un client
  const getClientTotal = (client: ClientPrestations) => {
    return client.lines.reduce((sum, line) => sum + line.total, 0);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    
    if (!referrerCode || !periode || !callsheetDate) {
      setError("Veuillez remplir tous les champs obligatoires");
      return;
    }

    setIsUpdating(true);

    try {
      // Convertir clientsPrestations en format plat pour l'API
      const prestations = clientsPrestations.flatMap(client =>
        client.lines.map(line => ({
          id: line.id, // Inclure l'ID pour identifier les prestations existantes
          client: client.client,
          code: client.code,
          type_prestation: line.type_prestation,
          quantite: line.quantite,
          tarif: line.tarif,
          total: line.total
        }))
      );

      const payload = {
        referrer_code: referrerCode,
        periode,
        callsheet_date: callsheetDate,
        limit_date: limitDate || undefined,
        transfer_reference: transferReference || undefined,
        solde_compte_apporteur: parseFloat(soldeCompte) || 0,
        deposit: parseFloat(deposit) || 0,
        prestations,
        // Liste des factures explicitement incluses par l'utilisateur (IDs)
        included_invoices: Object.values(selectedInvoiceIds).flat()
      };

      const res = await fetch(`/api/staff/naa/${naaId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(payload)
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Erreur lors de la mise à jour de la NAA");
      }

      onSuccess();
    } catch (err: any) {
      setError(err.message);
      setIsUpdating(false);
    }
  };

  if (isLoadingNaa) {
    return (
      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-2xl shadow-xl p-8 flex items-center gap-3">
          <Loader2 className="w-6 h-6 animate-spin text-indigo-600" />
          <span className="text-slate-700">Chargement de la NAA...</span>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="px-6 py-4 border-b flex items-center justify-between">
          <div>
            <h2 className="text-xl font-bold text-slate-800">
              Modifier la NAA
            </h2>
            <p className="text-sm text-slate-500 mt-1">
              {naaData?.naa_number} - {naaData?.periode}
            </p>
          </div>
          <button
            onClick={onClose}
            disabled={isUpdating}
            className="text-slate-400 hover:text-slate-600 transition"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Body */}
        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
          <div className="p-6 space-y-6">
            {error && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                {error}
              </div>
            )}

            {/* Info: Champs de base non modifiables */}
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
              <p className="text-sm text-blue-800">
                <strong>Note :</strong> Les champs de base (apporteur, période, dates) ne sont pas modifiables.
                Vous pouvez uniquement ajouter ou supprimer des prestations.
              </p>
            </div>

            {/* Champs de base (lecture seule) */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">
                  Apporteur d'affaires
                </label>
                <input
                  type="text"
                  value={`${referrerCode} - ${naaData?.referrer_name || ""}`}
                  disabled
                  className="w-full px-3 py-2 bg-slate-100 border rounded-lg text-slate-500 cursor-not-allowed"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">
                  Période
                </label>
                <input
                  type="text"
                  value={periode}
                  disabled
                  className="w-full px-3 py-2 bg-slate-100 border rounded-lg text-slate-500 cursor-not-allowed"
                />
              </div>
            </div>

            {/* Prestations par client */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-slate-800">
                  Prestations
                </h3>
                <div className="flex items-center gap-2">
                  {clientsPrestations.length > 0 && (
                    <>
                      <button
                        type="button"
                        onClick={collapseAll}
                        disabled={isUpdating}
                        className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition disabled:opacity-50"
                      >
                        Tout replier
                      </button>
                      <button
                        type="button"
                        onClick={expandAll}
                        disabled={isUpdating}
                        className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition disabled:opacity-50"
                      >
                        Tout déplier
                      </button>
                    </>
                  )}
                  <button
                    type="button"
                    onClick={addClient}
                    disabled={isUpdating}
                    className="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 flex items-center gap-2"
                  >
                    <Plus className="w-4 h-4" />
                    Ajouter un client
                  </button>
                </div>
              </div>

              {clientsPrestations.length === 0 ? (
                <div className="text-center py-8 bg-slate-50 rounded-xl border border-dashed">
                  <p className="text-slate-500">Aucune prestation. Cliquez sur "Ajouter un client" pour commencer.</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {clientsPrestations.map((client, clientIndex) => (
                    <div key={clientIndex} className="border rounded-xl overflow-hidden bg-white">
                      {/* En-tête du client */}
                      <div className="bg-slate-50 px-4 py-3 flex items-center justify-between border-b">
                        <button
                          type="button"
                          onClick={() => toggleClientExpanded(clientIndex)}
                          className="flex items-center gap-2 flex-1 text-left font-medium text-slate-700 hover:text-indigo-600 transition"
                        >
                          {client.expanded ? (
                            <ChevronDown className="w-5 h-5" />
                          ) : (
                            <ChevronRight className="w-5 h-5" />
                          )}
                          <span>
                            {client.client || "Client non défini"} {client.code && `(${client.code})`}
                          </span>
                          <span className="ml-auto text-sm text-slate-500">
                            {client.lines.length} prestation{client.lines.length > 1 ? "s" : ""} • Total: {getClientTotal(client).toFixed(2)} €
                          </span>
                        </button>
                        <button
                          type="button"
                          onClick={() => removeClient(clientIndex)}
                          disabled={isUpdating}
                          className="ml-2 p-2 text-red-600 hover:bg-red-50 rounded-lg transition disabled:opacity-50"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>

                      {/* Contenu du client */}
                      {client.expanded && (
                        <div className="p-4 space-y-4">
                          {/* Sélection du client */}
                          <div>
                            <label className="block text-sm font-medium text-slate-700 mb-2">
                              Nom du client
                            </label>
                            <select
                              value={client.client}
                              onChange={(e) => updateClient(clientIndex, e.target.value)}
                              disabled={isUpdating}
                              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
                            >
                              <option value="">Sélectionner un client</option>
                              {referredClients.map((rc: any) => (
                                <option key={rc.org_id} value={rc.organizations.name}>
                                  {rc.organizations.name} ({rc.code_employeur})
                                </option>
                              ))}
                            </select>
                          </div>

                          {/* Lignes de prestations */}
                          {/* Factures détectées pour inclusion/exclusion */}
                          <div className="space-y-2">
                            <div className="flex items-center justify-between">
                              <label className="block text-sm font-medium text-slate-700">Factures détectées</label>
                              {(() => {
                                const orgId = client.code ? referredClients.find(rc => rc.code_employeur === client.code)?.org_id : undefined;
                                const invoices = orgId ? clientInvoices[orgId] || [] : [];
                                if (orgId && invoices.length > 0) {
                                  return (
                                    <button
                                      type="button"
                                      onClick={() => toggleInvoicesExpanded(orgId)}
                                      className="text-xs text-slate-500 hover:text-slate-700 flex items-center gap-1"
                                    >
                                      {invoicesExpanded[orgId] ? (
                                        <>
                                          <ChevronDown className="w-3 h-3" />
                                          Masquer
                                        </>
                                      ) : (
                                        <>
                                          <ChevronRight className="w-3 h-3" />
                                          Afficher
                                        </>
                                      )}
                                    </button>
                                  );
                                }
                                return null;
                              })()}
                            </div>
                            <div className="bg-white border rounded-lg p-2">
                              {(() => {
                                const orgId = client.code ? referredClients.find(rc => rc.code_employeur === client.code)?.org_id : undefined;
                                const invoices = orgId ? clientInvoices[orgId] || [] : [];
                                if (!orgId) return <div className="text-sm text-slate-500">Sélectionnez un client pour voir les factures.</div>;
                                if (invoices.length === 0) return <div className="text-sm text-slate-500">Aucune facture détectée pour cette période.</div>;

                                // Si replié, afficher juste la facture sélectionnée
                                if (!invoicesExpanded[orgId]) {
                                  const selectedId = (selectedInvoiceIds[orgId] || [])[0];
                                  const selectedInvoice = invoices.find(inv => inv.id === selectedId);
                                  if (selectedInvoice) {
                                    return (
                                      <div className="text-sm text-slate-700">
                                        Facture sélectionnée : {selectedInvoice.period_label || new Date(selectedInvoice.created_at).toLocaleDateString("fr-FR")} — {parseFloat(selectedInvoice.amount_ht).toFixed(2)} €
                                      </div>
                                    );
                                  }
                                  return <div className="text-sm text-slate-500">Aucune facture sélectionnée</div>;
                                }

                                return (
                                  <div className="space-y-2">
                                    {invoices.map(inv => (
                                      <label key={inv.id} className="flex items-center gap-3 text-sm cursor-pointer hover:bg-slate-50 p-2 rounded-lg transition">
                                        <input
                                          type="radio"
                                          name={`invoice-${orgId}`}
                                          checked={(selectedInvoiceIds[inv.org_id] || []).includes(inv.id)}
                                          onChange={() => toggleInvoiceSelection(inv.org_id, inv.id)}
                                          className="w-4 h-4"
                                        />
                                        <span className="flex-1">{inv.period_label || new Date(inv.created_at).toLocaleDateString("fr-FR")} — {parseFloat(inv.amount_ht).toFixed(2)} €</span>
                                        <span className="text-slate-400 text-xs">#{inv.id.substring(0, 8)}</span>
                                      </label>
                                    ))}
                                  </div>
                                );
                              })()}
                            </div>
                          </div>
                          <div className="space-y-3">
                            {client.lines.map((line, lineIndex) => (
                              <div key={lineIndex} className="grid grid-cols-12 gap-2 items-start p-3 bg-slate-50 rounded-lg">
                                <div className="col-span-4">
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Type de prestation
                                  </label>
                                  <select
                                    value={line.type_prestation}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "type_prestation", e.target.value)}
                                    disabled={isUpdating}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
                                  >
                                    <option value="">Type</option>
                                    {typesPrestation.map((type) => (
                                      <option key={type} value={type}>
                                        {type}
                                      </option>
                                    ))}
                                  </select>
                                </div>
                                <div className="col-span-2">
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Quantité
                                  </label>
                                  <input
                                    type="number"
                                    value={line.quantite}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "quantite", e.target.value)}
                                    disabled={isUpdating}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
                                    min="0"
                                    step="1"
                                  />
                                </div>
                                <div className="col-span-2">
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Tarif (€)
                                  </label>
                                  <input
                                    type="number"
                                    value={line.tarif}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "tarif", e.target.value)}
                                    disabled={isUpdating}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
                                    min="0"
                                    step="0.01"
                                  />
                                </div>
                                <div className="col-span-3">
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Total (€)
                                  </label>
                                  <input
                                    type="number"
                                    value={line.total.toFixed(2)}
                                    readOnly
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg bg-slate-100 text-slate-600"
                                  />
                                </div>
                                <div className="col-span-1 flex items-end justify-center">
                                  <button
                                    type="button"
                                    onClick={() => removeLine(clientIndex, lineIndex)}
                                    disabled={isUpdating || client.lines.length === 1}
                                    className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition disabled:opacity-30 disabled:cursor-not-allowed"
                                    title={client.lines.length === 1 ? "Impossible de supprimer la dernière prestation" : "Supprimer cette prestation"}
                                  >
                                    <Trash2 className="w-4 h-4" />
                                  </button>
                                </div>
                              </div>
                            ))}
                          </div>

                          {/* Bouton ajouter prestation */}
                          <button
                            type="button"
                            onClick={() => addLineToClient(clientIndex)}
                            disabled={isUpdating}
                            className="w-full py-2 text-sm text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition flex items-center justify-center gap-1 disabled:opacity-50"
                          >
                            <Plus className="w-4 h-4" />
                            Ajouter une prestation pour ce client
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Footer */}
          <div className="px-6 py-4 border-t flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              disabled={isUpdating}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-xl transition disabled:opacity-50"
            >
              Annuler
            </button>
            <button
              type="submit"
              disabled={isUpdating}
              className="px-6 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {isUpdating && <Loader2 className="w-4 h-4 animate-spin" />}
              {isUpdating ? "Mise à jour en cours..." : "Mettre à jour et régénérer le PDF"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
