"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, CheckCircle, XCircle } from "lucide-react";

export interface BulkEmployeeReminderAvenantModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
  avenants: Array<{
    id: string;
    numero_avenant?: string | null;
    contract_number?: string | null;
    employee_name?: string | null;
    employee_email?: string | null;
  }>;
  progress?: Array<{
    id: string;
    status: 'pending' | 'success' | 'error';
    error?: string;
  }>;
}

export const BulkEmployeeReminderAvenantModal: React.FC<BulkEmployeeReminderAvenantModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  isLoading,
  avenants,
  progress
}) => {
  const getStatusIcon = (avenantId: string) => {
    const avenantProgress = progress?.find(p => p.id === avenantId);
    if (!avenantProgress) return null;

    switch (avenantProgress.status) {
      case 'success':
        return <CheckCircle className="size-4 text-green-600" />;
      case 'error':
        return <XCircle className="size-4 text-red-600" />;
      case 'pending':
        return <Loader2 className="size-4 text-blue-600 animate-spin" />;
      default:
        return null;
    }
  };

  const getStatusText = (avenantId: string) => {
    const avenantProgress = progress?.find(p => p.id === avenantId);
    if (!avenantProgress) return '';

    switch (avenantProgress.status) {
      case 'success':
        return 'Envoyé';
      case 'error':
        return avenantProgress.error || 'Erreur';
      case 'pending':
        return 'En cours...';
      default:
        return '';
    }
  };

  const successCount = progress?.filter(p => p.status === 'success').length || 0;
  const errorCount = progress?.filter(p => p.status === 'error').length || 0;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>Relance salarié en masse - Avenants</DialogTitle>
          <DialogDescription>
            Envoyer des emails de relance aux salariés pour signer leurs avenants
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto space-y-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <div className="text-sm font-medium text-blue-900 mb-1">
              {avenants.length} avenant(s) sélectionné(s)
            </div>
            <p className="text-sm text-blue-800">
              Un email sera envoyé à chaque salarié avec le lien de signature de son avenant.
            </p>
          </div>

          {progress && (
            <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
              <div className="text-sm font-medium text-slate-900 mb-2">Progression</div>
              <div className="space-y-1 text-sm">
                <div className="flex items-center gap-2">
                  <CheckCircle className="size-4 text-green-600" />
                  <span className="text-slate-700">Réussis : <span className="font-medium">{successCount}</span></span>
                </div>
                <div className="flex items-center gap-2">
                  <XCircle className="size-4 text-red-600" />
                  <span className="text-slate-700">Échecs : <span className="font-medium">{errorCount}</span></span>
                </div>
              </div>
            </div>
          )}

          <div className="border rounded-lg overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 border-b">
                <tr>
                  <th className="px-3 py-2 text-left text-xs font-medium text-slate-600">N° Avenant</th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-slate-600">Salarié</th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-slate-600">Email</th>
                  {progress && (
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-600">Statut</th>
                  )}
                </tr>
              </thead>
              <tbody className="divide-y">
                {avenants.map((avenant) => (
                  <tr key={avenant.id} className="hover:bg-slate-50">
                    <td className="px-3 py-2 font-medium">
                      {avenant.numero_avenant || avenant.contract_number || 'N/A'}
                    </td>
                    <td className="px-3 py-2">{avenant.employee_name || 'Inconnu'}</td>
                    <td className="px-3 py-2 text-slate-600">
                      {avenant.employee_email || 'N/A'}
                    </td>
                    {progress && (
                      <td className="px-3 py-2">
                        <div className="flex items-center gap-2">
                          {getStatusIcon(avenant.id)}
                          <span className="text-xs">{getStatusText(avenant.id)}</span>
                        </div>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <DialogFooter className="border-t pt-4">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isLoading}
          >
            {isLoading ? 'Fermer' : 'Annuler'}
          </Button>
          {!progress && (
            <Button
              onClick={onConfirm}
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 size-4 animate-spin" />
                  Envoi en cours...
                </>
              ) : (
                <>
                  <Mail className="mr-2 size-4" />
                  Envoyer les relances ({avenants.length})
                </>
              )}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
