{% extends "base.html" %}

{% block title %}Configuration Email - Gestion Scolaire{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <a href="{{ url_for('config.index') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
                ← Retour à la configuration
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Configuration Email</h1>
            <p class="text-gray-600">Configurez les paramètres SMTP pour l'envoi des bilans d'évaluation</p>
        </div>
    </div>

    <!-- Formulaire de configuration email -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Paramètres SMTP</h2>
            <p class="text-sm text-gray-600 mt-1">
                Configurez votre serveur SMTP pour envoyer les bilans d'évaluation par email
            </p>
        </div>
        
        <form method="POST" action="{{ url_for('config.update_email') }}" class="px-6 py-4 space-y-4">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Serveur SMTP -->
                <div>
                    <label for="smtp_host" class="block text-sm font-medium text-gray-700 mb-1">
                        Serveur SMTP
                    </label>
                    <input type="text" 
                           id="smtp_host" 
                           name="smtp_host" 
                           value="{{ email_config.smtp_host }}"
                           placeholder="smtp.gmail.com"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Ex: smtp.gmail.com, smtp.outlook.com</p>
                </div>

                <!-- Port SMTP -->
                <div>
                    <label for="smtp_port" class="block text-sm font-medium text-gray-700 mb-1">
                        Port SMTP
                    </label>
                    <input type="text" 
                           id="smtp_port" 
                           name="smtp_port" 
                           value="{{ email_config.smtp_port }}"
                           placeholder="587"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">587 (TLS) ou 465 (SSL) généralement</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Nom d'utilisateur -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
                        Nom d'utilisateur
                    </label>
                    <input type="text" 
                           id="username" 
                           name="username" 
                           value="{{ email_config.username }}"
                           placeholder="votre.email@domain.com"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Votre adresse email de connexion SMTP</p>
                </div>

                <!-- Mot de passe -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        Mot de passe
                    </label>
                    <input type="password" 
                           id="password" 
                           name="password" 
                           value="{{ email_config.password }}"
                           placeholder="••••••••"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Mot de passe ou mot de passe d'application</p>
                </div>
            </div>

            <!-- Options de sécurité -->
            <div class="flex items-center">
                <input type="checkbox" 
                       id="use_tls" 
                       name="use_tls" 
                       {% if email_config.use_tls %}checked{% endif %}
                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="use_tls" class="ml-2 text-sm text-gray-700">
                    Utiliser TLS (recommandé)
                </label>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Nom d'expéditeur -->
                <div>
                    <label for="from_name" class="block text-sm font-medium text-gray-700 mb-1">
                        Nom d'expéditeur
                    </label>
                    <input type="text" 
                           id="from_name" 
                           name="from_name" 
                           value="{{ email_config.from_name }}"
                           placeholder="Notytex"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Nom qui apparaîtra comme expéditeur</p>
                </div>

                <!-- Adresse d'expéditeur -->
                <div>
                    <label for="from_address" class="block text-sm font-medium text-gray-700 mb-1">
                        Adresse d'expéditeur
                    </label>
                    <input type="email" 
                           id="from_address" 
                           name="from_address" 
                           value="{{ email_config.from_address }}"
                           placeholder="professeur@etablissement.fr"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Adresse qui apparaîtra comme expéditeur</p>
                </div>
            </div>

            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
                <a href="{{ url_for('config.index') }}" 
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Annuler
                </a>
                <button type="submit" 
                        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Sauvegarder
                </button>
            </div>
        </form>
    </div>

    <!-- Test de configuration -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Test de configuration</h2>
            <p class="text-sm text-gray-600 mt-1">
                Testez votre configuration en envoyant un email de test
            </p>
        </div>
        
        <form method="POST" action="{{ url_for('config.test_email') }}" class="px-6 py-4">
            
            <div class="space-y-4">
                <div>
                    <label for="test_email" class="block text-sm font-medium text-gray-700 mb-1">
                        Adresse email de test
                    </label>
                    <input type="email" 
                           id="test_email" 
                           name="test_email" 
                           placeholder="test@example.com"
                           required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Un email de test sera envoyé à cette adresse</p>
                </div>

                <div class="flex justify-end">
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        📧 Envoyer un test
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Aide configuration -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h3 class="text-lg font-medium text-blue-900 mb-3">💡 Aide à la configuration</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h4 class="font-medium text-blue-800 mb-2">Gmail</h4>
                <ul class="text-sm text-blue-700 space-y-1">
                    <li><strong>Serveur:</strong> smtp.gmail.com</li>
                    <li><strong>Port:</strong> 587 (TLS)</li>
                    <li><strong>Sécurité:</strong> Utiliser un mot de passe d'application</li>
                </ul>
            </div>
            
            <div>
                <h4 class="font-medium text-blue-800 mb-2">Outlook/Hotmail</h4>
                <ul class="text-sm text-blue-700 space-y-1">
                    <li><strong>Serveur:</strong> smtp-mail.outlook.com</li>
                    <li><strong>Port:</strong> 587 (TLS)</li>
                    <li><strong>Sécurité:</strong> Authentification moderne requise</li>
                </ul>
            </div>
        </div>

        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
            <p class="text-sm text-yellow-800">
                <strong>⚠️ Sécurité:</strong> Pour Gmail, créez un mot de passe d'application dans votre compte Google. 
                N'utilisez pas votre mot de passe principal.
            </p>
        </div>
    </div>

    <!-- Serveur SMTP de test local -->
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
        <h3 class="text-lg font-medium text-green-900 mb-3">🧪 Tests en local - Serveur SMTP factice</h3>
        
        <p class="text-sm text-green-700 mb-3">
            Pour tester l'envoi d'emails sans configuration réelle, utilisez le serveur SMTP de débogage Python :
        </p>
        
        <div class="bg-green-100 p-4 rounded-md mb-4">
            <h4 class="font-medium text-green-800 mb-2">1. Lancer le serveur de débogage</h4>
            <p class="text-sm text-green-700 mb-2"><strong>Option A:</strong> Script inclus dans Notytex (recommandé)</p>
            <code class="block text-sm bg-gray-900 text-green-400 p-2 rounded mb-3">
                python debug_smtp_server.py
            </code>
            
            <p class="text-sm text-green-700 mb-2"><strong>Option B:</strong> Avec aiosmtpd</p>
            <code class="block text-sm bg-gray-900 text-blue-400 p-2 rounded mb-1">
                pip install aiosmtpd
            </code>
            <code class="block text-sm bg-gray-900 text-blue-400 p-2 rounded mb-3">
                python -m aiosmtpd -n -l localhost:1025
            </code>
            
            <p class="text-xs text-green-600">💡 Le script inclus affiche les emails avec un formatage amélioré</p>
            <p class="text-xs text-green-600">⚠️ Laissez ce terminal ouvert pendant les tests</p>
        </div>
        
        <div class="bg-green-100 p-4 rounded-md mb-4">
            <h4 class="font-medium text-green-800 mb-2">2. Configuration pour les tests</h4>
            <ul class="text-sm text-green-700 space-y-1">
                <li><strong>Serveur SMTP:</strong> localhost</li>
                <li><strong>Port:</strong> 1025</li>
                <li><strong>Utilisateur/Mot de passe:</strong> Laisser vides</li>
                <li><strong>TLS:</strong> ❌ Décocher</li>
                <li><strong>Adresse expéditeur:</strong> test@notytex.local</li>
            </ul>
        </div>
        
        <div class="bg-green-100 p-4 rounded-md">
            <h4 class="font-medium text-green-800 mb-2">3. Résultat</h4>
            <p class="text-sm text-green-700">
                ✅ Tous les emails s'afficheront dans le terminal (contenu HTML complet)<br>
                ✅ Aucun email réellement envoyé<br>
                ✅ Parfait pour tester les bilans d'évaluation
            </p>
        </div>
    </div>
</div>
{% endblock %}