// components/staff/salary-transfers/NotifyPaymentSentModal.tsx
"use client";

import React from "react";
import { X, Mail, AlertTriangle, Building2, Calendar, Euro, CheckCircle } from "lucide-react";

type NotifyPaymentSentModalProps = {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  transfer: {
    id: string;
    num_appel?: string | null;
    period_month?: string | null;
    period_label?: string | null;
    total_net?: string | null;
    client_wire_received_at?: string | null;
  };
  organizationName?: string;
  clientEmail?: string;
  ccEmails?: string[];
};

function formatDate(dateString: string | null | undefined): string {
  if (!dateString) return "—";
  try {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  } catch {
    return "—";
  }
}

function formatAmount(amount: string | number | null | undefined): string {
  if (!amount) return "—";
  try {
    const num = typeof amount === 'string' ? parseFloat(amount) : amount;
    return new Intl.NumberFormat('fr-FR', {
      style: 'currency',
      currency: 'EUR'
    }).format(num);
  } catch {
    return String(amount) || "—";
  }
}

export default function NotifyPaymentSentModal({
  isOpen,
  onClose,
  onConfirm,
  transfer,
  organizationName,
  clientEmail,
  ccEmails = []
}: NotifyPaymentSentModalProps) {
  if (!isOpen) return null;

  // Debug logs
  console.log("[NotifyPaymentSentModal] Props reçues:", {
    clientEmail,
    ccEmails,
    organizationName,
    transferId: transfer.id
  });

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl">
        {/* Header */}
        <div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
              <CheckCircle className="w-5 h-5 text-green-600" />
            </div>
            <div>
              <h2 className="text-xl font-semibold text-slate-900">Notification de paiement effectué</h2>
              <p className="text-sm text-slate-500">Appel de fonds n°{transfer.num_appel || transfer.id}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        <div className="px-6 py-6 space-y-6">
          {/* Warning */}
          <div className="p-4 bg-green-50 border border-green-200 rounded-xl flex gap-3">
            <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
            <div className="text-sm text-green-900">
              <p className="font-semibold mb-1">Confirmation de paiement</p>
              <p>
                Vous êtes sur le point d'envoyer un email au client pour confirmer que :
              </p>
              <ul className="list-disc list-inside mt-2 space-y-1 ml-2">
                <li>Nous avons bien reçu son virement</li>
                <li>Nous avons procédé au paiement des salaires auprès des salariés</li>
              </ul>
            </div>
          </div>

          {/* Informations du virement */}
          <div className="space-y-4">
            <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
              Détails du paiement
            </h3>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                <Building2 className="w-5 h-5 text-slate-500 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <div className="text-xs text-slate-500 mb-1">Client</div>
                  <div className="text-sm font-medium text-slate-900 truncate">
                    {organizationName || "—"}
                  </div>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                <Calendar className="w-5 h-5 text-slate-500 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <div className="text-xs text-slate-500 mb-1">Période</div>
                  <div className="text-sm font-medium text-slate-900">
                    {transfer.period_label || formatDate(transfer.period_month)}
                  </div>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                <Euro className="w-5 h-5 text-slate-500 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <div className="text-xs text-slate-500 mb-1">Montant versé</div>
                  <div className="text-sm font-medium text-slate-900">
                    {formatAmount(transfer.total_net)}
                  </div>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                <CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <div className="text-xs text-green-700 mb-1">Date de paiement</div>
                  <div className="text-sm font-medium text-green-900">
                    {formatDate(transfer.client_wire_received_at)}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Destinataires */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
              Destinataires de l'email
            </h3>
            
            <div className="p-4 bg-blue-50 border border-blue-200 rounded-xl space-y-3">
              {clientEmail && (
                <div>
                  <div className="text-xs text-blue-700 font-medium mb-1">À :</div>
                  <div className="flex items-center gap-2">
                    <Mail className="w-4 h-4 text-blue-600" />
                    <span className="text-sm text-blue-900 font-medium">{clientEmail}</span>
                  </div>
                </div>
              )}
              
              {ccEmails && ccEmails.length > 0 && (
                <div>
                  <div className="text-xs text-blue-700 font-medium mb-1">CC :</div>
                  <div className="space-y-1">
                    {ccEmails.map((email, idx) => (
                      <div key={idx} className="flex items-center gap-2">
                        <Mail className="w-4 h-4 text-blue-600" />
                        <span className="text-sm text-blue-900">{email}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {!clientEmail && (!ccEmails || ccEmails.length === 0) && (
                <div className="text-sm text-slate-600 italic">
                  Aucune adresse email configurée pour ce client
                </div>
              )}
            </div>
          </div>

          {/* Contenu de l'email */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
              Contenu de l'email
            </h3>
            
            <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 space-y-2">
              <p>
                L'email contiendra :
              </p>
              <ul className="list-disc list-inside space-y-1 ml-2 text-slate-600">
                <li>La confirmation de réception du virement</li>
                <li>La confirmation du paiement des salaires aux salariés</li>
                <li>La période concernée</li>
                <li>Le montant total versé</li>
                <li>La date de paiement</li>
                <li>Un lien vers l'Espace Paie</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="sticky bottom-0 bg-white border-t px-6 py-4 flex justify-end gap-3">
          <button
            onClick={onClose}
            className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            Annuler
          </button>
          <button
            onClick={onConfirm}
            className="px-5 py-2.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"
          >
            <CheckCircle className="w-4 h-4" />
            Envoyer la notification
          </button>
        </div>
      </div>
    </div>
  );
}
