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

export interface BulkEmployeeReminderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
  isLoadingEmails?: boolean;
  contracts: Array<{
    id: string;
    reference?: string | null;
    contract_number?: string | null;
    employee_name?: string | null;
    employee_email?: string | null;
  }>;
}

export const BulkEmployeeReminderModal: React.FC<BulkEmployeeReminderModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  isLoading,
  isLoadingEmails,
  contracts
}) => {
  const missingEmails = contracts.filter(c => !c.employee_email).length;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[640px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Mail className="size-5 text-indigo-600" />
            Confirmer la relance des salariés
          </DialogTitle>
          <DialogDescription>
            Un email de rappel sera envoyé à chaque salarié listé ci-dessous.
          </DialogDescription>
        </DialogHeader>

        {missingEmails > 0 && (
          <div className="mb-3 rounded border border-amber-200 bg-amber-50 p-3 text-amber-800 text-sm flex items-start gap-2">
            <AlertTriangle className="size-4 mt-0.5 flex-shrink-0" />
            <div>
              {missingEmails} salarié{missingEmails > 1 ? 's' : ''} sans email. Ces relances ne seront pas envoyées.
            </div>
          </div>
        )}

        <div className="max-h-[50vh] overflow-auto rounded border">
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-600">
              <tr>
                <th className="text-left px-3 py-2 w-28">Référence</th>
                <th className="text-left px-3 py-2">Salarié</th>
                <th className="text-left px-3 py-2">Email</th>
              </tr>
            </thead>
            <tbody>
              {contracts.map(c => (
                <tr key={c.id} className="border-t">
                  <td className="px-3 py-2 font-mono text-xs">{c.reference || c.contract_number || '—'}</td>
                  <td className="px-3 py-2">{c.employee_name || '—'}</td>
                  <td className="px-3 py-2">
                    {isLoadingEmails && !c.employee_email ? (
                      <span className="text-slate-500">Recherche…</span>
                    ) : c.employee_email ? (
                      <span className="font-mono text-xs bg-gray-100 px-2 py-1 rounded">{c.employee_email}</span>
                    ) : (
                      <span className="text-rose-600">Email introuvable</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </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 ? 'Envoi en cours…' : `Envoyer ${contracts.length} relance${contracts.length > 1 ? 's' : ''}`}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default BulkEmployeeReminderModal;
