import React from 'react';
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Send, AlertTriangle } from "lucide-react";

interface EmployeeReminderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
  contractData: {
    reference?: string;
    employee_name?: string;
    employee_email?: string;
  };
}

export const EmployeeReminderModal: React.FC<EmployeeReminderModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  isLoading,
  contractData
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Send className="size-5 text-indigo-600" />
            Relancer le salarié
          </DialogTitle>
          <DialogDescription>
            Confirmer l'envoi d'un email de rappel pour la signature du contrat.
          </DialogDescription>
        </DialogHeader>

        <div className="py-4">
          <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
            <div className="flex items-start gap-3">
              <AlertTriangle className="size-5 text-indigo-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-indigo-800">
                <p className="font-medium mb-1">Action de relance</p>
                <p>
                  Un email de rappel va être envoyé au salarié pour l'inviter 
                  à signer le contrat de travail.
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-3 text-sm">
            <div className="grid grid-cols-3 gap-2">
              <span className="font-medium text-gray-600">Contrat :</span>
              <span className="col-span-2">{contractData.reference || 'N/A'}</span>
            </div>
            
            <div className="grid grid-cols-3 gap-2">
              <span className="font-medium text-gray-600">Salarié :</span>
              <span className="col-span-2">{contractData.employee_name || 'N/A'}</span>
            </div>
            
            <div className="grid grid-cols-3 gap-2">
              <span className="font-medium text-gray-600">Email salarié :</span>
              <span className="col-span-2 font-mono text-xs bg-gray-100 px-2 py-1 rounded">
                {contractData.employee_email || 'N/A'}
              </span>
            </div>
          </div>
        </div>

        <DialogFooter className="flex gap-2">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isLoading}
          >
            Annuler
          </Button>
          <Button
            onClick={onConfirm}
            disabled={isLoading}
            className="bg-indigo-600 hover:bg-indigo-700 text-white"
          >
            {isLoading ? (
              <>
                <Send className="size-4 mr-2 animate-pulse" />
                Envoi en cours...
              </>
            ) : (
              <>
                <Send className="size-4 mr-2" />
                Envoyer la relance
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
