"use client";

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

interface SaveConfirmationModalProps {
  isOpen: boolean;
  onClose: () => void;
  missingItems: string[];
}

export function SaveConfirmationModal({ 
  isOpen, 
  onClose, 
  missingItems 
}: SaveConfirmationModalProps) {
  if (!isOpen) return null;

  const isComplete = missingItems.length === 0;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
        {/* Header */}
        <div className={`p-6 ${isComplete ? 'bg-green-50' : 'bg-blue-50'}`}>
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              {isComplete ? (
                <div className="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                  <CheckCircle className="h-6 w-6 text-green-600" />
                </div>
              ) : (
                <div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                  <AlertTriangle className="h-6 w-6 text-blue-600" />
                </div>
              )}
              <div>
                <h2 className="text-xl font-semibold text-gray-900">
                  {isComplete ? 'Dossier complet !' : 'Modifications enregistrées'}
                </h2>
                <p className="text-sm text-gray-600 mt-1">
                  {isComplete 
                    ? 'Tous les éléments requis ont été fournis'
                    : 'Vos données ont été sauvegardées avec succès'
                  }
                </p>
              </div>
            </div>
            <button
              onClick={onClose}
              className="ml-4 p-2 hover:bg-gray-200 rounded-lg transition-colors flex-shrink-0"
              aria-label="Fermer"
            >
              <X className="h-5 w-5 text-gray-500" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="p-6">
          {isComplete ? (
            <div className="space-y-4">
              <p className="text-gray-700">
                Merci d'avoir complété votre dossier ! Toutes les informations nécessaires ont été transmises.
              </p>
              <p className="text-gray-700">
                Vous pouvez revenir sur cette page à tout moment via le lien qui vous a été envoyé pour consulter ou modifier vos informations.
              </p>
              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                <p className="text-sm text-green-800">
                  <strong>✓ Dossier complet</strong> - Nous avons toutes les informations nécessaires pour traiter votre embauche.
                </p>
              </div>
            </div>
          ) : (
            <div className="space-y-4">
              <p className="text-gray-700">
                Vous pouvez revenir sur cette page à tout moment via le lien qui vous a été envoyé pour compléter les informations manquantes.
              </p>
              
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                <h3 className="font-semibold text-amber-900 mb-2 flex items-center gap-2">
                  <AlertTriangle className="h-4 w-4" />
                  Éléments manquants
                </h3>
                <ul className="space-y-1.5">
                  {missingItems.map((item, index) => (
                    <li key={index} className="text-sm text-amber-800 flex items-start gap-2">
                      <span className="text-amber-600 mt-0.5">•</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <p className="text-sm text-gray-600">
                Ces informations sont nécessaires pour finaliser votre dossier d'embauche.
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 bg-gray-50 border-t flex justify-end">
          <button
            onClick={onClose}
            className="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-lg font-medium transition-colors"
          >
            J'ai compris
          </button>
        </div>
      </div>
    </div>
  );
}