'use client';

import React, { useState, useEffect } from 'react';
import { useNotification } from './NotificationProvider';
import Link from 'next/link';

interface HistoriqueItem {
  id: string;
  date: string;
  adherentNom: string;
  montant: number;
}

interface PrescripteurBudget {
  id: string;
  value: string;
  montant: number;
  consommé: number;
  restant: number;
  ajustementConsomme: number;
  historique: HistoriqueItem[];
}

interface BudgetData {
  global: {
    totalAlloue: number;
    totalConsomme: number;
    totalRestant: number;
  };
  prescripteurs: PrescripteurBudget[];
}

export default function BudgetContent() {
  const { showNotification } = useNotification();
  const [data, setData] = useState<BudgetData | null>(null);
  const [loading, setLoading] = useState(true);
  const [savingId, setSavingId] = useState<string | null>(null);
  const [addModalPrescripteur, setAddModalPrescripteur] = useState<string | null>(null);
  const [addAmount, setAddAmount] = useState('');
  const [rectifierModalPrescripteur, setRectifierModalPrescripteur] = useState<PrescripteurBudget | null>(null);
  const [rectifierBudget, setRectifierBudget] = useState('');
  const [rectifierAjustement, setRectifierAjustement] = useState('');
  const [expandedPrescripteur, setExpandedPrescripteur] = useState<string | null>(null);

  useEffect(() => {
    fetchBudgets();
  }, []);

  const fetchBudgets = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/budget');
      if (response.ok) {
        const res = await response.json();
        setData(res);
      } else {
        showNotification('error', 'Erreur lors du chargement des budgets');
      }
    } catch {
      showNotification('error', 'Erreur lors du chargement des budgets');
    } finally {
      setLoading(false);
    }
  };

  const handleAddMoney = async () => {
    if (!addModalPrescripteur) return;
    const raw = addAmount.replace(',', '.');
    const montantToAdd = parseFloat(raw);
    if (isNaN(montantToAdd) || montantToAdd <= 0) {
      showNotification('error', 'Montant invalide');
      return;
    }

    setSavingId(addModalPrescripteur);
    try {
      const response = await fetch('/api/budget', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prescripteurValue: addModalPrescripteur, montantToAdd }),
      });
      if (response.ok) {
        showNotification('success', 'Budget mis à jour');
        setAddModalPrescripteur(null);
        setAddAmount('');
        fetchBudgets();
      } else {
        const res = await response.json();
        showNotification('error', res.error || "Erreur lors de l'ajout");
      }
    } catch {
      showNotification('error', "Erreur lors de l'ajout");
    } finally {
      setSavingId(null);
    }
  };

  const handleRectifier = async () => {
    if (!rectifierModalPrescripteur) return;
    const montant = parseFloat(rectifierBudget.replace(',', '.'));
    const ajustement = parseFloat(rectifierAjustement.replace(',', '.'));
    if (isNaN(montant) || montant < 0) {
      showNotification('error', 'Budget invalide');
      return;
    }

    setSavingId(rectifierModalPrescripteur.value);
    try {
      const response = await fetch('/api/budget', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          prescripteurValue: rectifierModalPrescripteur.value,
          rectifier: true,
          montant,
          ajustementConsomme: isNaN(ajustement) ? 0 : ajustement,
        }),
      });
      if (response.ok) {
        showNotification('success', 'Corrections enregistrées');
        setRectifierModalPrescripteur(null);
        setRectifierBudget('');
        setRectifierAjustement('');
        fetchBudgets();
      } else {
        const res = await response.json();
        showNotification('error', res.error || 'Erreur lors de la correction');
      }
    } catch {
      showNotification('error', 'Erreur lors de la correction');
    } finally {
      setSavingId(null);
    }
  };

  const formatEuro = (n: number) => n.toFixed(2).replace('.', ',') + ' €';

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    });
  };

  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
        <div className="text-center text-sm text-gray-500">Chargement...</div>
      </div>
    );
  }

  if (!data || data.prescripteurs.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
        <div className="text-center text-gray-500">
          <p className="mb-3 sm:mb-4 text-sm sm:text-base">Aucun prescripteur configuré.</p>
          <p className="text-xs sm:text-sm mb-4 sm:mb-6 px-2">
            Ajoutez des prescripteurs dans la configuration pour pouvoir définir leurs budgets.
          </p>
          <Link
            href="/dashboard/parametres/configuration"
            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm font-medium w-full sm:w-auto"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            Aller à la configuration
          </Link>
        </div>
      </div>
    );
  }

  const { global, prescripteurs } = data;

  return (
    <div className="space-y-4 sm:space-y-6">
      {/* Blocs budget global - style dashboard */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
        <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
          <div className="flex items-start justify-between mb-3 sm:mb-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
              <svg className="w-5 h-5 sm:w-6 sm:h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
          </div>
          <p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">
            Budget total alloué
          </p>
          <p className="text-2xl sm:text-3xl font-bold text-gray-900">{formatEuro(global.totalAlloue)}</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
          <div className="flex items-start justify-between mb-3 sm:mb-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-orange-100 to-orange-50 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
              <svg className="w-5 h-5 sm:w-6 sm:h-6 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
          </div>
          <p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">
            Budget consommé
          </p>
          <p className="text-2xl sm:text-3xl font-bold text-orange-600">{formatEuro(global.totalConsomme)}</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-lgreen/30 transition-all duration-300 group">
          <div className="flex items-start justify-between mb-3 sm:mb-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-lgreen/20 to-lgreen/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
              <svg className="w-5 h-5 sm:w-6 sm:h-6 text-lgreen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
          </div>
          <p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">
            Budget restant
          </p>
          <p className="text-2xl sm:text-3xl font-bold text-lgreen">{formatEuro(global.totalRestant)}</p>
        </div>
      </div>

      {/* Liste des budgets par prescripteur */}
      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
        <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
          <h2 className="text-base sm:text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
          <p className="text-xs sm:text-sm text-gray-500 mt-1">
            Cliquez sur un prescripteur pour voir l&apos;historique. Utilisez « Ajouter » pour créditer le budget.
          </p>
        </div>

        {/* Vue desktop - Tableau */}
        <div className="hidden md:block overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Prescripteur
                </th>
                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Consommé
                </th>
                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Restant
                </th>
                <th className="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[180px]">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {prescripteurs.map((item) => (
                <React.Fragment key={item.value}>
                  <tr
                    key={item.value}
                    className="hover:bg-gray-50 cursor-pointer"
                    onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
                  >
                    <td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-medium text-gray-900">{item.value}</span>
                        {item.historique.length > 0 && (
                          <span className="text-gray-400">
                            <svg
                              className={`w-4 h-4 transition-transform ${expandedPrescripteur === item.value ? 'rotate-90' : ''}`}
                              fill="none"
                              stroke="currentColor"
                              viewBox="0 0 24 24"
                            >
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                            </svg>
                          </span>
                        )}
                      </div>
                    </td>
                    <td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-sm text-orange-600 font-medium">
                      {formatEuro(item.consommé)}
                    </td>
                    <td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
                      <span
                        className={`text-sm font-medium ${
                          item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
                            ? 'text-red-600'
                            : 'text-lgreen'
                        }`}
                      >
                        {formatEuro(item.restant)}
                      </span>
                    </td>
                    <td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
                      <div className="flex items-center gap-2 justify-end">
                        <button
                          onClick={() => {
                            setAddModalPrescripteur(item.value);
                            setAddAmount('');
                          }}
                          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                          </svg>
                          Ajouter
                        </button>
                        <button
                          onClick={() => {
                            setRectifierModalPrescripteur(item);
                            setRectifierBudget(item.montant.toString().replace('.', ','));
                            setRectifierAjustement((item.ajustementConsomme ?? 0).toString().replace('.', ','));
                          }}
                          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                          </svg>
                          Rectifier
                        </button>
                      </div>
                    </td>
                  </tr>
                  {expandedPrescripteur === item.value && item.historique.length > 0 && (
                    <tr key={`${item.value}-hist`} className="bg-gray-50">
                      <td colSpan={4} className="px-4 sm:px-6 py-4">
                        <div className="space-y-2">
                          <h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">
                            Historique des participations
                          </h4>
                          <div className="rounded-lg border border-gray-200 overflow-x-auto">
                            <table className="min-w-full text-sm">
                              <thead className="bg-gray-100">
                                <tr>
                                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500">Date</th>
                                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500">Adhérent</th>
                                  <th className="px-4 py-2 text-right text-xs font-medium text-gray-500">Montant</th>
                                  <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 w-24">Lien</th>
                                </tr>
                              </thead>
                              <tbody className="divide-y divide-gray-200 bg-white">
                                {item.historique.map((h) => (
                                  <tr key={h.id}>
                                    <td className="px-4 py-2 text-gray-700">{formatDate(h.date)}</td>
                                    <td className="px-4 py-2 text-gray-700">{h.adherentNom}</td>
                                    <td className="px-4 py-2 text-right text-orange-600 font-medium">
                                      {formatEuro(h.montant)}
                                    </td>
                                    <td className="px-4 py-2 text-right">
                                      <Link
                                        href="/dashboard/factures"
                                        className="text-lblue hover:underline text-xs"
                                      >
                                        Voir
                                      </Link>
                                    </td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </td>
                    </tr>
                  )}
                  {expandedPrescripteur === item.value && item.historique.length === 0 && (
                    <tr className="bg-gray-50">
                      <td colSpan={4} className="px-4 sm:px-6 py-4">
                        <p className="text-sm text-gray-500 italic">Aucune participation enregistrée pour ce prescripteur.</p>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>

        {/* Vue mobile - Cartes */}
        <div className="md:hidden divide-y divide-gray-200">
          {prescripteurs.map((item) => (
            <div key={item.value} className="p-4">
              <button
                type="button"
                className="w-full text-left"
                onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
              >
                <div className="flex items-center justify-between gap-2 mb-3">
                  <span className="font-medium text-gray-900">{item.value}</span>
                  {item.historique.length > 0 && (
                    <svg
                      className={`w-4 h-4 text-gray-400 flex-shrink-0 transition-transform ${expandedPrescripteur === item.value ? 'rotate-90' : ''}`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  )}
                </div>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>
                    <span className="text-xs text-gray-500 uppercase">Consommé</span>
                    <p className="text-orange-600 font-medium">{formatEuro(item.consommé)}</p>
                  </div>
                  <div>
                    <span className="text-xs text-gray-500 uppercase">Restant</span>
                    <p
                      className={`font-medium ${
                        item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
                          ? 'text-red-600'
                          : 'text-lgreen'
                      }`}
                    >
                      {formatEuro(item.restant)}
                    </p>
                  </div>
                </div>
              </button>
              <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3" onClick={(e) => e.stopPropagation()}>
                <button
                  onClick={() => {
                    setAddModalPrescripteur(item.value);
                    setAddAmount('');
                  }}
                  className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  Ajouter
                </button>
                <button
                  onClick={() => {
                    setRectifierModalPrescripteur(item);
                    setRectifierBudget(item.montant.toString().replace('.', ','));
                    setRectifierAjustement((item.ajustementConsomme ?? 0).toString().replace('.', ','));
                  }}
                  className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                  Rectifier
                </button>
              </div>
              {expandedPrescripteur === item.value && item.historique.length > 0 && (
                <div className="mt-4 pt-3 border-t border-gray-200 space-y-2">
                  <h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Historique</h4>
                  <div className="space-y-1 max-h-48 overflow-y-auto">
                    {item.historique.map((h) => (
                      <div
                        key={h.id}
                        className="flex items-center justify-between gap-2 py-2 px-3 bg-gray-50 rounded-lg text-sm"
                      >
                        <div className="min-w-0 flex-1">
                          <p className="font-medium text-gray-900 truncate">{h.adherentNom}</p>
                          <p className="text-xs text-gray-500">{formatDate(h.date)}</p>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <span className="text-orange-600 font-medium">{formatEuro(h.montant)}</span>
                          <Link
                            href="/dashboard/factures"
                            className="text-lblue hover:underline text-xs font-medium"
                          >
                            Voir
                          </Link>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {expandedPrescripteur === item.value && item.historique.length === 0 && (
                <p className="mt-4 pt-3 border-t border-gray-200 text-sm text-gray-500 italic">
                  Aucune participation enregistrée.
                </p>
              )}
            </div>
          ))}
        </div>

        <div className="px-4 sm:px-6 py-3 bg-gray-50 border-t border-gray-200">
          <p className="text-xs text-gray-500">
            Les prescripteurs sont définis dans{' '}
            <Link href="/dashboard/parametres/configuration" className="text-lblue hover:underline">
              Paramètres → Configuration
            </Link>
            .
          </p>
        </div>
      </div>

      {/* Modal Rectifier */}
      {rectifierModalPrescripteur && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
          onClick={() => {
            setRectifierModalPrescripteur(null);
            setRectifierBudget('');
            setRectifierAjustement('');
          }}
        >
          <div
            className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
            onClick={(e) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-labelledby="rectifier-budget-title"
          >
            <h3 id="rectifier-budget-title" className="text-lg font-semibold text-gray-900 mb-2">
              Rectifier — {rectifierModalPrescripteur.value}
            </h3>
            <p className="text-sm text-gray-500 mb-4">
              Corrigez le budget alloué et/ou l&apos;ajustement du consommé en cas d&apos;erreur.
            </p>
            <div className="space-y-4 mb-6">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1.5">Budget alloué (€)</label>
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    inputMode="decimal"
                    value={rectifierBudget}
                    onChange={(e) => setRectifierBudget(e.target.value.replace(/[^0-9.,]/g, ''))}
                    placeholder="0,00"
                    className="flex-1 px-4 py-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
                  />
                  <span className="text-sm text-gray-500">€</span>
                </div>
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1.5">
                  Ajustement consommé (€)
                </label>
                <p className="text-xs text-gray-500 mb-1">
                  Valeur à ajouter au consommé calculé. Négatif pour diminuer (ex: -6,80).
                </p>
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    inputMode="decimal"
                    value={rectifierAjustement}
                    onChange={(e) => setRectifierAjustement(e.target.value.replace(/[^0-9.,-]/g, ''))}
                    placeholder="0,00"
                    className="flex-1 px-4 py-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
                  />
                  <span className="text-sm text-gray-500">€</span>
                </div>
              </div>
            </div>
            <div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
              <button
                onClick={() => {
                  setRectifierModalPrescripteur(null);
                  setRectifierBudget('');
                  setRectifierAjustement('');
                }}
                className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
              >
                Annuler
              </button>
              <button
                onClick={handleRectifier}
                disabled={savingId === rectifierModalPrescripteur.value}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue disabled:opacity-50 transition-colors"
              >
                {savingId === rectifierModalPrescripteur.value ? (
                  <>
                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Enregistrement...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    Enregistrer
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal Ajouter de l'argent */}
      {addModalPrescripteur && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
          onClick={() => {
            setAddModalPrescripteur(null);
            setAddAmount('');
          }}
        >
          <div
            className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
            onClick={(e) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-labelledby="add-budget-title"
          >
            <h3 id="add-budget-title" className="text-lg font-semibold text-gray-900 mb-2">
              Ajouter du budget — {addModalPrescripteur}
            </h3>
            <p className="text-sm text-gray-500 mb-4">
              Entrez le montant à ajouter au budget existant.
            </p>
            <div className="flex items-center gap-2 mb-6">
              <input
                type="text"
                inputMode="decimal"
                value={addAmount}
                onChange={(e) => setAddAmount(e.target.value.replace(/[^0-9.,]/g, ''))}
                placeholder="0,00"
                className="flex-1 px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
                autoFocus
              />
              <span className="text-sm text-gray-500">€</span>
            </div>
            <div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
              <button
                onClick={() => {
                  setAddModalPrescripteur(null);
                  setAddAmount('');
                }}
                className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
              >
                Annuler
              </button>
              <button
                onClick={handleAddMoney}
                disabled={savingId === addModalPrescripteur}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen disabled:opacity-50 transition-colors"
              >
                {savingId === addModalPrescripteur ? (
                  <>
                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Ajout...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    Ajouter
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}