/**
 * NOTYTEX - Council Preparation Module
 * Gestion complète de la préparation du conseil de classe avec auto-sauvegarde
 * et navigation trimestre fluide
 */

class CouncilPreparation {
    constructor(classId, options = {}) {
        this.classId = classId;
        this.options = {
            debounceTime: 2000,           // Auto-sauvegarde après 2s d'inactivité
            searchDebounceTime: 300,      // Recherche instantanée
            cacheTimeout: 10 * 60 * 1000, // Cache 10 minutes
            animationDuration: 300,       // Durée animations en ms
            enableTouchGestures: true,
            ...options
        };

        // État centralisé
        this.state = {
            currentTrimester: parseInt(document.querySelector('[data-council-preparation]')?.dataset?.trimester) || 2,
            expandedStudents: new Set(),
            searchTerm: '',
            sortBy: 'alphabetical', // alphabetical, average, status
            filterStatus: 'all',    // all, completed, pending, struggling
            cache: new Map(),
            savingStates: new Map(), // Track saving per student
            modifiedAppreciations: new Set(),
            isInitialized: false,
            // État mode focus
            isFocusMode: false,
            focusCurrentIndex: 0,
            filteredStudents: [] // Liste des élèves visibles (après filtres)
        };

        // Gestionnaires de sauvegarde par élève
        this.saveHandlers = new Map();
        
        this.init();
    }

    async init() {
        try {
            this.cacheElements();
            
            // Initialisation des gestionnaires
            this.stateManager = new StateManager(this);
            this.filterManager = new FilterManager(this);
            this.autoSaveManager = new AutoSaveManager(this);
            this.uiManager = new UIManager(this);
            this.focusManager = new FocusManager(this);

            // Restauration de l'état
            this.stateManager.restoreState();
            
            // Initialisation des sous-modules
            this.filterManager.init();
            this.autoSaveManager.init();
            this.uiManager.init();
            this.focusManager.init();
            
            this.state.isInitialized = true;
            
            // Setup advanced features
            this.setupAdvancedFeatures();
            
            
        } catch (error) {
            console.error('Erreur initialisation CouncilPreparation:', error);
            this.showError('Erreur lors du chargement de la page');
        }
    }

    cacheElements() {
        this.elements = {
            container: document.querySelector('[data-council-preparation]'),
            studentsContainer: document.querySelector('[data-students-container]'),
            searchInput: document.querySelector('[data-search-students]'),
            sortSelect: document.querySelector('[data-sort-students]'),
            filterSelect: document.querySelector('[data-filter-status]'),
            loadingOverlay: document.querySelector('[data-loading-overlay]'),
            resultsCounter: document.querySelector('[data-results-counter]'),
            trimesterSelector: document.querySelector('[data-trimester-selector]'),
            focusModeToggle: document.querySelector('[data-toggle-focus-mode]'),
            focusModeText: document.querySelector('[data-focus-mode-text]'),
            focusContainer: document.querySelector('[data-focus-container]'),
            listModeControls: document.querySelector('.list-mode-controls'),
            focusModeControls: document.querySelector('.focus-mode-controls'),
            listModeDisplay: document.querySelector('.list-mode-display'),
            focusModeDisplay: document.querySelector('.focus-mode-display'),
            listModeFilters: document.querySelector('.list-mode-filters'),
            listModeActions: document.querySelector('.list-mode-actions'),
            listModeHero: document.querySelector('.list-mode-hero'),
            listModeBreadcrumb: document.querySelector('.list-mode-breadcrumb'),
            listModeFiltersSection: document.querySelector('.list-mode-filters-section'),
            listModeStats: document.querySelector('.list-mode-stats'),
            focusModeHeader: document.querySelector('.focus-mode-header'),
            focusPrevBtn: document.querySelector('[data-focus-prev]'),
            focusNextBtn: document.querySelector('[data-focus-next]'),
            focusCurrentSpan: document.querySelector('[data-focus-current]'),
            focusTotalSpan: document.querySelector('[data-focus-total]')
        };
    }

    setupAdvancedFeatures() {
        // Global keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey || e.metaKey) {
                switch (e.key) {
                    case 's':
                        e.preventDefault();
                        this.autoSaveManager.saveAllPending();
                        this.showToast('Toutes les appréciations ont été sauvegardées', 'success');
                        break;
                    case 'f':
                        e.preventDefault();
                        this.elements.searchInput?.focus();
                        break;
                }
            }
        });

        // Save before page unload
        window.addEventListener('beforeunload', (e) => {
            if (this.state.modifiedAppreciations.size > 0) {
                this.autoSaveManager.saveAllPending();
                e.returnValue = 'Des modifications non sauvegardées pourraient être perdues.';
            }
        });

        // Setup export handlers
        this.setupExportHandlers();
    }

    setupExportHandlers() {
        const exportPdf = document.querySelector('[data-export-pdf]');
        const classSynthesis = document.querySelector('[data-class-synthesis]');

        exportPdf?.addEventListener('click', () => {
            this.showToast('Fonctionnalité d\'export PDF en cours de développement', 'info');
        });

        classSynthesis?.addEventListener('click', () => {
            this.showClassSynthesis();
        });
    }

    showClassSynthesis() {
        // Calculer et afficher une synthèse de classe
        const students = Array.from(document.querySelectorAll('[data-student-card]'));
        const stats = this.calculateClassStats(students);
        
        const modal = this.createModal('Synthèse de classe', this.generateSynthesisHTML(stats));
        document.body.appendChild(modal);
    }

    calculateClassStats(students) {
        let totalStudents = students.length;
        let withAppreciation = 0;
        let averageSum = 0;
        let studentsWithGrades = 0;

        students.forEach(student => {
            if (student.dataset.hasAppreciation === 'true') {
                withAppreciation++;
            }
            
            const average = parseFloat(student.dataset.studentAverage);
            if (average > 0) {
                averageSum += average;
                studentsWithGrades++;
            }
        });

        return {
            totalStudents,
            withAppreciation,
            appreciationPercentage: Math.round((withAppreciation / totalStudents) * 100),
            classAverage: studentsWithGrades > 0 ? (averageSum / studentsWithGrades).toFixed(2) : 'N/A'
        };
    }

    generateSynthesisHTML(stats) {
        return `
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-blue-900">${stats.totalStudents}</div>
                        <div class="text-blue-700">Élèves total</div>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-green-900">${stats.withAppreciation}</div>
                        <div class="text-green-700">Appréciations rédigées</div>
                    </div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center">
                        <span>Progression des appréciations</span>
                        <span class="font-bold">${stats.appreciationPercentage}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-gradient-to-r from-green-500 to-green-600 h-2 rounded-full transition-all duration-500" 
                             style="width: ${stats.appreciationPercentage}%"></div>
                    </div>
                </div>
                <div class="text-center pt-4 border-t">
                    <div class="text-lg">Moyenne de classe : <span class="font-bold text-orange-600">${stats.classAverage}/20</span></div>
                </div>
            </div>
        `;
    }

    createModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">${title}</h3>
                    <button class="text-gray-400 hover:text-gray-600" onclick="this.closest('.fixed').remove()">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                ${content}
                <div class="mt-6 flex justify-end">
                    <button class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors" 
                            onclick="this.closest('.fixed').remove()">
                        Fermer
                    </button>
                </div>
            </div>
        `;
        
        // Close on outside click
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        });

        return modal;
    }

    showError(message) {
        this.showToast(message, 'error');
    }

    showToast(message, type = 'info', duration = 3000) {
        const toast = document.createElement('div');
        const bgColor = {
            'success': 'bg-green-500',
            'error': 'bg-red-500',
            'info': 'bg-blue-500',
            'warning': 'bg-yellow-500'
        }[type] || 'bg-gray-500';

        toast.className = `fixed top-4 right-4 ${bgColor} text-white px-4 py-2 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
        toast.textContent = message;
        
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.style.transform = 'translateX(0)';
        }, 10);
        
        // Animate out and remove
        setTimeout(() => {
            toast.style.transform = 'translateX(full)';
            setTimeout(() => toast.remove(), 300);
        }, duration);
    }
}

class StateManager {
    constructor(councilPrep) {
        this.parent = councilPrep;
    }

    restoreState() {
        // Restore from URL and localStorage
        const params = new URLSearchParams(location.search);
        this.parent.state.sortBy = params.get('sort') || 'alphabetical';
        this.parent.state.filterStatus = params.get('filter') || 'all';
        
        // Apply initial filters
        this.applyInitialState();
    }

    applyInitialState() {
        if (this.parent.elements.sortSelect) {
            this.parent.elements.sortSelect.value = this.parent.state.sortBy;
        }
        if (this.parent.elements.filterSelect) {
            this.parent.elements.filterSelect.value = this.parent.state.filterStatus;
        }
    }

    saveState() {
        const params = new URLSearchParams(location.search);
        params.set('sort', this.parent.state.sortBy);
        params.set('filter', this.parent.state.filterStatus);
        
        history.replaceState(null, '', `${location.pathname}?${params.toString()}`);
    }
}

class FilterManager {
    constructor(councilPrep) {
        this.parent = councilPrep;
        this.searchHandler = null;
    }

    init() {
        this.bindSearchEvents();
        this.bindSortEvents();
        this.bindFilterEvents();
        this.bindTrimesterEvents();
    }

    bindSearchEvents() {
        const searchInput = this.parent.elements.searchInput;
        if (!searchInput) return;

        this.searchHandler = this.debounce((term) => {
            this.parent.state.searchTerm = term.toLowerCase();
            this.applyFilters();
        }, this.parent.options.searchDebounceTime);

        searchInput.addEventListener('input', (e) => {
            this.searchHandler(e.target.value);
        });
    }

    bindSortEvents() {
        const sortSelect = this.parent.elements.sortSelect;
        if (!sortSelect) return;

        sortSelect.addEventListener('change', (e) => {
            this.parent.state.sortBy = e.target.value;
            this.parent.stateManager.saveState();
            this.applyFilters();
        });
    }

    bindFilterEvents() {
        const filterSelect = this.parent.elements.filterSelect;
        if (!filterSelect) return;

        filterSelect.addEventListener('change', (e) => {
            this.parent.state.filterStatus = e.target.value;
            this.parent.stateManager.saveState();
            this.applyFilters();
        });
    }

    bindTrimesterEvents() {
        const trimesterSelector = this.parent.elements.trimesterSelector;
        if (!trimesterSelector) return;

        // Support pour les nouveaux boutons tabs
        if (trimesterSelector.hasAttribute('data-trimester-selector')) {
            // Navigation tabs - écouter les clics sur les boutons
            const trimesterTabs = trimesterSelector.querySelectorAll('[data-trimester-tab]');
            trimesterTabs.forEach(tab => {
                tab.addEventListener('click', (e) => {
                    e.preventDefault();
                    const newTrimester = parseInt(tab.dataset.trimesterTab);
                    if (newTrimester !== this.parent.state.currentTrimester) {
                        this.changeTrimester(newTrimester);
                    }
                });
                
                // Support clavier pour accessibilité
                tab.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        const newTrimester = parseInt(tab.dataset.trimesterTab);
                        if (newTrimester !== this.parent.state.currentTrimester) {
                            this.changeTrimester(newTrimester);
                        }
                    }
                });
            });
        } else {
            // Ancien sélecteur dropdown - pour compatibilité
            trimesterSelector.addEventListener('change', (e) => {
                const newTrimester = parseInt(e.target.value);
                if (newTrimester !== this.parent.state.currentTrimester) {
                    this.changeTrimester(newTrimester);
                }
            });
        }
    }

    async changeTrimester(newTrimester) {
        try {
            // Show loading overlay
            this.parent.elements.loadingOverlay?.classList.remove('hidden');
            
            // Redirect to the new trimester URL
            const newUrl = `${window.location.pathname}?trimestre=${newTrimester}`;
            window.location.href = newUrl;
            
        } catch (error) {
            console.error('Erreur changement trimestre:', error);
            this.parent.showToast('Erreur lors du changement de trimestre', 'error');
            
            // Revert selector to previous value
            const trimesterSelector = this.parent.elements.trimesterSelector;
            if (trimesterSelector.hasAttribute('data-trimester-selector')) {
                // Pour les tabs - remettre les bonnes classes active
                const tabs = trimesterSelector.querySelectorAll('[data-trimester-tab]');
                tabs.forEach(tab => {
                    const tabTrimester = parseInt(tab.dataset.trimesterTab);
                    if (tabTrimester === this.parent.state.currentTrimester) {
                        tab.classList.add('active');
                        tab.setAttribute('aria-selected', 'true');
                    } else {
                        tab.classList.remove('active');
                        tab.setAttribute('aria-selected', 'false');
                    }
                });
            } else {
                // Pour l'ancien dropdown
                trimesterSelector.value = this.parent.state.currentTrimester;
            }
        } finally {
            // Hide loading overlay
            this.parent.elements.loadingOverlay?.classList.add('hidden');
        }
    }

    applyFilters() {
        const students = Array.from(document.querySelectorAll('[data-student-card]'));
        let visibleCount = 0;

        students.forEach((studentCard, index) => {
            const isVisible = this.shouldShowStudent(studentCard);
            
            if (isVisible) {
                studentCard.style.display = '';
                visibleCount++;
                // Staggered animation
                studentCard.style.opacity = '0';
                studentCard.style.transform = 'translateY(10px)';
                setTimeout(() => {
                    studentCard.style.transition = 'opacity 300ms ease, transform 300ms ease';
                    studentCard.style.opacity = '1';
                    studentCard.style.transform = 'translateY(0)';
                }, index * 50);
            } else {
                studentCard.style.display = 'none';
            }
        });

        this.updateResultsCounter(visibleCount, students.length);
        this.applySorting();
        
        // Notifier le focus manager si nécessaire
        if (this.parent.focusManager) {
            this.parent.focusManager.onFiltersChanged();
        }
    }

    shouldShowStudent(studentCard) {
        const studentName = studentCard.dataset.studentName?.toLowerCase() || '';
        const performanceStatus = studentCard.dataset.performanceStatus;
        const hasAppreciation = studentCard.dataset.hasAppreciation === 'true';

        // Search filter
        if (this.parent.state.searchTerm && !studentName.includes(this.parent.state.searchTerm)) {
            return false;
        }

        // Status filter
        if (this.parent.state.filterStatus !== 'all') {
            switch (this.parent.state.filterStatus) {
                case 'completed':
                    if (!hasAppreciation) return false;
                    break;
                case 'pending':
                    if (hasAppreciation) return false;
                    break;
                case 'struggling':
                    if (performanceStatus !== 'struggling') return false;
                    break;
            }
        }

        return true;
    }

    applySorting() {
        const container = this.parent.elements.studentsContainer;
        if (!container) return;

        const students = Array.from(container.querySelectorAll('[data-student-card]:not([style*="display: none"])'));

        students.sort((a, b) => {
            switch (this.parent.state.sortBy) {
                case 'alphabetical':
                    return (a.dataset.studentName || '').localeCompare(b.dataset.studentName || '');
                
                case 'average':
                    return (parseFloat(b.dataset.studentAverage) || 0) - (parseFloat(a.dataset.studentAverage) || 0);
                
                case 'status':
                    const statusOrder = { 'struggling': 0, 'average': 1, 'good': 2, 'excellent': 3, 'no_data': 4 };
                    return statusOrder[a.dataset.performanceStatus] - statusOrder[b.dataset.performanceStatus];
                
                default:
                    return 0;
            }
        });

        students.forEach((student, index) => {
            student.style.order = index;
        });
    }

    updateResultsCounter(visible, total) {
        const counter = this.parent.elements.resultsCounter;
        if (counter) {
            counter.textContent = `${visible} élève${visible > 1 ? 's' : ''} affiché${visible > 1 ? 's' : ''} sur ${total}`;
        }
    }

    debounce(func, delay) {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
}

class AutoSaveManager {
    constructor(councilPrep) {
        this.parent = councilPrep;
        this.pendingSaves = new Map();
        this.saveQueue = [];
        this.isSaving = false;
    }

    init() {
        this.bindTextareaEvents();
        this.bindManualSaveButtons();
    }

    bindTextareaEvents() {
        const textareas = document.querySelectorAll('[data-appreciation-textarea]');
        
        textareas.forEach(textarea => {
            const studentId = textarea.dataset.studentId;
            
            // Setup character counter
            this.setupCharacterCounter(textarea, studentId);
            
            // Debounced save handler
            const saveHandler = this.debounce(() => {
                this.queueSave(studentId, textarea.value);
            }, this.parent.options.debounceTime);

            textarea.addEventListener('input', (e) => {
                this.showModifiedState(studentId, true);
                this.parent.state.modifiedAppreciations.add(studentId);
                this.updateCharacterCounter(textarea, studentId);
                saveHandler();
            });

            textarea.addEventListener('blur', () => {
                if (this.parent.state.modifiedAppreciations.has(studentId)) {
                    this.queueSave(studentId, textarea.value, true);
                }
            });
        });
    }

    bindManualSaveButtons() {
        // Boutons supprimés de l'interface - auto-sauvegarde uniquement
    }

    setupCharacterCounter(textarea, studentId) {
        const counter = textarea.closest('[data-student-details]')?.querySelector('[data-char-counter]');
        if (counter) {
            this.updateCharacterCounter(textarea, studentId);
        }
    }

    updateCharacterCounter(textarea, studentId) {
        const counter = textarea.closest('[data-student-details]')?.querySelector('[data-char-counter]');
        if (counter) {
            const count = textarea.value.length;
            counter.textContent = `${count} caractères`;
            
            if (count > 500) {
                counter.className = 'text-xs text-red-500';
            } else if (count > 300) {
                counter.className = 'text-xs text-yellow-500';
            } else {
                counter.className = 'text-xs text-gray-500';
            }
        }
    }

    queueSave(studentId, appreciation, immediate = false) {
        const saveTask = {
            studentId,
            appreciation,
            timestamp: Date.now(),
            immediate
        };

        if (immediate) {
            this.executeSave(saveTask);
        } else {
            // Remove previous queued save for this student
            this.saveQueue = this.saveQueue.filter(task => task.studentId !== studentId);
            this.saveQueue.push(saveTask);
            this.processSaveQueue();
        }
    }

    async processSaveQueue() {
        if (this.isSaving || this.saveQueue.length === 0) return;

        this.isSaving = true;
        
        while (this.saveQueue.length > 0) {
            const task = this.saveQueue.shift();
            await this.executeSave(task);
            await new Promise(resolve => setTimeout(resolve, 100)); // Throttle
        }

        this.isSaving = false;
    }

    async executeSave(saveTask) {
        const { studentId, appreciation } = saveTask;
        
        try {
            this.showSavingState(studentId, true);

            const response = await fetch(`/classes/${this.parent.classId}/council/appreciation/${studentId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    appreciation: appreciation,
                    trimester: this.parent.state.currentTrimester
                })
            });

            const result = await response.json();

            if (response.ok && result.success) {
                this.showSavedState(studentId);
                this.parent.state.modifiedAppreciations.delete(studentId);
                this.updateLastModified(studentId, result.last_modified);
                this.updateAppreciationStatus(studentId, result.has_content);
            } else {
                throw new Error(result.error || 'Erreur de sauvegarde');
            }

        } catch (error) {
            console.error('Erreur sauvegarde appréciation:', error);
            this.showErrorState(studentId, error.message);
            this.parent.state.modifiedAppreciations.add(studentId);
            this.parent.showToast(`Erreur sauvegarde`, 'error');
        } finally {
            this.showSavingState(studentId, false);
        }
    }

    async finalizeAppreciation(studentId) {
        const textarea = document.querySelector(`[data-appreciation-textarea][data-student-id="${studentId}"]`);
        if (!textarea || !textarea.value.trim()) {
            this.parent.showToast('Veuillez saisir une appréciation avant de finaliser', 'warning');
            return;
        }

        if (confirm('Finaliser cette appréciation ? Elle ne pourra plus être modifiée.')) {
            // Pour l'instant, on sauvegarde normalement. La finalisation sera une fonctionnalité future
            this.queueSave(studentId, textarea.value, true);
        }
    }

    showModifiedState(studentId, isModified) {
        const indicator = document.querySelector(`[data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        if (isModified) {
            indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800';
            indicator.innerHTML = '<span class="w-2 h-2 bg-yellow-400 rounded-full mr-1"></span>Modifié';
            indicator.classList.remove('hidden');
        }
    }

    showSavingState(studentId, isSaving) {
        const indicator = document.querySelector(`[data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        if (isSaving) {
            indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800';
            indicator.innerHTML = '<svg class="animate-spin w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Sauvegarde...';
            indicator.classList.remove('hidden');
        }
    }

    showSavedState(studentId) {
        const indicator = document.querySelector(`[data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800';
        indicator.innerHTML = '<span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>Sauvegardé';
        
        setTimeout(() => {
            indicator.classList.add('hidden');
        }, 2000);
    }

    showErrorState(studentId, error) {
        const indicator = document.querySelector(`[data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-red-100 text-red-800';
        indicator.innerHTML = '<span class="w-2 h-2 bg-red-400 rounded-full mr-1"></span>Erreur';
        indicator.title = error;
        indicator.classList.remove('hidden');
    }

    updateLastModified(studentId, lastModified) {
        const element = document.querySelector(`[data-last-modified="${studentId}"]`);
        if (element) {
            const date = new Date(lastModified);
            element.textContent = date.toLocaleDateString('fr-FR', {
                day: '2-digit',
                month: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    }

    updateAppreciationStatus(studentId, hasContent) {
        const studentCard = document.querySelector(`[data-student-card="${studentId}"]`);
        if (studentCard) {
            studentCard.dataset.hasAppreciation = hasContent ? 'true' : 'false';
            
            // Update status indicator in the card
            const indicator = studentCard.querySelector('.inline-flex.items-center.px-2.py-1.rounded-full');
            if (indicator) {
                if (hasContent) {
                    indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800';
                    indicator.innerHTML = '<span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>Rédigée';
                } else {
                    indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-orange-100 text-orange-800';
                    indicator.innerHTML = '<span class="w-2 h-2 bg-orange-400 rounded-full mr-1"></span>À rédiger';
                }
            }
        }
    }

    async saveAllPending() {
        const textareas = document.querySelectorAll('[data-appreciation-textarea]');
        for (const textarea of textareas) {
            const studentId = textarea.dataset.studentId;
            if (this.parent.state.modifiedAppreciations.has(studentId)) {
                await this.executeSave({
                    studentId,
                    appreciation: textarea.value,
                    immediate: true
                });
            }
        }
    }

    debounce(func, delay) {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
}

class UIManager {
    constructor(councilPrep) {
        this.parent = councilPrep;
    }

    init() {
        this.bindCardToggles();
        this.setupAccessibility();
    }

    bindCardToggles() {
        const toggleButtons = document.querySelectorAll('[data-toggle-student]');
        
        toggleButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const studentId = button.dataset.toggleStudent;
                this.toggleStudentCard(studentId);
            });
        });
    }

    toggleStudentCard(studentId) {
        const card = document.querySelector(`[data-student-card="${studentId}"]`);
        const details = card?.querySelector(`[data-student-details="${studentId}"]`);
        const icon = card?.querySelector('[data-toggle-icon]');
        
        if (!card || !details) return;
        
        const isExpanded = this.parent.state.expandedStudents.has(studentId);
        
        if (isExpanded) {
            this.collapseCard(details, icon);
            this.parent.state.expandedStudents.delete(studentId);
        } else {
            this.expandCard(details, icon);
            this.parent.state.expandedStudents.add(studentId);
            
            // Auto-focus textarea
            setTimeout(() => {
                const textarea = details.querySelector('textarea');
                textarea?.focus();
            }, this.parent.options.animationDuration);
        }

        this.updateAccessibilityStates(card, !isExpanded);
    }

    expandCard(details, icon) {
        details.classList.remove('hidden');
        details.style.height = '0px';
        details.style.opacity = '0';
        
        // Force reflow
        details.offsetHeight;
        
        const targetHeight = details.scrollHeight;
        
        details.style.transition = `height ${this.parent.options.animationDuration}ms ease-out, opacity ${this.parent.options.animationDuration}ms ease-out`;
        details.style.height = `${targetHeight}px`;
        details.style.opacity = '1';

        if (icon) {
            icon.style.transform = 'rotate(180deg)';
        }

        setTimeout(() => {
            details.style.height = 'auto';
        }, this.parent.options.animationDuration);
    }

    collapseCard(details, icon) {
        const currentHeight = details.offsetHeight;
        details.style.height = `${currentHeight}px`;
        details.style.transition = `height ${this.parent.options.animationDuration}ms ease-out, opacity ${this.parent.options.animationDuration}ms ease-out`;
        
        // Force reflow
        details.offsetHeight;
        
        details.style.height = '0px';
        details.style.opacity = '0';

        if (icon) {
            icon.style.transform = 'rotate(0deg)';
        }

        setTimeout(() => {
            details.classList.add('hidden');
            details.style.height = '';
            details.style.opacity = '';
            details.style.transition = '';
        }, this.parent.options.animationDuration);
    }

    setupAccessibility() {
        const toggleButtons = document.querySelectorAll('[data-toggle-student]');
        toggleButtons.forEach(button => {
            button.setAttribute('role', 'button');
            button.setAttribute('aria-expanded', 'false');
            button.setAttribute('aria-label', 'Afficher/Masquer les détails de l\'élève');
        });

        document.addEventListener('keydown', (e) => {
            if (e.target.matches('[data-toggle-student]')) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    e.target.click();
                }
            }
        });
    }

    updateAccessibilityStates(card, isExpanded) {
        const button = card.querySelector('[data-toggle-student]');
        if (button) {
            button.setAttribute('aria-expanded', isExpanded.toString());
        }
    }
}

class FocusManager {
    constructor(councilPrep) {
        this.parent = councilPrep;
    }

    init() {
        this.bindFocusModeToggle();
        this.bindNavigationControls();
        this.bindKeyboardShortcuts();
        this.updateFilteredStudents();
    }

    bindFocusModeToggle() {
        // Utiliser la délégation d'événement pour gérer plusieurs boutons
        document.addEventListener('click', (e) => {
            if (e.target.matches('[data-toggle-focus-mode]') || e.target.closest('[data-toggle-focus-mode]')) {
                e.preventDefault();
                this.toggleFocusMode();
            }
        });
    }

    bindNavigationControls() {
        // Les boutons de navigation sont gérés ici dans la méthode globale
        document.addEventListener('click', (e) => {
            if (e.target.matches('[data-focus-prev]') || e.target.closest('[data-focus-prev]')) {
                e.preventDefault();
                this.navigatePrevious();
            } else if (e.target.matches('[data-focus-next]') || e.target.closest('[data-focus-next]')) {
                e.preventDefault();
                this.navigateNext();
            }
        });
    }

    bindKeyboardShortcuts() {
        document.addEventListener('keydown', (e) => {
            if (!this.parent.state.isFocusMode) return;

            switch (e.key) {
                case 'Escape':
                    e.preventDefault();
                    this.toggleFocusMode(false);
                    break;
                case 'ArrowLeft':
                    e.preventDefault();
                    this.navigatePrevious();
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    this.navigateNext();
                    break;
            }
        });
    }

    toggleFocusMode(forcedState = null) {
        const newState = forcedState !== null ? forcedState : !this.parent.state.isFocusMode;
        
        this.parent.state.isFocusMode = newState;
        
        if (newState) {
            this.enterFocusMode();
        } else {
            this.exitFocusMode();
        }
    }

    enterFocusMode() {
        // Mettre à jour l'interface
        this.updateFocusModeUI(true);
        
        // Initialiser avec le premier élève
        this.updateFilteredStudents();
        if (this.parent.state.filteredStudents.length > 0) {
            this.parent.state.focusCurrentIndex = 0;
            this.showCurrentStudent();
        }
        
        // Sauvegarder l'état
        localStorage.setItem('council-focus-mode', 'true');
        
    }

    exitFocusMode() {
        // Mettre à jour l'interface
        this.updateFocusModeUI(false);
        
        // Réinitialiser l'état
        this.parent.state.focusCurrentIndex = 0;
        
        // Sauvegarder l'état
        localStorage.removeItem('council-focus-mode');
    }

    updateFocusModeUI(isFocusMode) {
        const elements = this.parent.elements;
        
        if (isFocusMode) {
            // Mode Focus : Interface minimaliste
            // Ajouter classe au body pour styles globaux
            document.body.classList.add('focus-mode');
            
            // Masquer TOUS les éléments de liste
            elements.listModeDisplay?.classList.add('hidden');
            elements.listModeControls?.classList.add('hidden');
            elements.listModeFilters?.classList.add('hidden');
            elements.listModeActions?.classList.add('hidden');
            elements.listModeHero?.classList.add('hidden');
            elements.listModeBreadcrumb?.classList.add('hidden');
            elements.listModeFiltersSection?.classList.add('hidden');
            elements.listModeStats?.classList.add('hidden');
            
            // Afficher uniquement les éléments focus
            elements.focusModeDisplay?.classList.remove('hidden');
            elements.focusModeHeader?.classList.remove('hidden');
            elements.focusModeControls?.classList.add('hidden'); // Utiliser le header compact à la place
            
            // Changer le texte du bouton
            if (elements.focusModeText) {
                elements.focusModeText.textContent = 'Mode Liste';
            }
        } else {
            // Mode Liste : Interface complète
            // Retirer classe du body
            document.body.classList.remove('focus-mode');
            
            // Réafficher tous les éléments de liste
            elements.listModeDisplay?.classList.remove('hidden');
            elements.listModeControls?.classList.remove('hidden');
            elements.listModeFilters?.classList.remove('hidden');
            elements.listModeActions?.classList.remove('hidden');
            elements.listModeHero?.classList.remove('hidden');
            elements.listModeBreadcrumb?.classList.remove('hidden');
            elements.listModeFiltersSection?.classList.remove('hidden');
            elements.listModeStats?.classList.remove('hidden');
            
            // Masquer les éléments focus
            elements.focusModeDisplay?.classList.add('hidden');
            elements.focusModeHeader?.classList.add('hidden');
            elements.focusModeControls?.classList.remove('hidden');
            
            // Changer le texte du bouton
            if (elements.focusModeText) {
                elements.focusModeText.textContent = 'Mode Focus';
            }
        }
    }

    updateFilteredStudents() {
        // En mode focus, on prend TOUS les élèves (pas de filtres)
        const allStudents = Array.from(document.querySelectorAll('[data-student-card]'));
        this.parent.state.filteredStudents = allStudents;
        
        // Mettre à jour le compteur total
        if (this.parent.elements.focusTotalSpan) {
            this.parent.elements.focusTotalSpan.textContent = allStudents.length;
        }
    }

    showCurrentStudent() {
        const currentStudent = this.parent.state.filteredStudents[this.parent.state.focusCurrentIndex];
        if (!currentStudent) return;

        // Cloner l'élève et l'afficher dans le conteneur focus
        const focusContainer = this.parent.elements.focusModeDisplay;
        if (!focusContainer) return;

        // Vider le conteneur
        focusContainer.innerHTML = '';
        
        // Sauvegarder les données JSON avant clonage pour éviter la troncature
        const savedJsonData = this.preserveJsonDataBeforeCloning(currentStudent);
        
        // Cloner l'élément élève
        const clonedStudent = currentStudent.cloneNode(true);
        
        // Restaurer les données JSON après clonage
        this.restoreJsonDataAfterCloning(clonedStudent, savedJsonData);
        
        // Marquer comme élément focus pour la synchronisation
        const studentId = clonedStudent.dataset.studentCard;
        clonedStudent.setAttribute('data-focus-clone-of', studentId);
        
        // Forcer l'expansion de l'appréciation en mode focus
        const detailsSection = clonedStudent.querySelector('[data-student-details]');
        if (detailsSection) {
            detailsSection.classList.remove('hidden');
            detailsSection.style.height = 'auto';
            detailsSection.style.opacity = '1';
            detailsSection.style.flex = '1';
            detailsSection.style.display = 'block';
            detailsSection.style.overflowY = 'auto';
            
            // S'assurer que le contenu interne utilise Flexbox
            const innerContent = detailsSection.querySelector('.px-6.py-6.space-y-6');
            if (innerContent) {
                innerContent.style.display = 'flex';
                innerContent.style.flexDirection = 'column';
                innerContent.style.height = '100%';
                innerContent.style.gap = '1.5rem';
            }
        }
        
        // Ajouter une classe spéciale pour le mode focus
        clonedStudent.classList.add('focus-mode-student');
        
        // Ajouter au conteneur
        focusContainer.appendChild(clonedStudent);
        
        // Mettre à jour l'indicateur de position
        this.updatePositionIndicator();
        
        // Mettre à jour les boutons de navigation
        this.updateNavigationButtons();
        
        // Réattacher TOUS les événements pour le nouvel élément focus
        this.bindFocusStudentEvents(clonedStudent, studentId);
        
        // Assurer que toutes les sections sont visibles
        this.ensureAllSectionsVisible(clonedStudent);
        
        // Focus automatique sur le textarea de l'appréciation
        this.focusAppreciationTextarea(clonedStudent);
        
        // Optimiser la hauteur pour éviter le scroll
        this.optimizeHeight();
    }

    bindFocusStudentEvents(clonedStudent, studentId) {
        
        // 1. Événements textarea avec synchronisation bidirectionnelle
        const textarea = clonedStudent.querySelector(`[data-appreciation-textarea][data-student-id="${studentId}"]`);
        if (textarea) {
            // Handler de sauvegarde avec synchronisation
            const saveHandler = this.parent.autoSaveManager.debounce(() => {
                this.saveFocusAppreciation(studentId, textarea.value);
            }, this.parent.options.debounceTime);

            // Événement input avec sync
            textarea.addEventListener('input', (e) => {
                this.parent.state.modifiedAppreciations.add(studentId);
                this.parent.autoSaveManager.updateCharacterCounter(textarea, studentId);
                this.syncAppreciationToOriginal(studentId, e.target.value);
                saveHandler();
            });

            // Événement blur avec sauvegarde immédiate
            textarea.addEventListener('blur', () => {
                if (this.parent.state.modifiedAppreciations.has(studentId)) {
                    this.saveFocusAppreciation(studentId, textarea.value, true);
                }
            });
            
            // Setup character counter
            this.parent.autoSaveManager.setupCharacterCounter(textarea, studentId);
        }

        // 2. Boutons supprimés - auto-sauvegarde uniquement
        
        // 4. Gestion des barres de progression
        this.setupProgressBars(clonedStudent);
    }
    
    ensureAllSectionsVisible(clonedStudent) {
        
        // S'assurer que les sections compétences/domaines sont visibles
        const competenceSection = clonedStudent.querySelector('.competence-domain-section');
        if (competenceSection) {
            competenceSection.style.display = 'block';
            competenceSection.style.minHeight = '200px';
            competenceSection.style.flexShrink = '0';
        }
        
        // S'assurer que les barres de progression sont configurées
        const progressBars = clonedStudent.querySelectorAll('.progress-bar-container');
        progressBars.forEach(bar => {
            bar.style.display = 'block';
        });
        
        // Section info supprimée - maintenant intégrée dans la zone d'appréciation
        
        // S'assurer que les résultats d'évaluation sont visibles
        const evaluationResults = clonedStudent.querySelector('.evaluation-results');
        if (evaluationResults) {
            evaluationResults.style.display = 'block';
        }
        
        // S'assurer que la section progress-bars est visible
        const progressBarsSection = clonedStudent.querySelector('.progress-bars');
        if (progressBarsSection) {
            progressBarsSection.style.display = 'block';
        }
    }
    
    setupProgressBars(clonedStudent) {
        // Configure les interactions avec les barres de progression des compétences et domaines
        
        try {
            // Trouver toutes les barres de progression
            const progressBars = clonedStudent.querySelectorAll('.progress-bar-container[data-assessments]');
            
            if (progressBars.length === 0) {
                return;
            }
            
            progressBars.forEach((bar) => {
                try {
                    // Ajouter les tooltips dynamiques pour la barre complète
                    this.setupProgressBarTooltip(bar);
                    
                    // Configurer les segments individuels
                    this.setupProgressBarSegments(bar);
                    
                    // Déclencher l'animation d'apparition après un court délai
                    setTimeout(() => {
                        bar.classList.add('progress-animated');
                    }, 300);
                    
                } catch (barError) {
                    console.error('❌ Erreur configuration barre de progression:', barError.message);
                }
            });
            
            // Animation séquentielle des barres et segments
            this.animateProgressBarsSequentially(clonedStudent);
            
        } catch (error) {
            console.error('❌ Erreur lors de la configuration des barres de progression:', error.message);
        }
    }
    
    setupProgressBarTooltip(progressBar) {
        try {
            const competenceName = progressBar.dataset.competenceName || progressBar.dataset.domainName;
            
            // Nouvelle approche : Extraire les données depuis les segments visibles
            const assessmentsData = this.extractAssessmentDataFromSegments(progressBar);
            
            if (assessmentsData && assessmentsData.length > 0) {
                // Construire le contenu du tooltip depuis les données extraites
                let tooltipContent = `${competenceName || 'Progression'}:\n`;
                
                assessmentsData.forEach(assessment => {
                    const percentage = assessment.max > 0 ? Math.round((assessment.earned / assessment.max) * 100) : 0;
                    tooltipContent += `• ${assessment.title}: ${assessment.earned}/${assessment.max} (${percentage}%)\n`;
                });
                
                // Ajouter l'attribut data-tooltip pour les CSS
                progressBar.setAttribute('data-tooltip', tooltipContent);
                
                // Événements hover pour améliorer l'UX
                progressBar.addEventListener('mouseenter', () => {
                    progressBar.style.zIndex = '1001';
                });
                
                progressBar.addEventListener('mouseleave', () => {
                    progressBar.style.zIndex = '';
                });
            } else {
                // Fallback : Essayer l'ancienne méthode comme dernier recours
                this.setupProgressBarTooltipFallback(progressBar);
            }
        } catch (error) {
            console.error('❌ Erreur setup tooltip barre de progression:', error.message);
            // En cas d'erreur, essayer le fallback
            this.setupProgressBarTooltipFallback(progressBar);
        }
    }

    extractAssessmentDataFromSegments(progressBar) {
        try {
            const segments = progressBar.querySelectorAll('.progress-segment[data-assessment-title]');
            
            if (segments.length === 0) {
                return [];
            }
            
            const assessmentsData = [];
            
            segments.forEach(segment => {
                const assessmentData = {
                    id: segment.dataset.assessmentId || Math.random(),
                    title: segment.dataset.assessmentTitle || 'Évaluation',
                    earned: parseFloat(segment.dataset.earnedThis) || 0,
                    max: parseFloat(segment.dataset.maxThis) || 0,
                    performance: parseFloat(segment.dataset.assessmentPerformance) || 0,
                    contribution: parseFloat(segment.dataset.contributionPercentage) || 0
                };
                
                // Validation des données extraites
                if (assessmentData.title && assessmentData.title !== 'Évaluation') {
                    assessmentsData.push(assessmentData);
                }
            });
            
            return assessmentsData;
            
        } catch (error) {
            console.error('❌ Erreur extraction données segments:', error.message);
            return [];
        }
    }

    setupProgressBarTooltipFallback(progressBar) {
        try {
            const rawAssessmentsData = progressBar.dataset.assessments;
            
            if (!rawAssessmentsData || rawAssessmentsData.trim() === '') {
                return;
            }
            
            // Protection contre les JSON malformés
            if (!rawAssessmentsData.trim().startsWith('[') && !rawAssessmentsData.trim().startsWith('{')) {
                return;
            }
            
            let assessmentsData;
            try {
                assessmentsData = JSON.parse(rawAssessmentsData);
            } catch (parseError) {
                return;
            }
            
            const competenceName = progressBar.dataset.competenceName || progressBar.dataset.domainName;
            
            if (assessmentsData && Array.isArray(assessmentsData) && assessmentsData.length > 0) {
                let tooltipContent = `${competenceName || 'Progression'}:\n`;
                
                assessmentsData.forEach(assessment => {
                    const earned = assessment.earned_this || assessment.earned || 0;
                    const max = assessment.max_this || assessment.max || 0;
                    const title = assessment.title || 'Évaluation';
                    const percentage = max > 0 ? Math.round((earned / max) * 100) : 0;
                    tooltipContent += `• ${title}: ${earned}/${max} (${percentage}%)\n`;
                });
                
                progressBar.setAttribute('data-tooltip', tooltipContent);
            }
        } catch (error) {
            // Échec silencieux pour le fallback
        }
    }
    
    setupProgressBarSegments(progressBar) {
        // Configure les interactions avec les nouvelles barres segmentées
        const segmentedProgressBar = progressBar.querySelector('.segmented-progress-bar');
        const segments = progressBar.querySelectorAll('.progress-segment');
        const progressContainer = progressBar.closest('.segmented-progress');
        
        if (!segmentedProgressBar || !progressContainer) return;
        
        // Configuration de l'expansion/contraction
        this.setupSegmentedProgressInteractions(progressContainer, segmentedProgressBar, segments);
        
        // Configuration des segments individuels
        segments.forEach((segment, index) => {
            this.setupSegmentInteractions(segment, index, segments);
        });
        
        // Support clavier pour l'accessibilité
        this.setupKeyboardNavigation(progressContainer, segments);
    }
    
    setupSegmentedProgressInteractions(container, progressBar, segments) {
        // Le mode expandé est maintenant par défaut, donc moins d'interactions nécessaires
        // Garde juste les interactions de base pour la consistance
        
        // Effet de focus pour l'accessibilité
        container.addEventListener('mouseenter', () => {
            container.style.transform = 'translateY(-1px)';
        });
        
        container.addEventListener('mouseleave', () => {
            container.style.transform = '';
        });
    }
    
    setupSegmentInteractions(segment, index, allSegments) {
        // Tooltip enrichi au hover
        this.enhanceSegmentTooltip(segment);
        
        // Clic sur un segment pour afficher les détails
        segment.addEventListener('click', (e) => {
            e.stopPropagation();
            this.showSegmentDetails(segment);
        });
        
        // Effets visuels améliorés
        segment.addEventListener('mouseenter', () => {
            this.highlightSegment(segment, allSegments);
        });
        
        segment.addEventListener('mouseleave', () => {
            this.resetSegmentHighlights(allSegments);
        });
        
        // Support focus pour accessibilité
        segment.addEventListener('focus', () => {
            this.highlightSegment(segment, allSegments);
        });
        
        segment.addEventListener('blur', () => {
            this.resetSegmentHighlights(allSegments);
        });
    }
    
    // Méthodes utilitaires pour les barres segmentées
    
    setupKeyboardNavigation(container, segments) {
        container.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowRight':
                case 'ArrowLeft':
                    // Navigation directe entre les segments
                    e.preventDefault();
                    this.navigateSegments(segments, e.key === 'ArrowRight' ? 1 : -1);
                    break;
                case 'Enter':
                case ' ':
                    // Activer le segment focalisé
                    e.preventDefault();
                    const focusedSegment = document.activeElement;
                    if (focusedSegment && focusedSegment.classList.contains('progress-segment')) {
                        focusedSegment.click();
                    }
                    break;
            }
        });
    }
    
    navigateSegments(segments, direction) {
        const focusedSegment = document.activeElement;
        const currentIndex = Array.from(segments).indexOf(focusedSegment);
        
        if (currentIndex !== -1) {
            const nextIndex = Math.max(0, Math.min(segments.length - 1, currentIndex + direction));
            segments[nextIndex].focus();
        } else if (segments.length > 0) {
            segments[direction > 0 ? 0 : segments.length - 1].focus();
        }
    }
    
    highlightSegment(targetSegment, allSegments) {
        allSegments.forEach((segment, index) => {
            if (segment === targetSegment) {
                segment.style.filter = 'brightness(1.2) saturate(1.1)';
                segment.style.transform = 'scaleY(1.05)';
                segment.style.zIndex = '20';
            } else {
                segment.style.filter = 'brightness(0.8) saturate(0.8)';
                segment.style.opacity = '0.7';
            }
        });
    }
    
    resetSegmentHighlights(allSegments) {
        allSegments.forEach(segment => {
            segment.style.filter = '';
            segment.style.transform = '';
            segment.style.zIndex = '';
            segment.style.opacity = '';
        });
    }
    
    showSegmentDetails(segment) {
        const assessmentTitle = segment.dataset.assessmentTitle;
        const earnedThis = segment.dataset.earnedThis;
        const maxThis = segment.dataset.maxThis;
        const performance = segment.dataset.assessmentPerformance;
        const contributionPercentage = segment.dataset.contributionPercentage;
        
        const content = `
            <div class="space-y-3">
                <div class="text-center">
                    <h4 class="font-semibold text-lg">${assessmentTitle}</h4>
                </div>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="font-medium text-blue-800">Points obtenus</div>
                        <div class="text-xl font-bold text-blue-900">${earnedThis}/${maxThis}</div>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <div class="font-medium text-green-800">Performance</div>
                        <div class="text-xl font-bold text-green-900">${performance}%</div>
                    </div>
                </div>
                <div class="bg-purple-50 p-3 rounded-lg">
                    <div class="font-medium text-purple-800 mb-1">Contribution au total</div>
                    <div class="w-full bg-purple-200 rounded-full h-2">
                        <div class="bg-purple-600 h-2 rounded-full transition-all duration-500" 
                             style="width: ${contributionPercentage}%"></div>
                    </div>
                    <div class="text-sm text-purple-700 mt-1">${contributionPercentage}% du total de la compétence</div>
                </div>
            </div>
        `;
        
        const modal = this.parent.ui.createModal(`Détails - ${assessmentTitle}`, content);
        document.body.appendChild(modal);
    }
    
    announceStateChange(state) {
        // Annonce vocale pour les lecteurs d'écran
        const announcement = document.createElement('div');
        announcement.setAttribute('aria-live', 'polite');
        announcement.setAttribute('aria-atomic', 'true');
        announcement.className = 'sr-only';
        announcement.textContent = `Barre de progression ${state}`;
        
        document.body.appendChild(announcement);
        setTimeout(() => announcement.remove(), 1000);
    }
    
    enhanceSegmentTooltip(segment) {
        // Améliore le tooltip avec plus d'informations visuelles
        const assessmentTitle = segment.dataset.assessmentTitle;
        const performance = segment.dataset.assessmentPerformance;
        const earnedThis = segment.dataset.earnedThis;
        const maxThis = segment.dataset.maxThis;
        const contributionPercentage = segment.dataset.contributionPercentage;
        
        // Créer un tooltip enrichi pour les nouveaux segments
        const tooltipContent = `${assessmentTitle}: ${earnedThis}/${maxThis} pts (${performance}%) - ${contributionPercentage}% du total. Cliquez pour plus de détails.`;
        segment.title = tooltipContent;
        
        // Ajouter une classe pour identifier le niveau de performance
        const perfNum = parseInt(performance);
        if (perfNum >= 90) {
            segment.classList.add('segment-excellent');
        } else if (perfNum >= 70) {
            segment.classList.add('segment-good');
        } else if (perfNum >= 50) {
            segment.classList.add('segment-average');
        } else {
            segment.classList.add('segment-struggling');
        }
        
        // Ajouter un indicateur visuel de performance dans le style
        segment.style.setProperty('--performance-level', perfNum);
    }
    
    
    animateProgressBarsSequentially(clonedStudent) {
        // Anime les barres de progression de façon séquentielle pour un effet visuel agréable
        
        const competenceBars = clonedStudent.querySelectorAll('.competence-progress-bar .progress-bar-fill');
        const domainBars = clonedStudent.querySelectorAll('.domain-progress-bar .progress-bar-fill');
        
        // Combiner toutes les barres
        const allBars = [...competenceBars, ...domainBars];
        
        // Animer chaque barre avec un délai progressif
        allBars.forEach((bar, index) => {
            // Sauvegarder la largeur finale
            const finalWidth = bar.style.width;
            
            // Commencer à 0
            bar.style.width = '0%';
            
            // Animer vers la valeur finale avec un délai
            setTimeout(() => {
                bar.style.width = finalWidth;
                bar.style.transition = 'width 0.8s ease-out';
                
                // Effet de "pulse" léger à la fin de l'animation
                setTimeout(() => {
                    bar.style.transform = 'scaleY(1.1)';
                    setTimeout(() => {
                        bar.style.transform = 'scaleY(1)';
                        bar.style.transition = 'width 0.8s ease-out, transform 0.2s ease-out';
                    }, 150);
                }, 800);
                
            }, index * 100); // Délai de 100ms entre chaque barre
        });
    }
    
    syncProgressBarsToOriginal(studentId) {
        // Synchronise les barres de progression entre l'élément original et le clone focus
        
        // Cette fonction sera appelée quand les données changent
        // Pour l'instant, les données sont statiques, mais elle sera utile pour les futures évolutions
        const originalStudent = document.querySelector(`[data-student-card="${studentId}"]`);
        const focusStudent = document.querySelector(`[data-focus-clone-of="${studentId}"]`);
        
        if (!originalStudent || !focusStudent) return;
        
        // Synchroniser les valeurs des barres si nécessaire
    }

    async saveFocusAppreciation(studentId, appreciation, immediate = false) {
        try {
            // Afficher l'état de sauvegarde
            this.showFocusSavingState(studentId, true);

            const response = await fetch(`/classes/${this.parent.classId}/council/appreciation/${studentId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    appreciation: appreciation,
                    trimester: this.parent.state.currentTrimester
                })
            });

            const result = await response.json();

            if (response.ok && result.success) {
                this.showFocusSavedState(studentId);
                this.parent.state.modifiedAppreciations.delete(studentId);
                
                // Synchroniser avec l'élément original
                this.syncAppreciationStatusToOriginal(studentId, result.has_content);
                this.syncLastModifiedToOriginal(studentId, result.last_modified);
                
                // Toast de confirmation
                if (immediate) {
                    this.parent.showToast('Appréciation sauvegardée', 'success');
                }
            } else {
                throw new Error(result.error || 'Erreur de sauvegarde');
            }

        } catch (error) {
            console.error('❌ Erreur sauvegarde appréciation focus:', error);
            this.showFocusErrorState(studentId, error.message);
            this.parent.state.modifiedAppreciations.add(studentId);
            this.parent.showToast('Erreur de sauvegarde', 'error');
        } finally {
            this.showFocusSavingState(studentId, false);
        }
    }

    syncAppreciationToOriginal(studentId, value) {
        // Synchroniser le texte avec l'élément original dans la liste
        const originalTextarea = document.querySelector(`[data-student-card="${studentId}"] [data-appreciation-textarea]`);
        if (originalTextarea && originalTextarea.value !== value) {
            originalTextarea.value = value;
        }
    }

    syncAppreciationStatusToOriginal(studentId, hasContent) {
        // Synchroniser l'état d'appréciation avec l'élément original
        const originalCard = document.querySelector(`[data-student-card="${studentId}"]`);
        if (originalCard) {
            originalCard.dataset.hasAppreciation = hasContent ? 'true' : 'false';
            
            // Mettre à jour l'indicateur de statut
            const indicator = originalCard.querySelector('.inline-flex.items-center.px-2.py-1.rounded-full');
            if (indicator) {
                if (hasContent) {
                    indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800';
                    indicator.innerHTML = '<span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>Rédigée';
                } else {
                    indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-orange-100 text-orange-800';
                    indicator.innerHTML = '<span class="w-2 h-2 bg-orange-400 rounded-full mr-1"></span>À rédiger';
                }
            }
        }
    }

    syncLastModifiedToOriginal(studentId, lastModified) {
        const originalElement = document.querySelector(`[data-student-card="${studentId}"] [data-last-modified="${studentId}"]`);
        if (originalElement) {
            const date = new Date(lastModified);
            originalElement.textContent = date.toLocaleDateString('fr-FR', {
                day: '2-digit',
                month: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    }

    showFocusSavingState(studentId, isSaving) {
        const indicator = document.querySelector(`[data-focus-clone-of="${studentId}"] [data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        if (isSaving) {
            indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800';
            indicator.innerHTML = '<svg class="animate-spin w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Sauvegarde...';
            indicator.classList.remove('hidden');
        }
    }

    showFocusSavedState(studentId) {
        const indicator = document.querySelector(`[data-focus-clone-of="${studentId}"] [data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800';
        indicator.innerHTML = '<span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>Sauvegardé';
        
        setTimeout(() => {
            indicator.classList.add('hidden');
        }, 2000);
    }

    showFocusErrorState(studentId, error) {
        const indicator = document.querySelector(`[data-focus-clone-of="${studentId}"] [data-save-indicator="${studentId}"]`);
        if (!indicator) return;

        indicator.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-red-100 text-red-800';
        indicator.innerHTML = '<span class="w-2 h-2 bg-red-400 rounded-full mr-1"></span>Erreur';
        indicator.title = error;
        indicator.classList.remove('hidden');
    }

    focusAppreciationTextarea(clonedStudent) {
        // Attendre que l'élément soit complètement rendu
        setTimeout(() => {
            const textarea = clonedStudent.querySelector('[data-appreciation-textarea]');
            if (textarea) {
                textarea.focus();
                
                // Positionner le curseur à la fin du texte existant
                const textLength = textarea.value.length;
                textarea.setSelectionRange(textLength, textLength);
                
                // Scroll smooth vers le textarea si nécessaire
                textarea.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'center',
                    inline: 'nearest'
                });
            }
        }, 100); // Délai pour s'assurer que l'animation est terminée
    }

    updatePositionIndicator() {
        if (this.parent.elements.focusCurrentSpan) {
            this.parent.elements.focusCurrentSpan.textContent = this.parent.state.focusCurrentIndex + 1;
        }
    }

    updateNavigationButtons() {
        const prevBtn = this.parent.elements.focusPrevBtn;
        const nextBtn = this.parent.elements.focusNextBtn;
        const currentIndex = this.parent.state.focusCurrentIndex;
        const totalStudents = this.parent.state.filteredStudents.length;

        if (prevBtn) {
            prevBtn.disabled = currentIndex <= 0;
        }

        if (nextBtn) {
            nextBtn.disabled = currentIndex >= totalStudents - 1;
        }
    }

    navigatePrevious() {
        if (this.parent.state.focusCurrentIndex > 0) {
            this.parent.state.focusCurrentIndex--;
            this.showCurrentStudent();
        }
    }

    navigateNext() {
        if (this.parent.state.focusCurrentIndex < this.parent.state.filteredStudents.length - 1) {
            this.parent.state.focusCurrentIndex++;
            this.showCurrentStudent();
        }
    }

    optimizeHeight() {
        const focusContainer = this.parent.elements.focusModeDisplay;
        if (!focusContainer) return;

        const student = focusContainer.querySelector('.focus-mode-student');
        if (!student) return;

        // Forcer explicitement la hauteur complète
        student.style.height = '100%';
        student.style.minHeight = '100%';
        student.style.maxHeight = 'none';
        student.style.display = 'flex';
        student.style.flexDirection = 'column';
        student.style.overflow = 'hidden';
        
        // S'assurer que le header garde sa taille et ne grandit pas
        const headerContainer = student.querySelector('.px-6.py-4');
        if (headerContainer) {
            headerContainer.style.flexShrink = '0';
            headerContainer.style.flex = 'none';
        }
        
        // S'assurer que la section détails utilise tout l'espace restant
        const detailsSection = student.querySelector('[data-student-details]');
        if (detailsSection) {
            detailsSection.style.flex = '1 1 0';
            detailsSection.style.height = '0'; // Force flexbox
            detailsSection.style.display = 'block';
            detailsSection.style.overflowY = 'auto';
            detailsSection.style.minHeight = '0';
        }
        
        // Scroll vers le haut si nécessaire
        window.scrollTo(0, 0);
        
        // Debug des hauteurs
        const containerHeight = focusContainer.offsetHeight;
        const studentHeight = student.offsetHeight;
    }

    preserveJsonDataBeforeCloning(originalStudent) {
        const jsonDataMap = new Map();
        
        try {
            const progressBars = originalStudent.querySelectorAll('.progress-bar-container[data-assessments]');
            
            progressBars.forEach((bar, index) => {
                const rawData = bar.dataset.assessments;
                if (rawData && rawData.trim() !== '') {
                    const competenceName = bar.dataset.competenceName || bar.dataset.domainName || `progress-${index}`;
                    const key = `${competenceName}-${index}`;
                    
                    const preservedData = {
                        rawData: rawData,
                        competenceName: competenceName,
                        domainName: bar.dataset.domainName,
                        index: index
                    };
                    
                    // Essayer de parser pour valider
                    try {
                        preservedData.parsedData = JSON.parse(rawData);
                        preservedData.isValid = true;
                    } catch (parseError) {
                        preservedData.isValid = false;
                        preservedData.parseError = parseError.message;
                    }
                    
                    jsonDataMap.set(key, preservedData);
                }
            });
            
        } catch (error) {
            console.error('❌ Erreur sauvegarde données JSON:', error.message);
        }
        
        return jsonDataMap;
    }

    restoreJsonDataAfterCloning(clonedStudent, savedJsonData) {
        if (!savedJsonData || savedJsonData.size === 0) {
            return;
        }
        
        try {
            const progressBars = clonedStudent.querySelectorAll('.progress-bar-container');
            
            progressBars.forEach((bar, index) => {
                const competenceName = bar.dataset.competenceName || bar.dataset.domainName || `progress-${index}`;
                const key = `${competenceName}-${index}`;
                
                const savedData = savedJsonData.get(key);
                if (savedData) {
                    // Restaurer les données sauvegardées
                    bar.dataset.assessments = savedData.rawData;
                    
                    if (savedData.competenceName) {
                        bar.dataset.competenceName = savedData.competenceName;
                    }
                    if (savedData.domainName) {
                        bar.dataset.domainName = savedData.domainName;
                    }
                }
            });
            
        } catch (error) {
            console.error('❌ Erreur restauration données JSON:', error.message);
        }
    }


    // Méthode appelée après les filtres - NON UTILISÉE en mode focus
    onFiltersChanged() {
        // En mode focus, on ignore les filtres
        if (this.parent.state.isFocusMode) {
            return;
        }
    }
}

// Auto-initialization
document.addEventListener('DOMContentLoaded', () => {
    const councilContainer = document.querySelector('[data-council-preparation]');
    if (councilContainer) {
        const classId = councilContainer.dataset.classId;
        if (classId) {
            window.currentCouncilPreparation = new CouncilPreparation(parseInt(classId));
        }
    }
});

// Global export
window.CouncilPreparation = CouncilPreparation;