// components/staff/contracts/ESignConfirmModal.tsx
"use client";

import React, { useState } from "react";
import { X, FileSignature, AlertTriangle, Loader2 } from "lucide-react";

type ESignConfirmModalProps = {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (sendNotification: boolean) => void;
  contractReference?: string;
  employeeName?: string;
  employeeEmail?: string;
  employerEmail?: string;
  isLoading?: boolean;
};

export default function ESignConfirmModal({
  isOpen,
  onClose,
  onConfirm,
  contractReference,
  employeeName,
  employeeEmail,
  employerEmail,
  isLoading = false
}: ESignConfirmModalProps) {
  const [sendNotification, setSendNotification] = useState(true);
  
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 w-full max-w-md">
        {/* Header */}
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <FileSignature className="size-5 text-indigo-600" />
            <h2 className="text-lg font-semibold">Confirmer l'envoi de la signature</h2>
          </div>
          {!isLoading && (
            <button
              onClick={onClose}
              className="p-1 hover:bg-gray-100 rounded"
            >
              <X className="size-5" />
            </button>
          )}
        </div>

        {/* Loading State */}
        {isLoading && (
          <div className="mb-4 p-4 bg-indigo-50 border border-indigo-200 rounded-lg flex items-center gap-3">
            <Loader2 className="size-5 text-indigo-600 animate-spin flex-shrink-0" />
            <div className="text-sm text-indigo-800">
              <p className="font-medium">Création de la signature en cours...</p>
              <p className="text-xs mt-1">Veuillez patienter, cette opération peut prendre quelques secondes.</p>
            </div>
          </div>
        )}

        {/* Warning Message */}
        <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex gap-3">
          <AlertTriangle className="size-5 text-amber-600 flex-shrink-0 mt-0.5" />
          <div className="text-sm text-amber-800">
            <p className="font-medium mb-1">Attention</p>
            <p>
              Vous êtes sur le point de créer la signature électronique pour ce contrat.
            </p>
          </div>
        </div>

        {/* Contract Info */}
        {(contractReference || employeeName || employeeEmail || employerEmail) && (
          <div className="mb-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
            <p className="text-sm font-medium text-gray-700 mb-2">Contrat :</p>
            {contractReference && (
              <p className="text-sm text-gray-600">
                <span className="font-medium">Référence :</span> {contractReference}
              </p>
            )}
            {employeeName && (
              <p className="text-sm text-gray-600">
                <span className="font-medium">Salarié :</span> {employeeName}
              </p>
            )}
            {employeeEmail && (
              <p className="text-sm text-gray-600">
                <span className="font-medium">Email salarié :</span> <span className="font-mono text-xs bg-white px-2 py-0.5 rounded border">{employeeEmail}</span>
              </p>
            )}
            {employerEmail && (
              <p className="text-sm text-gray-600">
                <span className="font-medium">Email employeur :</span> <span className="font-mono text-xs bg-white px-2 py-0.5 rounded border">{employerEmail}</span>
              </p>
            )}
          </div>
        )}

        {/* Info */}
        <div className="mb-4 text-sm text-gray-600 space-y-2">
          <p>Cette action va :</p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>Créer une demande de signature électronique dans DocuSeal</li>
            <li>Envoyer un email de signature à l'employeur et au salarié</li>
            {sendNotification && <li className="text-indigo-600 font-medium">Envoyer un email récapitulatif au client</li>}
          </ul>
          <p className="mt-3 text-xs italic text-gray-500">
            Note : L'email employeur affiché ci-dessus est celui utilisé pour les signatures électroniques (email_signature), qui peut être différent de l'email de contact habituel.
          </p>
        </div>

        {/* Option: Envoyer notification */}
        <div className="mb-6 p-3 bg-gray-50 border border-gray-200 rounded-lg">
          <label className="flex items-start gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={sendNotification}
              onChange={(e) => setSendNotification(e.target.checked)}
              disabled={isLoading}
              className="mt-0.5 size-4 text-indigo-600 rounded focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
            />
            <div className="flex-1">
              <span className="text-sm font-medium text-gray-900">
                Envoyer un email récapitulatif au client
              </span>
              <p className="text-xs text-gray-500 mt-1">
                Si décoché, la signature sera créée dans DocuSeal mais aucun email de notification ne sera envoyé à l'employeur (l'employeur et le salarié recevront quand même leurs emails de signature individuels).
              </p>
            </div>
          </label>
        </div>

        {/* Actions */}
        <div className="flex justify-end gap-2">
          <button
            onClick={onClose}
            disabled={isLoading}
            className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Annuler
          </button>
          <button
            onClick={() => onConfirm(sendNotification)}
            disabled={isLoading}
            className="px-4 py-2 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            {isLoading && <Loader2 className="size-4 animate-spin" />}
            {isLoading ? "Traitement en cours..." : "Confirmer et envoyer"}
          </button>
        </div>
      </div>
    </div>
  );
}
