import React, { useState } from 'react';
import FormModal, { FormField, Textarea } from '@/components/FormModal';
import { toast } from '@/components/ui/use-toast';
import { Mail, AlertCircle } from 'lucide-react';
import { useSignature } from '@/contexts/SignatureContext';

const SignatureReminderModal = ({ isOpen, onClose, signature }) => {
  const { sendReminder } = useSignature();
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState(
    "Bonjour,\n\nSauf erreur de notre part, nous sommes toujours en attente de votre signature pour le document référencé.\n\nPouvez-vous procéder à la signature dès que possible ?\n\nCordialement,"
  );

  const handleSend = async () => {
    setLoading(true);
    const success = await sendReminder(signature.id);
    setLoading(false);

    if (success) {
      toast({
        title: "Relance envoyée",
        description: `Un email de rappel a été envoyé à ${signature.signerEmail}`,
        variant: "success"
      });
      onClose();
    } else {
      toast({
        title: "Erreur",
        description: "Impossible d'envoyer la relance.",
        variant: "destructive"
      });
    }
  };

  if (!signature) return null;

  return (
    <FormModal
      isOpen={isOpen}
      onClose={onClose}
      title="Relancer la signature"
      submitLabel="Envoyer la relance"
      onSubmit={handleSend}
      loading={loading}
    >
      <div className="space-y-6">
        <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl flex items-start gap-3">
          <Mail className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
          <div>
            <h4 className="font-semibold text-blue-900 dark:text-blue-200">Détails de l'envoi</h4>
            <ul className="text-sm text-blue-800 dark:text-blue-300 mt-1 space-y-1">
              <li><strong>Document :</strong> {signature.documentType.toUpperCase()} {signature.documentNumber}</li>
              <li><strong>Client :</strong> {signature.clientName}</li>
              <li><strong>Destinataire :</strong> {signature.signerEmail}</li>
              <li><strong>Relances déjà effectuées :</strong> {signature.remindersSent} / 3</li>
            </ul>
          </div>
        </div>

        {signature.remindersSent >= 3 && (
          <div className="bg-orange-50 dark:bg-orange-900/20 p-4 rounded-xl flex items-center gap-3 text-orange-800 dark:text-orange-200">
            <AlertCircle className="w-5 h-5" />
            <p className="text-sm">Attention : Vous avez déjà atteint le nombre recommandé de relances.</p>
          </div>
        )}

        <FormField label="Message personnalisé">
          <Textarea 
            rows={6}
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
        </FormField>
      </div>
    </FormModal>
  );
};

export default SignatureReminderModal;