"use client";

import { X, AlertTriangle } from "lucide-react";

interface CancelContractModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isCancelling: boolean;
  contractInfo: {
    contract_number?: string;
    employee_name?: string;
  };
}

export default function CancelContractModal({
  isOpen,
  onClose,
  onConfirm,
  isCancelling,
  contractInfo,
}: CancelContractModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-xl shadow-xl max-w-md w-full">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
              <AlertTriangle className="h-5 w-5 text-red-600" />
            </div>
            <h2 className="text-xl font-bold text-slate-900">
              Annuler le contrat
            </h2>
          </div>
          <button
            onClick={onClose}
            disabled={isCancelling}
            className="p-2 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
          >
            <X className="h-5 w-5 text-slate-400" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-4">
          {/* Avertissement principal */}
          <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
            <div className="text-sm text-amber-900">
              <div className="font-semibold mb-2">Action d'annulation</div>
              <div>
                Cette action va marquer le contrat comme annulé. Les données seront
                conservées mais le contrat ne sera plus traité.
              </div>
            </div>
          </div>

          {/* Informations du contrat */}
          <div className="p-4 bg-slate-50 border border-slate-200 rounded-lg">
            <div className="text-sm font-medium text-slate-900 mb-2">
              Contrat concerné
            </div>
            <div className="space-y-1 text-sm text-slate-700">
              {contractInfo.contract_number && (
                <div>
                  <span className="font-medium">N° : </span>
                  {contractInfo.contract_number}
                </div>
              )}
              {contractInfo.employee_name && (
                <div>
                  <span className="font-medium">Salarié : </span>
                  {contractInfo.employee_name}
                </div>
              )}
            </div>
          </div>

          {/* Modifications appliquées */}
          <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <div className="text-sm text-blue-900">
              <div className="font-semibold mb-2">Modifications appliquées :</div>
              <ul className="list-disc list-inside space-y-1 text-xs">
                <li>État de la demande : <strong>Annulée</strong></li>
                <li>État de la paie : <strong>Non concernée</strong></li>
                <li>DPAE : <strong>Non concernée</strong></li>
              </ul>
            </div>
          </div>

          {/* Note importante */}
          <div className="flex gap-2 p-3 bg-slate-100 border border-slate-300 rounded-lg">
            <AlertTriangle className="h-5 w-5 text-slate-600 flex-shrink-0 mt-0.5" />
            <div className="text-sm text-slate-700">
              Le contrat restera visible dans l'historique mais ne sera plus comptabilisé
              dans les statistiques actives.
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 p-6 border-t bg-slate-50">
          <button
            onClick={onClose}
            disabled={isCancelling}
            className="px-4 py-2 text-slate-700 hover:bg-slate-200 rounded-lg transition-colors font-medium disabled:opacity-50"
          >
            Fermer
          </button>
          <button
            onClick={onConfirm}
            disabled={isCancelling}
            className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isCancelling ? "Annulation..." : "Confirmer l'annulation"}
          </button>
        </div>
      </div>
    </div>
  );
}
