'use client';

import { useState, useEffect } from 'react';
import { Participant, Campaign } from '@/types';
import { settingsService } from '@/lib/services';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Mail, Send, CheckCircle, XCircle } from 'lucide-react';

interface SendParticipantEmailModalProps {
  isOpen: boolean;
  onClose: () => void;
  participant: Participant;
  campaign: Campaign;
}

export default function SendParticipantEmailModal({ 
  isOpen, 
  onClose, 
  participant, 
  campaign 
}: SendParticipantEmailModalProps) {
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [sending, setSending] = useState(false);
  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);

  // Générer le lien de vote (utiliser uniquement le lien court)
  const voteUrl = participant.short_id 
    ? `${typeof window !== 'undefined' ? window.location.origin : ''}/v/${participant.short_id}`
    : `${typeof window !== 'undefined' ? window.location.origin : ''}/v/EN_ATTENTE`;

  // Initialiser le message par défaut quand le modal s'ouvre
  useEffect(() => {
    if (isOpen && campaign && participant) {
      setSubject(`Votez pour la campagne "${campaign.title}"`);
      setMessage(`Bonjour ${participant.first_name},

Vous êtes invité(e) à participer au vote pour la campagne "${campaign.title}".

${campaign.description}

Pour voter, cliquez sur le lien suivant :
${voteUrl}

Vous disposez d'un budget de ${campaign.budget_per_user}€ à répartir entre les propositions selon vos préférences.

Merci de votre participation !

Cordialement,
L'équipe Mes Budgets Participatifs`);
    }
  }, [isOpen, campaign, participant]);

  const handleSendEmail = async () => {
    if (!subject.trim() || !message.trim()) {
      setResult({ success: false, message: 'Veuillez remplir le sujet et le message' });
      return;
    }

    try {
      setSending(true);
      setResult(null);

      // Récupérer les paramètres SMTP
      const smtpSettings = await settingsService.getSmtpSettings();
      
      if (!smtpSettings.host || !smtpSettings.username || !smtpSettings.password) {
        setResult({ success: false, message: 'Configuration SMTP manquante. Veuillez configurer les paramètres email dans les paramètres.' });
        return;
      }

      // Envoyer l'email via l'API
      const response = await fetch('/api/send-participant-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          smtpSettings,
          toEmail: participant.email,
          toName: `${participant.first_name} ${participant.last_name}`,
          subject: subject.trim(),
          message: message.trim(),
          campaignTitle: campaign.title,
          voteUrl
        }),
      });

      const result = await response.json();

      if (result.success) {
        setResult({ success: true, message: 'Email envoyé avec succès !' });
        // Vider les champs après succès
        setTimeout(() => {
          setSubject('');
          setMessage('');
          onClose();
        }, 2000);
      } else {
        setResult({ success: false, message: result.error || 'Erreur lors de l\'envoi de l\'email' });
      }
    } catch (error) {
      setResult({ success: false, message: 'Erreur inattendue lors de l\'envoi' });
    } finally {
      setSending(false);
    }
  };

  const handleClose = () => {
    setSubject('');
    setMessage('');
    setResult(null);
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle className="flex items-center gap-2">
            <Mail className="w-5 h-5" />
            Envoyer un email à {participant.first_name} {participant.last_name}
          </DialogTitle>
          <DialogDescription>
            Envoyez un email personnalisé à ce participant avec le lien de vote.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 flex-1 overflow-y-auto min-h-0">
          {/* Informations du participant */}
          <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
            <h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-2">
              Destinataire :
            </h4>
            <div className="text-sm text-slate-600 dark:text-slate-300">
              <div><strong>Nom :</strong> {participant.first_name} {participant.last_name}</div>
              <div><strong>Email :</strong> {participant.email}</div>
              <div><strong>Campagne :</strong> {campaign.title}</div>
            </div>
          </div>

          {/* Sujet */}
          <div className="space-y-2">
            <Label htmlFor="email-subject">Sujet *</Label>
            <Input
              id="email-subject"
              type="text"
              placeholder="Sujet de l'email"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              disabled={sending}
            />
          </div>

          {/* Message */}
          <div className="space-y-2">
            <Label htmlFor="email-message">Message *</Label>
            <Textarea
              id="email-message"
              placeholder="Votre message..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={8}
              disabled={sending}
              className="font-mono text-sm resize-none"
            />
            <div className="text-xs text-slate-500 dark:text-slate-400">
              Le lien de vote sera automatiquement inclus dans votre message.
            </div>
          </div>

          {/* Aperçu du lien */}
          <div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
              Lien de vote qui sera inclus :
            </h4>
            <div className="text-xs text-blue-700 dark:text-blue-300 font-mono break-all">
              {voteUrl}
            </div>
          </div>

          {/* Résultat */}
          {result && (
            <Alert className={result.success ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
              {result.success ? (
                <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
              ) : (
                <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
              )}
              <AlertDescription className={result.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
                {result.message}
              </AlertDescription>
            </Alert>
          )}
        </div>

        <DialogFooter className="flex flex-col sm:flex-row gap-2 flex-shrink-0 pt-4 border-t border-slate-200 dark:border-slate-700">
          <Button
            variant="outline"
            onClick={handleClose}
            disabled={sending}
          >
            Annuler
          </Button>
          <Button
            onClick={handleSendEmail}
            disabled={sending || !subject.trim() || !message.trim()}
            className="flex items-center gap-2"
          >
            {sending ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                Envoi en cours...
              </>
            ) : (
              <>
                <Send className="w-4 h-4" />
                Envoyer l'email
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}