import { useEffect, useMemo, useState } from "react";
import { Helmet } from "react-helmet";
import { useNavigate, useParams } from "react-router-dom";
import {
  ArrowLeft,
  Calendar,
  CheckCircle,
  Clock,
  CreditCard,
  Download,
  Euro,
  FileText,
  Hash,
  AlertTriangle,
  Building,
  Receipt,
  Wallet,
  User,
  MapPin,
  Mail,
  Phone,
  ExternalLink,
} from "lucide-react";
import { toast } from "@/components/ui/use-toast";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { cn, formatDateFR, formatDateFRCourt } from "@/lib/utils";
import { ModalLoading } from "@/components/modal/ModalLoading";
import Tabs from "@/components/Tabs";
import { getAllReglements, getreglementSelected, reglementStatus } from "@/store/features/reglement/selectors";
import { loadAllReglementData } from "@/store/features/reglement/thunk";
import { FacturesReglement, echeances, ReglementDetail } from "@/types/reglementType";
import { selectClient } from "@/store/features/client/slice";

// ============================================
// CONSTANTES
// ============================================

const STATUT_REGLEMENT = {
  SOLDE: 'Soldé',
  PARTIEL: 'Partiellement réglé',
  NON_REGLE: 'Non réglé',
} as const;

// ============================================
// COMPOSANTS UTILITAIRES
// ============================================

const ReglementStatusBadge = ({ status }: { status: string }) => {
  const config: Record<string, { label: string; className: string; icon: React.ElementType }> = {
    [STATUT_REGLEMENT.SOLDE]: {
      label: 'Payé',
      className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
      icon: CheckCircle
    },
    [STATUT_REGLEMENT.PARTIEL]: {
      label: 'Partiel',
      className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
      icon: Clock
    },
    [STATUT_REGLEMENT.NON_REGLE]: {
      label: 'Non réglé',
      className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
      icon: AlertTriangle
    },
  };

  const statusConfig = config[status] || config[STATUT_REGLEMENT.NON_REGLE];
  const Icon = statusConfig.icon;

  return (
    <span className={cn(
      "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium",
      statusConfig.className
    )}>
      <Icon className="w-4 h-4" />
      {statusConfig.label}
    </span>
  );
};

const InfoCard = ({ icon: Icon, label, value, className }: { icon: React.ElementType; label: string; value: string | number; className?: string }) => (
  <div className="flex items-start gap-3">
    <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
      <Icon className="w-4 h-4 text-gray-500" />
    </div>
    <div>
      <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
      <p className={cn("text-sm font-medium text-gray-900 dark:text-white", className)}>{value}</p>
    </div>
  </div>
);

const formatCurrency = (amount: number) => {
  return `${amount.toLocaleString('fr-FR', { minimumFractionDigits: 2 })}€`;
};

// ============================================
// COMPOSANT PRINCIPAL
// ============================================

const PaymentDetailPage = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const [activeTab, setActiveTab] = useState("overview");

  const reglements = useAppSelector(getAllReglements) as FacturesReglement[];
  const status = useAppSelector(reglementStatus);

  const isLoading = status === 'loading' && reglements.length === 0;

  useEffect(() => {
    const load = async () => {
      if (status === 'idle' || status === 'failed') {
        await dispatch(loadAllReglementData()).unwrap();
      }
    };
    load();
  }, [status, dispatch]);

  // Trouver le règlement correspondant
  const reglement = useAppSelector(getreglementSelected)

  // Calculs
  const totalEcheances = useMemo(() => {
    return reglement?.echeances?.length || 0;
  }, [reglement]);

  const totalReglements = useMemo(() => {
    return reglement?.echeances?.reduce((total, ech) => total + (ech.reglements?.length || 0), 0) || 0;
  }, [reglement]);

  const echeancesReglees = useMemo(() => {
    return reglement?.echeances?.filter(ech => ech.est_regle).length || 0;
  }, [reglement]);

  const prochainEcheance = useMemo(() => {
    const echeancesNonReglees = reglement?.echeances?.filter(ech => !ech.est_regle) || [];
    if (echeancesNonReglees.length === 0) return null;
    return echeancesNonReglees.sort((a, b) => new Date(a.date_echeance).getTime() - new Date(b.date_echeance).getTime())[0];
  }, [reglement]);

  if (isLoading) {
    return <ModalLoading />;
  }

  if (!reglement) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-4">
        <AlertTriangle className="w-12 h-12 text-gray-400" />
        <p className="text-gray-500">Règlement introuvable</p>
        <button
          onClick={() => navigate('/home/reglements')}
          className="text-[#007E45] hover:underline"
        >
          Retour à la liste
        </button>
      </div>
    );
  }

  const tabs = [
    { id: "overview", label: "Vue d'ensemble" },
    { id: "echeances", label: "Échéances", count: totalEcheances },
    { id: "reglements", label: "Règlements", count: totalReglements },
    { id: "client", label: "Client" },
  ];

  const client = reglement.client;
  const firstReglement = reglement.echeances?.[0]?.reglements?.[0];
  const reglementNo = firstReglement?.rg_no;
  return (
    <>
      <Helmet>
        <title>{reglement.numero} - Règlement</title>
      </Helmet>

      <div className="space-y-6">
        {/* HEADER */}
        <div className="sticky top-0 z-30 bg-white border-b border-gray-200 shadow-sm dark:bg-gray-950 dark:border-gray-800">
          <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex gap-4 items-center">
                <button
                  onClick={() => navigate("/home/reglements")}
                  title="Retour à la liste"
                  className="p-2 text-gray-500 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
                >
                  <ArrowLeft className="w-5 h-5" />
                </button>
                <div>
                  <div className="flex gap-3 items-center">
                    <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                       {reglementNo ? `REG_${reglementNo}` : '-'}
                    </h1>
                    <ReglementStatusBadge status={reglement.statut_reglement} />
                  </div>
                  <div className="flex gap-2 items-center text-sm text-gray-500">
                    <span className="font-medium text-gray-900 dark:text-gray-300">
                      {client?.intitule || 'Client inconnu'}
                    </span>
                    <span>•</span>
                    <span>{formatDateFR(reglement.date)}</span>
                    <span>•</span>
                    <span className="text-gray-400">{reglement.type_libelle}</span>
                  </div>
                </div>
              </div>

              {/* ACTIONS */}
              <div className="flex gap-2 items-center">
                <button
                  onClick={() => navigate(`/home/factures/${reglement.numero}`)}
                  className="flex gap-2 items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-xl border border-gray-200 transition-colors hover:bg-gray-50"
                >
                  <FileText className="w-4 h-4" />
                  Voir la facture
                </button>
                <button
                  onClick={() => toast({ title: 'Téléchargement', description: 'Génération du PDF...' })}
                  className="flex gap-2 items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-xl border border-gray-200 transition-colors hover:bg-gray-50"
                >
                  <Download className="w-4 h-4" />
                  Exporter
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* CONTENT */}
        <div className="px-4 mx-auto mt-6 w-full max-w-7xl sm:px-6 lg:px-8">
          <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />

          <div className="mt-6">
            {/* --- OVERVIEW TAB --- */}
            {activeTab === "overview" && (
              <div className="space-y-6">
                {/* Résumé financier */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="p-5 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                        <Euro className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                      </div>
                      <span className="text-sm text-gray-500">Total TTC</span>
                    </div>
                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
                      {formatCurrency(reglement.montants?.total_ttc || 0)}
                    </p>
                  </div>

                  <div className="p-5 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
                        <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
                      </div>
                      <span className="text-sm text-gray-500">Montant réglé</span>
                    </div>
                    <p className="text-2xl font-bold text-green-600 dark:text-green-400">
                      {formatCurrency(reglement.montants?.montant_regle || 0)}
                    </p>
                  </div>

                  <div className="p-5 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg">
                        <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
                      </div>
                      <span className="text-sm text-gray-500">Reste à régler</span>
                    </div>
                    <p className="text-2xl font-bold text-red-600 dark:text-red-400">
                      {formatCurrency(reglement.montants?.reste_a_regler || 0)}
                    </p>
                  </div>

                  <div className="p-5 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                        <Receipt className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                      </div>
                      <span className="text-sm text-gray-500">Progression</span>
                    </div>
                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
                      {reglement.montants?.total_ttc > 0 
                        ? Math.round((reglement.montants.montant_regle / reglement.montants.total_ttc) * 100)
                        : 0}%
                    </p>
                    <div className="mt-2 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-[#007E45] rounded-full transition-all"
                        style={{ 
                          width: `${reglement.montants?.total_ttc > 0 
                            ? (reglement.montants.montant_regle / reglement.montants.total_ttc) * 100 
                            : 0}%` 
                        }}
                      />
                    </div>
                  </div>
                </div>

                {/* Informations générales */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="p-6 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <h3 className="mb-4 text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                      <FileText className="w-5 h-5 text-gray-400" />
                      Informations du document
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <InfoCard icon={Hash} label="Numéro" value={reglement.numero} />
                      <InfoCard icon={FileText} label="Type" value={reglement.type_libelle} />
                      <InfoCard icon={Calendar} label="Date" value={formatDateFRCourt(reglement.date)} />
                      <InfoCard icon={Calendar} label="Date livraison" value={reglement.date_livraison ? formatDateFRCourt(reglement.date_livraison) : '-'} />
                      <InfoCard icon={Hash} label="Référence" value={reglement.reference || '-'} />
                      <InfoCard icon={Calendar} label="Création" value={formatDateFRCourt(reglement.date_creation)} />
                    </div>
                  </div>

                  <div className="p-6 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <h3 className="mb-4 text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                      <Wallet className="w-5 h-5 text-gray-400" />
                      Suivi des paiements
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <InfoCard icon={Calendar} label="Échéances" value={`${echeancesReglees}/${totalEcheances} réglées`} />
                      <InfoCard icon={Receipt} label="Règlements" value={totalReglements} />
                      {prochainEcheance && (
                        <>
                          <InfoCard 
                            icon={Clock} 
                            label="Prochaine échéance" 
                            value={formatDateFRCourt(prochainEcheance.date_echeance)}
                            className="text-amber-600"
                          />
                          <InfoCard 
                            icon={Euro} 
                            label="Montant dû" 
                            value={formatCurrency(prochainEcheance.reste_a_regler)}
                            className="text-red-600"
                          />
                        </>
                      )}
                    </div>
                  </div>
                </div>

                {/* Derniers règlements */}
                {totalReglements > 0 && (
                  <div className="p-6 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                    <h3 className="mb-4 text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                      <CreditCard className="w-5 h-5 text-gray-400" />
                      Derniers règlements
                    </h3>
                    <div className="space-y-3">
                      {reglement.echeances?.flatMap(ech => ech.reglements || []).slice(0, 3).map((reg, i) => (
                        <div key={i} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
                          <div className="flex items-center gap-4">
                            <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
                              <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
                            </div>
                            <div>
                              <p className="font-medium text-gray-900 dark:text-white">
                                REG_{reg.rg_no}
                              </p>
                              <p className="text-sm text-gray-500">
                                {formatDateFRCourt(reg.date)} • {reg.mode_reglement?.libelle}
                              </p>
                            </div>
                          </div>
                          <div className="text-right">
                            <p className="font-bold text-green-600 dark:text-green-400">
                              +{formatCurrency(reg.montant)}
                            </p>
                            <p className="text-xs text-gray-500">{reg.reference || reg.libelle}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* --- ECHEANCES TAB --- */}
            {activeTab === "echeances" && (
              <div className="p-6 bg-white rounded-2xl border border-gray-200 shadow-sm dark:bg-gray-950 dark:border-gray-800">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 dark:bg-gray-900/50">
                      <tr>
                        <th className="px-4 py-3 rounded-l-lg">N° Échéance</th>
                        <th className="px-4 py-3">Date échéance</th>
                        <th className="px-4 py-3 text-right">Montant</th>
                        <th className="px-4 py-3 text-right">Réglé</th>
                        <th className="px-4 py-3 text-right">Reste</th>
                        <th className="px-4 py-3">Mode</th>
                        <th className="px-4 py-3 text-center">Statut</th>
                        <th className="px-4 py-3 rounded-r-lg text-center">Règlements</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                      {reglement.echeances && reglement.echeances.length > 0 ? (
                        reglement.echeances.map((ech, index) => (
                          <tr key={ech.dr_no || index} className="hover:bg-gray-50/50 dark:hover:bg-gray-900/20">
                            <td className="px-4 py-4">
                              <span className="font-mono font-bold text-gray-900 dark:text-white">
                                ECH_{ech.dr_no}
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-2">
                                <Calendar className="w-4 h-4 text-gray-400" />
                                <span>{formatDateFRCourt(ech.date_echeance)}</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-right font-medium">
                              {formatCurrency(ech.montant)}
                            </td>
                            <td className="px-4 py-4 text-right font-medium text-green-600 dark:text-green-400">
                              {formatCurrency(ech.montant_regle)}
                            </td>
                            <td className="px-4 py-4 text-right font-bold text-red-600 dark:text-red-400">
                              {formatCurrency(ech.reste_a_regler)}
                            </td>
                            <td className="px-4 py-4">
                              <span className="text-sm text-gray-600 dark:text-gray-300">
                                {ech.mode_reglement?.libelle || '-'}
                              </span>
                            </td>
                            <td className="px-4 py-4 text-center">
                              {ech.est_regle ? (
                                <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded-full">
                                  <CheckCircle className="w-3 h-3" />
                                  Réglé
                                </span>
                              ) : (
                                <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 rounded-full">
                                  <Clock className="w-3 h-3" />
                                  En attente
                                </span>
                              )}
                            </td>
                            <td className="px-4 py-4 text-center">
                              <span className="inline-flex items-center justify-center w-6 h-6 text-xs font-bold bg-gray-100 dark:bg-gray-800 rounded-full">
                                {ech.nb_reglements || 0}
                              </span>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan={8} className="px-4 py-12 text-center text-gray-500">
                            <Calendar className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                            Aucune échéance
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* --- REGLEMENTS TAB --- */}
            {activeTab === "reglements" && (
              <div className="p-6 bg-white rounded-2xl border border-gray-200 shadow-sm dark:bg-gray-950 dark:border-gray-800">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 dark:bg-gray-900/50">
                      <tr>
                        <th className="px-4 py-3 rounded-l-lg">N° Règlement</th>
                        <th className="px-4 py-3">Date</th>
                        <th className="px-4 py-3">Référence</th>
                        <th className="px-4 py-3">Mode</th>
                        <th className="px-4 py-3">Journal</th>
                        <th className="px-4 py-3 text-right">Montant</th>
                        <th className="px-4 py-3 rounded-r-lg text-center">Statut</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                      {reglement.echeances?.flatMap(ech => ech.reglements || []).length > 0 ? (
                        reglement.echeances?.flatMap(ech => ech.reglements || []).map((reg, index) => (
                          <tr key={reg.rg_no || index} className="hover:bg-gray-50/50 dark:hover:bg-gray-900/20">
                            <td className="px-4 py-4">
                              <span className="font-mono font-bold text-gray-900 dark:text-white">
                                REG_{reg.rg_no}
                              </span>
                              <div className="text-xs text-gray-500">{reg.numero_piece}</div>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex flex-col">
                                <span>{formatDateFRCourt(reg.date)}</span>
                                <span className="text-xs text-gray-500">{reg.heure}</span>
                              </div>
                            </td>
                            <td className="px-4 py-4">
                              <span className="text-sm">{reg.reference || '-'}</span>
                              <div className="text-xs text-gray-500">{reg.libelle}</div>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-2">
                                <CreditCard className="w-4 h-4 text-gray-400" />
                                <span className="text-sm">{reg.mode_reglement?.libelle}</span>
                              </div>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-2">
                                <Building className="w-4 h-4 text-gray-400" />
                                <div>
                                  <span className="text-sm font-medium">{reg.journal?.code}</span>
                                  <div className="text-xs text-gray-500">{reg.journal?.intitule}</div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-right">
                              <span className="font-bold text-green-600 dark:text-green-400">
                                +{formatCurrency(reg.montant)}
                              </span>
                            </td>
                            <td className="px-4 py-4 text-center">
                              {reg.est_impaye ? (
                                <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 rounded-full">
                                  <AlertTriangle className="w-3 h-3" />
                                  Impayé
                                </span>
                              ) : reg.est_valide ? (
                                <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded-full">
                                  <CheckCircle className="w-3 h-3" />
                                  Validé
                                </span>
                              ) : (
                                <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400 rounded-full">
                                  <Clock className="w-3 h-3" />
                                  En cours
                                </span>
                              )}
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan={7} className="px-4 py-12 text-center text-gray-500">
                            <Receipt className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                            Aucun règlement enregistré
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* --- CLIENT TAB --- */}
            {activeTab === "client" && client && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="p-6 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 rounded-full bg-[#007E45]/10 flex items-center justify-center text-2xl font-bold text-[#007E45]">
                      {client.intitule?.charAt(0).toUpperCase() || '?'}
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                        {client.intitule}
                      </h3>
                      <p className="text-sm text-gray-500">{client.numero}</p>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <InfoCard icon={User} label="Code client" value={client.numero} />
                    {client.email && <InfoCard icon={Mail} label="Email" value={client.email} />}
                    {client.telephone && <InfoCard icon={Phone} label="Téléphone" value={client.telephone} />}
                  </div>
                  {/* <button
                    onClick={() => {
                      dispatch(selectClient(client as any));
                      navigate(`/home/clients/${client.numero}`);
                    }}
                    className="mt-6 w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-[#007E45] bg-[#007E45]/10 rounded-xl hover:bg-[#007E45]/20 transition-colors"
                  >
                    <ExternalLink className="w-4 h-4" />
                    Voir la fiche client
                  </button> */}
                </div>

                <div className="p-6 bg-white rounded-2xl border border-gray-200 dark:bg-gray-950 dark:border-gray-800">
                  <h3 className="mb-4 text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                    <MapPin className="w-5 h-5 text-gray-400" />
                    Adresse
                  </h3>
                  <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
                    <p className="text-gray-900 dark:text-white">{client.adresse || '-'}</p>
                    <p className="text-gray-600 dark:text-gray-400">
                      {client.code_postal} {client.ville}
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default PaymentDetailPage;