{% extends 'core/layout.html.twig' %}

{% block title %}Activation du compte{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/activation.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
{% endblock %}

{% block body %}
<div class="auth-container">
    <!-- Switch de thème -->
    <div class="theme-switch-container">
        <div class="theme-switch">
            <input type="checkbox" id="theme-toggle" class="theme-toggle">
            <label for="theme-toggle" class="theme-switch-label">
                <i class="fas fa-sun theme-icon sun-icon"></i>
                <i class="fas fa-moon theme-icon moon-icon"></i>
                <div class="theme-switch-slider"></div>
            </label>
        </div>
    </div>
    
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-icon">
                <i class="fas fa-user-plus"></i>
            </div>
            <h1 class="auth-title">Activation du compte</h1>
            <p class="auth-subtitle">Activez votre compte en 2 étapes simples</p>
        </div>

        <div class="stepper" id="stepper">
            <div class="step active" data-step="1">
                <div class="step-number">1</div>
                <div class="step-title">Recherche</div>
            </div>
            <div class="step-divider"></div>
            <div class="step" data-step="2">
                <div class="step-number">2</div>
                <div class="step-title">Activation</div>
            </div>
        </div>

        <div class="form-container">
            <form id="activationForm" novalidate>
                <!-- Step 1: Recherche -->
                <div class="form-step active" data-step="1">
                <div class="form-group">
                    <label class="form-label">Type d'utilisateur</label>
                    <select class="form-control" id="userType" name="userType" required>
                        <option value="">Sélectionnez votre statut</option>
                        <option value="student">Étudiant</option>
                        <option value="teacher">Enseignant</option>
                    </select>
                    <i class="fas fa-users field-icon"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Matricule</label>
                    <input type="text" class="form-control" id="matricule" name="matricule" required 
                           placeholder="Entrez votre matricule">
                    <i class="fas fa-id-card field-icon"></i>
                </div>

                <div class="student-search-fields" id="studentFields" style="display: none;">
                    <div class="form-group">
                        <label class="form-label">Cycle d'études</label>
                        <select class="form-control" id="searchCycle" name="searchCycle">
                            <option value="">Sélectionnez votre cycle</option>
                            <option value="L">Licence</option>
                            <option value="M">Master</option>
                        </select>
                        <i class="fas fa-graduation-cap field-icon"></i>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Département</label>
                        <select class="form-control" id="searchDepartment" name="searchDepartment" disabled>
                            <option value="">Sélectionnez d'abord un cycle</option>
                        </select>
                        <i class="fas fa-building field-icon"></i>
                    </div>
                </div>

                <input type="hidden" id="hiddenMatricule" name="hiddenMatricule">

                <div class="form-actions">
                    <div></div>
                    <button type="button" class="btn btn-primary next-step" id="searchBtn">
                        <i class="fas fa-search"></i>
                        <span>Rechercher</span>
                    </button>
                </div>
            </div>

            <!-- Step 2: Personnalisation -->
            <div class="form-step hidden" data-step="2">
                <div class="form-group">
                    <label class="form-label">Prénom</label>
                    <input type="text" class="form-control" id="firstName" name="firstName" required 
                           placeholder="Votre prénom">
                    <i class="fas fa-user field-icon"></i>
                    <i class="fas fa-check validation-icon success"></i>
                    <i class="fas fa-times validation-icon error"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Nom</label>
                    <input type="text" class="form-control" id="lastName" name="lastName" required 
                           placeholder="Votre nom">
                    <i class="fas fa-user field-icon"></i>
                    <i class="fas fa-check validation-icon success"></i>
                    <i class="fas fa-times validation-icon error"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" id="email" name="email" required 
                           placeholder="votre.email@example.com">
                    <i class="fas fa-envelope field-icon"></i>
                    <i class="fas fa-check validation-icon success"></i>
                    <i class="fas fa-times validation-icon error"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Genre</label>
                    <select class="form-control" id="gender" name="gender" required>
                        <option value="">Sélectionnez votre genre</option>
                        <option value="M">Masculin</option>
                        <option value="F">Féminin</option>
                    </select>
                    <i class="fas fa-venus-mars field-icon"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Mot de passe</label>
                    <input type="password" class="form-control" id="password" name="password" required 
                           placeholder="Créez un mot de passe sécurisé">
                    <i class="fas fa-lock field-icon"></i>
                    <i class="fas fa-check validation-icon success"></i>
                    <i class="fas fa-times validation-icon error"></i>
                </div>

                <div class="form-group">
                    <label class="form-label">Confirmer le mot de passe</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required 
                           placeholder="Confirmez votre mot de passe">
                    <i class="fas fa-lock field-icon"></i>
                    <i class="fas fa-check validation-icon success"></i>
                    <i class="fas fa-times validation-icon error"></i>
                </div>

                <div class="student-personalization-fields" id="studentPersonalizationFields" style="display: none;">
                    <div class="form-group">
                        <label class="form-label">Département d'études</label>
                        <select class="form-control" id="department" name="department">
                            <option value="">Sélectionnez votre département</option>
                        </select>
                        <i class="fas fa-building field-icon"></i>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Niveau d'études</label>
                        <select class="form-control" id="level" name="level">
                            <option value="">Sélectionnez votre niveau</option>
                        </select>
                        <i class="fas fa-layer-group field-icon"></i>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-outline-secondary prev-step">
                        <i class="fas fa-arrow-left"></i>
                        <span>Retour</span>
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitActivation">
                        <i class="fas fa-check"></i>
                        <span>Activer le compte</span>
                    </button>
                </div>
            </div>
            </form>
        </div>

        <div class="auth-switch">
            <p>Votre compte est déjà activé ?</p>
            <a href="{{ path('app_login') }}" class="btn btn-outline-primary">
                <i class="fas fa-sign-in-alt"></i>
                <span>Se connecter</span>
            </a>
        </div>
    </div>
</div>

<!-- Toast pour les notifications -->
<div id="toastContainer" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999;"></div>

<script>
// Fonction pour créer un toast
function showToast(message, type = 'info', duration = 5000) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type}`;
    toast.style.cssText = `
        min-width: 300px;
        margin-bottom: 0.5rem;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.3s ease;
    `;
    
    const icon = {
        success: 'fas fa-check-circle',
        error: 'fas fa-exclamation-triangle',
        warning: 'fas fa-exclamation-circle',
        info: 'fas fa-info-circle'
    }[type] || 'fas fa-info-circle';
    
    toast.innerHTML = `
        <i class="${icon}"></i>
        <span>${message}</span>
        <button type="button" style="background: none; border: none; float: right; font-size: 1.2rem; cursor: pointer; color: inherit; opacity: 0.7; margin-left: 1rem;" onclick="this.parentElement.remove()">×</button>
    `;
    
    document.getElementById('toastContainer').appendChild(toast);
    
    // Animation d'entrée
    setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateX(0)';
    }, 100);
    
    // Auto-remove
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

// Initialisation rapide pour éviter les délais
document.addEventListener('DOMContentLoaded', function() {
    const stepper = document.getElementById('stepper');
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;
    
    // Gestion du thème
    function initTheme() {
        const savedTheme = localStorage.getItem('theme') || 'light';
        if (savedTheme === 'dark') {
            body.classList.add('dark-theme');
            themeToggle.checked = true;
        }
    }
    
    function toggleTheme() {
        body.classList.toggle('dark-theme');
        const isDark = body.classList.contains('dark-theme');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
    }
    
    themeToggle.addEventListener('change', toggleTheme);
    initTheme();
    
    // Mise à jour du stepper
    function updateStepper(step) {
        document.querySelectorAll('.step').forEach((stepEl, index) => {
            const stepNum = index + 1;
            stepEl.className = 'step';
            if (stepNum < step) {
                stepEl.classList.add('completed');
            } else if (stepNum === step) {
                stepEl.classList.add('active');
            }
        });
    }
    
    // Fonction globale pour être accessible depuis activation.js
    window.updateStepper = updateStepper;
    
    // Le reste de la logique sera géré par activation.js
    // L'ActivationForm sera instanciée dans le fichier activation.js
});
</script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/activation.js') }}?v={{ random() }}" defer></script>
{% endblock %}