'use client';

import { useState, useEffect } from 'react';
import { SmtpSettings } 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 { Switch } from '@/components/ui/switch';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Mail, Eye, EyeOff, TestTube, Save, CheckCircle, Send } from 'lucide-react';
import SendTestEmailModal from './SendTestEmailModal';

interface SmtpSettingsFormProps {
  onSave?: () => void;
}

export default function SmtpSettingsForm({ onSave }: SmtpSettingsFormProps) {
  const [settings, setSettings] = useState<SmtpSettings>({
    host: '',
    port: 587,
    username: '',
    password: '',
    secure: true,
    from_email: '',
    from_name: ''
  });
  
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [showTestEmailModal, setShowTestEmailModal] = useState(false);
  const [passwordValue, setPasswordValue] = useState('');

  useEffect(() => {
    loadSettings();
  }, []);

  const loadSettings = async () => {
    try {
      setLoading(true);
      const smtpSettings = await settingsService.getSmtpSettings();
      setSettings(smtpSettings);
      // Ne pas stocker le mot de passe en clair dans l'état local
      setPasswordValue('');
    } catch (error) {
      console.error('Erreur lors du chargement des paramètres SMTP:', error);
      setMessage({ type: 'error', text: 'Erreur lors du chargement des paramètres' });
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (field: keyof SmtpSettings, value: string | number | boolean) => {
    setSettings(prev => ({
      ...prev,
      [field]: value
    }));
    
    // Si c'est le mot de passe, mettre à jour aussi l'état local
    if (field === 'password') {
      setPasswordValue(value as string);
    }
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      setMessage(null);
      
      // Utiliser le mot de passe saisi si disponible, sinon utiliser celui des settings
      const settingsToSave = {
        ...settings,
        password: passwordValue || settings.password
      };
      
      await settingsService.setSmtpSettings(settingsToSave);
      
      setMessage({ type: 'success', text: 'Paramètres SMTP sauvegardés avec succès' });
      onSave?.();
      
      // Effacer le message après 3 secondes
      setTimeout(() => setMessage(null), 3000);
    } catch (error) {
      console.error('Erreur lors de la sauvegarde:', error);
      setMessage({ type: 'error', text: 'Erreur lors de la sauvegarde des paramètres' });
    } finally {
      setSaving(false);
    }
  };

  const handleTestConnection = async () => {
    try {
      setTesting(true);
      setMessage(null);
      
      // Utiliser le mot de passe saisi si disponible
      const settingsToTest = {
        ...settings,
        password: passwordValue || settings.password
      };
      
      const result = await settingsService.testSmtpConnection(settingsToTest);
      
      if (result.success) {
        // Sauvegarder automatiquement les paramètres si le test réussit
        try {
          await settingsService.setSmtpSettings(settingsToTest);
          setMessage({ type: 'success', text: 'Test de connexion SMTP réussi ! Les paramètres ont été sauvegardés automatiquement.' });
          onSave?.(); // Appeler le callback de sauvegarde
        } catch (saveError) {
          console.error('Erreur lors de la sauvegarde automatique:', saveError);
          setMessage({ type: 'success', text: 'Test de connexion SMTP réussi ! (Erreur lors de la sauvegarde automatique)' });
        }
      } else {
        setMessage({ type: 'error', text: `Test de connexion échoué : ${result.error}` });
      }
    } catch (error) {
      console.error('Erreur lors du test:', error);
      setMessage({ type: 'error', text: 'Erreur lors du test de connexion' });
    } finally {
      setTesting(false);
    }
  };

  if (loading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-center h-32">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-slate-900 dark:border-slate-100"></div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card>
      <CardHeader>
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
            <Mail className="w-5 h-5 text-green-600 dark:text-green-300" />
          </div>
          <div>
            <CardTitle className="text-xl">Configuration Email</CardTitle>
            <CardDescription>
              Paramètres SMTP pour l'envoi d'emails automatiques
            </CardDescription>
          </div>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-6">
        {message && (
          <Alert className={message.type === 'success' ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
            <AlertDescription className={message.type === 'success' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
              {message.text}
            </AlertDescription>
          </Alert>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Serveur SMTP */}
          <div className="space-y-2">
            <Label htmlFor="smtp-host">Serveur SMTP *</Label>
            <Input
              id="smtp-host"
              type="text"
              placeholder="smtp.gmail.com"
              value={settings.host}
              onChange={(e) => handleInputChange('host', e.target.value)}
            />
            <div className="text-xs text-slate-500 dark:text-slate-400">
              Exemples : smtp.gmail.com, smtp.office365.com, mail.infomaniak.com
            </div>
          </div>

          {/* Port SMTP */}
          <div className="space-y-2">
            <Label htmlFor="smtp-port">Port SMTP *</Label>
            <Input
              id="smtp-port"
              type="number"
              placeholder="587"
              value={settings.port}
              onChange={(e) => handleInputChange('port', parseInt(e.target.value) || 587)}
            />
            <div className="text-xs text-slate-500 dark:text-slate-400">
              Ports courants : 587 (TLS), 465 (SSL), 25 (non sécurisé)
            </div>
          </div>

          {/* Nom d'utilisateur */}
          <div className="space-y-2">
            <Label htmlFor="smtp-username">Nom d'utilisateur *</Label>
            <Input
              id="smtp-username"
              type="text"
              placeholder="votre-email@gmail.com"
              value={settings.username}
              onChange={(e) => handleInputChange('username', e.target.value)}
            />
          </div>

          {/* Mot de passe */}
          <div className="space-y-2">
            <Label htmlFor="smtp-password">Mot de passe *</Label>
            <div className="relative">
              <Input
                id="smtp-password"
                type={showPassword ? 'text' : 'password'}
                placeholder="••••••••"
                value={showPassword ? passwordValue : (passwordValue ? '••••••••' : '')}
                onChange={(e) => handleInputChange('password', e.target.value)}
              />
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4" />
                ) : (
                  <Eye className="w-4 h-4" />
                )}
              </Button>
            </div>
            {passwordValue && (
              <div className="text-xs text-slate-500 dark:text-slate-400">
                Mot de passe saisi. Cliquez sur l'œil pour le voir.
              </div>
            )}
          </div>

          {/* Email d'expédition */}
          <div className="space-y-2">
            <Label htmlFor="smtp-from-email">Email d'expédition *</Label>
            <Input
              id="smtp-from-email"
              type="email"
              placeholder="noreply@votre-domaine.com"
              value={settings.from_email}
              onChange={(e) => handleInputChange('from_email', e.target.value)}
            />
          </div>

          {/* Nom d'expédition */}
          <div className="space-y-2">
            <Label htmlFor="smtp-from-name">Nom d'expédition</Label>
            <Input
              id="smtp-from-name"
              type="text"
              placeholder="Mes Budgets Participatifs"
              value={settings.from_name}
              onChange={(e) => handleInputChange('from_name', e.target.value)}
            />
          </div>
        </div>

        {/* Connexion sécurisée */}
        <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
          <div className="flex-1">
            <Label htmlFor="smtp-secure" className="text-base font-medium">
              Connexion sécurisée (SSL/TLS)
            </Label>
            <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
              Activez cette option pour utiliser une connexion chiffrée SSL/TLS
            </p>
          </div>
          <Switch
            id="smtp-secure"
            checked={settings.secure}
            onCheckedChange={(checked) => handleInputChange('secure', checked)}
            className="ml-4"
          />
        </div>

        {/* Boutons d'action */}
        <div className="flex flex-col sm:flex-row gap-3 pt-4">
          <Button
            onClick={handleTestConnection}
            disabled={testing || !settings.host || !settings.username || !settings.password}
            variant="outline"
            className="flex items-center gap-2"
          >
            {testing ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
                Test en cours...
              </>
            ) : (
              <>
                <TestTube className="w-4 h-4" />
                Tester la connexion
              </>
            )}
          </Button>
          
          <Button
            onClick={() => setShowTestEmailModal(true)}
            disabled={!settings.host || !settings.username || (!passwordValue && !settings.password) || !settings.from_email}
            variant="outline"
            className="flex items-center gap-2"
          >
            <Send className="w-4 h-4" />
            Envoyer un email de test
          </Button>
          
          <Button
            onClick={handleSave}
            disabled={saving}
            className="flex items-center gap-2"
          >
            {saving ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                Sauvegarde...
              </>
            ) : (
              <>
                <Save className="w-4 h-4" />
                Sauvegarder
              </>
            )}
          </Button>
        </div>

        {/* Informations de sécurité */}
        <div className="mt-6 p-4 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">
            🔒 Sécurité
          </h4>
          <p className="text-sm text-blue-700 dark:text-blue-300">
            Le mot de passe SMTP est automatiquement chiffré avant d'être stocké dans la base de données. 
            Seules les personnes ayant accès à la clé de chiffrement peuvent le déchiffrer.
          </p>
        </div>

        {/* Aide pour les configurations SMTP populaires */}
        <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg">
          <h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
            💡 Configurations SMTP populaires
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
            <div>
              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Gmail</h5>
              <div className="text-slate-600 dark:text-slate-400 space-y-1">
                <div>Serveur : smtp.gmail.com</div>
                <div>Port : 587</div>
                <div>SSL/TLS : Activé</div>
              </div>
            </div>
            <div>
              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Outlook/Hotmail</h5>
              <div className="text-slate-600 dark:text-slate-400 space-y-1">
                <div>Serveur : smtp-mail.outlook.com</div>
                <div>Port : 587</div>
                <div>SSL/TLS : Activé</div>
              </div>
            </div>
            <div>
              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Yahoo</h5>
              <div className="text-slate-600 dark:text-slate-400 space-y-1">
                <div>Serveur : smtp.mail.yahoo.com</div>
                <div>Port : 587</div>
                <div>SSL/TLS : Activé</div>
              </div>
            </div>
            <div>
              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Infomaniak</h5>
              <div className="text-slate-600 dark:text-slate-400 space-y-1">
                <div>Serveur : mail.infomaniak.com</div>
                <div>Port : 587</div>
                <div>SSL/TLS : Activé</div>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>

    {/* Modal d'envoi d'email de test */}
    <SendTestEmailModal
      isOpen={showTestEmailModal}
      onClose={() => setShowTestEmailModal(false)}
      smtpSettings={{
        ...settings,
        password: passwordValue || settings.password
      }}
    />
  </>
  );
}