"use client";

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

export interface EmployeeReminderAvenantModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
  avenantInfo: {
    numero_avenant?: string | null;
    employee_name?: string | null;
  } | null;
}

export const EmployeeReminderAvenantModal: React.FC<EmployeeReminderAvenantModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  isLoading,
  avenantInfo
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Relance salarié - Avenant</DialogTitle>
          <DialogDescription>
            Envoyer un email de relance au salarié pour signer l'avenant
          </DialogDescription>
        </DialogHeader>

        <div className="py-4 space-y-3">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <div className="text-sm font-medium text-blue-900 mb-2">Informations de l'avenant</div>
            <div className="space-y-1 text-sm text-blue-800">
              <div><span className="font-medium">N° Avenant :</span> {avenantInfo?.numero_avenant || 'N/A'}</div>
              <div><span className="font-medium">Salarié :</span> {avenantInfo?.employee_name || 'Inconnu'}</div>
            </div>
          </div>

          <p className="text-sm text-slate-600">
            Un email sera envoyé au salarié avec le lien de signature de l'avenant.
          </p>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isLoading}
          >
            Annuler
          </Button>
          <Button
            onClick={onConfirm}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 size-4 animate-spin" />
                Envoi en cours...
              </>
            ) : (
              <>
                <Mail className="mr-2 size-4" />
                Envoyer la relance
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
