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

{% block title %}Importation des Notes{% endblock %}

{% block dashboard_stylesheets %}
<style>
/* CSS pour l'importation des notes */
.import-page-v2 { margin-top: 1rem; }

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; padding: 1.5rem 0; border-bottom: 2px solid var(--border-color);
}

.page-title {
    color: var(--text-primary); font-size: 1.75rem; font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 0.75rem;
}

.page-title i {
    color: var(--primary-blue); background: rgba(30, 64, 175, 0.1);
    padding: 0.5rem; border-radius: var(--border-radius);
}

.template-download {
    background: var(--primary-blue); color: white; padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius); text-decoration: none; font-weight: 600;
    transition: var(--transition); border: none; box-shadow: var(--shadow);
}

.template-download:hover {
    background: var(--dark-blue); color: white; transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.section-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); box-shadow: var(--shadow);
    margin-bottom: 1.5rem; overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem;
}

.section-body { padding: 1rem; }

.mini-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); padding: 0.75rem; height: 100%;
}

.mini-card h6 {
    font-size: 0.85rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary);
}

.badge-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.mini-list { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; }

.mini-list li {
    padding: 0.25rem 0; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.5rem;
}

.columns-summary { font-size: 0.8rem; }

.column-tags { margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }

.col-tag {
    background: rgba(30, 64, 175, 0.1); color: var(--primary-blue);
    padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.7rem;
    font-family: 'Courier New', monospace; font-weight: 600;
}

.drop-zone {
    border: 3px dashed var(--border-color); border-radius: var(--border-radius);
    padding: 3rem 1.5rem; text-align: center; transition: var(--transition);
    background: var(--bg-secondary); cursor: pointer;
}

.drop-zone:hover {
    border-color: var(--primary-blue); background: rgba(30, 64, 175, 0.02);
}

.upload-icon {
    color: var(--primary-blue); font-size: 3rem; margin-bottom: 1rem;
    opacity: 0.7; transition: var(--transition);
}

.upload-text {
    color: var(--text-primary); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;
}

.upload-subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }

.file-browser-btn {
    background: var(--primary-blue); color: white; border: none;
    padding: 0.75rem 1.5rem; border-radius: var(--border-radius);
    font-weight: 600; cursor: pointer; transition: var(--transition);
}

.selected-file {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white; border-radius: var(--border-radius);
    padding: 1.5rem; margin-top: 1.5rem;
}

.file-info { display: flex; align-items: center; justify-content: space-between; }

.file-details { display: flex; align-items: center; gap: 1rem; }

.file-icon { font-size: 2rem; }

.file-actions { display: flex; gap: 0.5rem; }

.file-actions .btn {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    color: white; padding: 0.5rem 1rem; border-radius: calc(var(--border-radius) - 2px);
    font-size: 0.875rem;
}

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }

.stat-item {
    text-align: center; padding: 1rem; background: var(--bg-secondary);
    border-radius: calc(var(--border-radius) - 2px); border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-number {
    font-size: 1.75rem; font-weight: 700; line-height: 1;
    margin-bottom: 0.25rem; color: var(--text-primary);
}

.stat-label {
    color: var(--text-secondary); font-size: 0.875rem;
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
}

.default-stats { text-align: center; color: var(--text-secondary); padding: 2rem 1rem; }

.default-stats i {
    font-size: 3rem; color: var(--primary-blue); opacity: 0.3; margin-bottom: 1rem;
}

.import-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

.import-btn {
    background: var(--success); color: white; border: none;
    padding: 0.75rem 1.5rem; border-radius: var(--border-radius);
    font-weight: 600; cursor: pointer; transition: var(--transition);
}

.import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Styles pour la barre de progression */
.progress-container {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 1rem; margin-top: 1rem;
}

.progress-wrapper { text-align: center; }

.progress-bar-container {
    background: var(--bg-secondary); border-radius: 10px; height: 20px;
    margin-bottom: 0.5rem; overflow: hidden; position: relative;
}

.progress-bar {
    height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 10px; transition: width 0.3s ease;
}

.progress-text {
    color: var(--text-primary); font-size: 0.9rem; font-weight: 600;
}

/* Corrections mode sombre */
body.dark-mode .mini-card { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .mini-card h6 { color: var(--text-primary); }
body.dark-mode .mini-list li { color: var(--text-primary); }
body.dark-mode .columns-summary { color: var(--text-primary); }
body.dark-mode .col-tag { background: rgba(30, 64, 175, 0.2); color: var(--primary-blue); }
body.dark-mode .upload-text, body.dark-mode .upload-subtitle { color: var(--text-primary); }
body.dark-mode .stat-number { color: var(--text-primary); }
body.dark-mode .stat-label { color: var(--text-secondary); }
body.dark-mode .page-title { color: var(--text-primary); }
body.dark-mode .progress-container { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .progress-bar-container { background: var(--bg-secondary); }
body.dark-mode .progress-text { color: var(--text-primary); }
</style>
{% endblock %}

{% block dashboard_content %}
<div class="import-page-v2">
    <!-- En-tête de la page -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="fas fa-chart-line"></i>
            Importation des Notes
        </h1>
        <a href="{{ path('admin_grades_import_template') }}" class="template-download">
            <i class="fas fa-download"></i> Télécharger le Modèle CSV
        </a>
    </div>

    <!-- Section 1: Instructions -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-info-circle"></i>
            Instructions d'Importation des Notes
        </div>
        <div class="section-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="mini-card">
                        <h6><i class="fas fa-file-csv text-primary"></i> Format Requis</h6>
                        <div class="badge-list">
                            <span class="badge bg-success">CSV</span>
                            <span class="badge bg-info">UTF-8</span>
                            <span class="badge bg-warning">Max 10MB</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mini-card">
                        <h6><i class="fas fa-lightbulb text-warning"></i> Conseils</h6>
                        <ul class="mini-list">
                            <li><i class="fas fa-check text-success"></i> Utilisez le modèle fourni</li>
                            <li><i class="fas fa-check text-success"></i> Vérifiez les matricules</li>
                            <li><i class="fas fa-check text-success"></i> Validez les notes (0-20)</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mini-card">
                        <h6><i class="fas fa-columns text-primary"></i> Colonnes Requises</h6>
                        <div class="columns-summary">
                            <small>6 colonnes obligatoires :</small>
                            <div class="column-tags">
                                <span class="col-tag">matricule</span>
                                <span class="col-tag">nom</span>
                                <span class="col-tag">prenom</span>
                                <span class="col-tag">note1</span>
                                <span class="col-tag">note2</span>
                                <span class="col-tag">note3</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 2: Upload et Statistiques -->
    <div class="row">
        <div class="col-lg-8">
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-cloud-upload-alt"></i>
                    Zone de Téléchargement
                </div>
                <div class="section-body">
                    <form id="importForm" enctype="multipart/form-data">
                        <div class="drop-zone" id="dropZone">
                            <i class="fas fa-chart-line upload-icon"></i>
                            <div class="upload-text">Glissez-déposez votre fichier CSV de notes ici</div>
                            <div class="upload-subtitle">ou cliquez pour parcourir vos fichiers</div>
                            <button type="button" class="file-browser-btn" onclick="document.getElementById('fileInput').click()">
                                <i class="fas fa-folder-open"></i> Parcourir les Fichiers
                            </button>
                            <input type="file" id="fileInput" name="file" accept=".csv" style="display: none;">
                        </div>

                        <div id="selectedFile" class="selected-file" style="display: none;">
                            <div class="file-info">
                                <div class="file-details">
                                    <i class="fas fa-file-csv file-icon"></i>
                                    <div>
                                        <h6 class="mb-1" id="fileName">nom_fichier.csv</h6>
                                        <small id="fileSize">0 KB</small>
                                    </div>
                                </div>
                                <div class="file-actions">
                                    <button type="button" class="btn" onclick="previewFile()" id="previewBtn">
                                        <i class="fas fa-eye"></i> Aperçu
                                    </button>
                                    <button type="button" class="btn" onclick="removeFile()">
                                        <i class="fas fa-times"></i> Supprimer
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Section paramètres d'importation -->
                        <div class="section-card" id="importParamsSection" style="margin-top: 1.5rem;">
                            <div class="section-header">
                                <i class="fas fa-cogs"></i>
                                Paramètres d'Importation
                            </div>
                            <div class="section-body">
                                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                                    <div style="flex:1; min-width:200px;">
                                        <label for="department" class="form-label">Département <span style="color: var(--danger);">*</span></label>
                                        <select id="department" name="department" class="form-control" required>
                                            <option value="">Sélectionnez un département</option>
                                        </select>
                                    </div>
                                    <div style="flex:1; min-width:200px;">
                                        <label for="academicYear" class="form-label">Année Académique <span style="color: var(--danger);">*</span></label>
                                        <select id="academicYear" name="academicYear" class="form-control" required disabled>
                                            <option value="">Sélectionnez d'abord un département</option>
                                        </select>
                                    </div>
                                    <div style="flex:1; min-width:200px;">
                                        <label for="semester" class="form-label">Semestre <span style="color: var(--danger);">*</span></label>
                                        <select id="semester" name="semester" class="form-control" required disabled>
                                            <option value="">Sélectionnez d'abord une année</option>
                                        </select>
                                    </div>
                                    <div style="flex:2; min-width:300px;">
                                        <label for="course" class="form-label">Cours <span style="color: var(--danger);">*</span></label>
                                        <select id="course" name="course" class="form-control" required disabled>
                                            <option value="">Sélectionnez un semestre</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="import-actions">
                            <button type="submit" class="import-btn" id="importBtn" disabled>
                                <i class="fas fa-upload"></i> Lancer l'Importation
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-chart-bar"></i>
                    Statistiques d'importation
                </div>
                <div class="section-body">
                    <div id="defaultStats" class="default-stats">
                        <i class="fas fa-chart-line"></i>
                        <p>Sélectionnez un fichier CSV pour voir les statistiques</p>
                    </div>
                    
                    <div id="fileStats" style="display: none;">
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-number" id="totalRows">0</div>
                                <div class="stat-label">
                                    <i class="fas fa-list"></i>
                                    Total lignes
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="validGrades">0</div>
                                <div class="stat-label">
                                    <i class="fas fa-check-circle"></i>
                                    Notes valides
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="invalidGrades">0</div>
                                <div class="stat-label">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Erreurs
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="uniqueStudents">0</div>
                                <div class="stat-label">
                                    <i class="fas fa-user-graduate"></i>
                                    Étudiants
                                </div>
                            </div>
                        </div>
                        
                        <div class="import-tips mt-3">
                            <h6><i class="fas fa-info-circle"></i> Conseils :</h6>
                            <ul style="font-size: 0.85rem; margin: 0; padding-left: 1.2rem;">
                                <li>Vérifiez que les matricules correspondent aux étudiants inscrits</li>
                                <li>Les notes doivent être comprises entre 0 et 20</li>
                                <li>Assurez-vous que les matières existent dans le système</li>
                                <li>Corrigez les erreurs avant de lancer l'importation</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 3: Aperçu du fichier -->
    <div id="previewSection" class="section-card" style="display: none;">
        <div class="section-header">
            <i class="fas fa-eye"></i>
            Aperçu du Fichier de Notes
        </div>
        <div class="section-body" style="padding: 0;">
            <div id="previewContent"></div>
        </div>
    </div>

    <!-- Section 4: Rapport d'importation -->
    <div id="importReportSection" class="section-card" style="display: none;">
        <div class="section-header">
            <i class="fas fa-chart-line"></i>
            Rapport d'Importation des Notes
        </div>
        <div class="section-body">
            <div id="importReportContent"></div>
        </div>
    </div>

    <!-- Section 5: Barre de progression -->
    <div id="progressSection" class="progress-container" style="display: none;">
        <div class="progress-wrapper">
            <div class="progress-bar-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            <div class="progress-text" id="progressText">Importation en cours...</div>
        </div>
    </div>

    <!-- Alertes -->
    <div class="row">
        <div class="col-12">
            <div id="alertsContainer"></div>
        </div>
    </div>
</div>

<script>
// JavaScript pour l'importation des notes
let currentFile = null;

document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const importForm = document.getElementById('importForm');
    const departmentSelect = document.getElementById('department');
    const courseSelect = document.getElementById('course');

    // Charger les départements
    loadDepartments();

    // Gestion du drag & drop
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = 'var(--primary-blue)';
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = 'var(--border-color)';
        if (e.dataTransfer.files.length > 0) {
            handleFile(e.dataTransfer.files[0]);
        }
    });

    dropZone.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', (e) => {
        if (e.target.files[0]) {
            handleFile(e.target.files[0]);
        }
    });

    function handleFile(file) {
        if (!file.name.toLowerCase().endsWith('.csv')) {
            showAlert('Seuls les fichiers CSV sont supportés pour l\'importation des notes.', 'warning');
            return;
        }
        
        if (file.size > 10 * 1024 * 1024) {
            showAlert('Le fichier ne doit pas dépasser 10MB.', 'danger');
            return;
        }

        currentFile = file;
        
        // Afficher le fichier sélectionné
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = formatFileSize(file.size);
        document.getElementById('selectedFile').style.display = 'block';
        document.getElementById('dropZone').style.display = 'none';
        
        // Activer les statistiques
        document.getElementById('defaultStats').style.display = 'none';
        document.getElementById('fileStats').style.display = 'block';
        
        // Analyser le fichier pour les statistiques
        analyzeGradesFile(file);
        
        // Vérifier les paramètres d'importation
        checkImportParams();
        
        showAlert(`Fichier de notes ${file.name} sélectionné avec succès.`, 'success');
    }

    // Gestion du formulaire d'importation
    importForm.addEventListener('submit', function(e) {
        e.preventDefault();
        if (currentFile && validateImportParams()) {
            startImport();
        }
    });

    // Gestion du changement de département
    departmentSelect.addEventListener('change', function() {
        const departmentId = this.value;
        const academicYearSelect = document.getElementById('academicYear');
        const semesterSelect = document.getElementById('semester');
        const courseSelect = document.getElementById('course');
        
        // Réinitialiser les années académiques, semestres et cours
        academicYearSelect.innerHTML = '<option value="">Chargement...</option>';
        academicYearSelect.disabled = true;
        semesterSelect.innerHTML = '<option value="">Sélectionnez d\'abord une année</option>';
        semesterSelect.disabled = true;
        courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
        courseSelect.disabled = true;
        
        if (departmentId) {
            loadAcademicYears(departmentId);
        } else {
            academicYearSelect.innerHTML = '<option value="">Sélectionnez d\'abord un département</option>';
            semesterSelect.innerHTML = '<option value="">Sélectionnez d\'abord une année</option>';
            courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
        }
        checkImportParams();
    });

    // Gestion du changement d'année académique
    document.getElementById('academicYear').addEventListener('change', function() {
        const departmentId = document.getElementById('department').value;
        const academicYearId = this.value;
        const semesterSelect = document.getElementById('semester');
        const courseSelect = document.getElementById('course');
        
        // Réinitialiser les semestres et cours
        semesterSelect.innerHTML = '<option value="">Chargement...</option>';
        semesterSelect.disabled = true;
        courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
        courseSelect.disabled = true;
        
        if (departmentId && academicYearId) {
            loadSemesters(departmentId, academicYearId);
        } else {
            semesterSelect.innerHTML = '<option value="">Sélectionnez d\'abord une année</option>';
            courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
        }
        checkImportParams();
    });

    // Gestion du changement de semestre
    document.getElementById('semester').addEventListener('change', function() {
        const departmentId = document.getElementById('department').value;
        const academicYearId = document.getElementById('academicYear').value;
        const semesterId = this.value;
        const courseSelect = document.getElementById('course');
        
        courseSelect.innerHTML = '<option value="">Chargement...</option>';
        courseSelect.disabled = true;
        
        if (departmentId && academicYearId && semesterId) {
            loadCourses(departmentId, academicYearId, semesterId);
        } else {
            courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
        }
        checkImportParams();
    });

    // Gestion du changement de cours
    courseSelect.addEventListener('change', checkImportParams);
});

function detectDelimiter(csvData) {
    const lines = csvData.split('\n').filter(line => line.trim()).slice(0, 5);
    let commaCount = 0;
    let semicolonCount = 0;
    
    lines.forEach(line => {
        commaCount += (line.match(/,/g) || []).length;
        semicolonCount += (line.match(/;/g) || []).length;
    });
    
    return semicolonCount > commaCount ? ';' : ',';
}

function updateDetectionStats(delimiter, headers, requiredColumns, missingColumns, totalRows) {
    const defaultStats = document.getElementById('defaultStats');
    const fileStats = document.getElementById('fileStats');
    
    // Masquer les stats par défaut et afficher les nouvelles
    defaultStats.style.display = 'none';
    fileStats.style.display = 'block';
    
    // Créer une nouvelle section pour les informations de détection
    let detectionHTML = `
        <div class="mb-3">
            <h6><i class="fas fa-info-circle text-primary"></i> Informations de détection</h6>
            
            <div class="row mb-2">
                <div class="col-6">
                    <div class="stat-item">
                        <div class="stat-label">
                            <i class="fas fa-columns"></i>
                            Délimiteur
                        </div>
                        <div class="stat-number" style="font-size: 1rem; color: var(--primary-blue);">
                            ${delimiter === ',' ? 'Virgule (,)' : 'Point-virgule (;)'}
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-item">
                        <div class="stat-label">
                            <i class="fas fa-list"></i>
                            Nb colonnes
                        </div>
                        <div class="stat-number" style="font-size: 1rem;">
                            ${headers.length}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="section-card" style="margin-bottom: 1rem;">
                <div class="section-header" style="background: var(--success); color: white; padding: 0.5rem;">
                    <i class="fas fa-check-circle"></i> Colonnes détectées
                </div>
                <div class="section-body" style="padding: 0.75rem;">
                    <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                        ${headers.map(col => `<span class="badge bg-success">${col}</span>`).join('')}
                    </div>
                </div>
            </div>
            
            <div class="section-card" style="margin-bottom: 1rem;">
                <div class="section-header" style="background: var(--primary-blue); color: white; padding: 0.5rem;">
                    <i class="fas fa-list-check"></i> Colonnes requises
                </div>
                <div class="section-body" style="padding: 0.75rem;">
                    <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                        ${requiredColumns.map(col => `<span class="badge bg-primary">${col}</span>`).join('')}
                    </div>
                </div>
            </div>
            
            ${missingColumns.length > 0 ? `
                <div class="section-card" style="margin-bottom: 1rem;">
                    <div class="section-header" style="background: var(--danger); color: white; padding: 0.5rem;">
                        <i class="fas fa-exclamation-triangle"></i> Colonnes manquantes
                    </div>
                    <div class="section-body" style="padding: 0.75rem;">
                        <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                            ${missingColumns.map(col => `<span class="badge bg-danger">${col}</span>`).join('')}
                        </div>
                    </div>
                </div>
            ` : `
                <div class="alert alert-success" style="padding: 0.5rem; margin-bottom: 1rem;">
                    <i class="fas fa-check-circle"></i> <small>Toutes les colonnes requises sont présentes !</small>
                </div>
            `}
        </div>
    `;
    
    // Insérer avant les statistiques existantes
    fileStats.innerHTML = detectionHTML + fileStats.innerHTML;
}

function analyzeGradesFile(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const csvData = e.target.result;
            const lines = csvData.split('\n').filter(line => line.trim());
            
            if (lines.length < 2) {
                showAlert('Le fichier semble vide ou ne contient pas de données.', 'warning');
                return;
            }

            const delimiter = detectDelimiter(csvData);
            const headers = lines[0].split(delimiter).map(h => h.trim().toLowerCase());
            const dataLines = lines.slice(1);
            
            // Vérifier les colonnes requises
            const requiredColumns = ['matricule', 'nom', 'prenom', 'note1', 'note2', 'note3'];
            const missingColumns = requiredColumns.filter(col => !headers.includes(col));
            
            if (missingColumns.length > 0) {
                showAlert(`Validation échouée - Colonnes manquantes: ${missingColumns.join(', ')}`, 'danger');
                
                // Afficher les informations de détection dans les statistiques
                updateDetectionStats(delimiter, headers, requiredColumns, missingColumns, dataLines.length);
                return;
            } else {
                showAlert('Fichier validé avec succès !', 'success');
            }

            // Analyser les données
            let validGrades = 0;
            let invalidGrades = 0;
            const uniqueStudents = new Set();
            
            dataLines.forEach(line => {
                const values = line.split(delimiter).map(v => v.trim());
                if (values.length >= requiredColumns.length) {
                    const noteIndex = headers.indexOf('note');
                    const matriculeIndex = headers.indexOf('matricule');
                    
                    if (noteIndex >= 0 && matriculeIndex >= 0) {
                        const note = parseFloat(values[noteIndex]);
                        const matricule = values[matriculeIndex];
                        
                        if (!isNaN(note) && note >= 0 && note <= 20 && matricule) {
                            validGrades++;
                            uniqueStudents.add(matricule);
                        } else {
                            invalidGrades++;
                        }
                    }
                }
            });

            // Mettre à jour les statistiques
            document.getElementById('totalRows').textContent = dataLines.length;
            document.getElementById('validGrades').textContent = validGrades;
            document.getElementById('invalidGrades').textContent = invalidGrades;
            document.getElementById('uniqueStudents').textContent = uniqueStudents.size;
            
            // Afficher les informations de détection dans les statistiques
            updateDetectionStats(delimiter, headers, requiredColumns, [], dataLines.length);

        } catch (error) {
            showAlert('Erreur lors de l\'analyse du fichier de notes.', 'danger');
            console.error(error);
        }
    };
    reader.readAsText(file);
}

function removeFile() {
    currentFile = null;
    document.getElementById('selectedFile').style.display = 'none';
    document.getElementById('dropZone').style.display = 'block';
    document.getElementById('fileInput').value = '';
    
    // Réinitialiser les statistiques complètement
    const defaultStats = document.getElementById('defaultStats');
    const fileStats = document.getElementById('fileStats');
    
    defaultStats.style.display = 'block';
    fileStats.style.display = 'none';
    
    // Remettre le contenu original des statistiques
    fileStats.innerHTML = `
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-number" id="totalRows">0</div>
                <div class="stat-label">
                    <i class="fas fa-list"></i>
                    Total lignes
                </div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="validGrades">0</div>
                <div class="stat-label">
                    <i class="fas fa-check-circle"></i>
                    Notes valides
                </div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="invalidGrades">0</div>
                <div class="stat-label">
                    <i class="fas fa-exclamation-triangle"></i>
                    Erreurs
                </div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="uniqueStudents">0</div>
                <div class="stat-label">
                    <i class="fas fa-user-graduate"></i>
                    Étudiants
                </div>
            </div>
        </div>
        
        <div class="import-tips mt-3">
            <h6><i class="fas fa-info-circle"></i> Conseils :</h6>
            <ul style="font-size: 0.85rem; margin: 0; padding-left: 1.2rem;">
                <li>Vérifiez que les matricules correspondent aux étudiants inscrits</li>
                <li>Les notes doivent être comprises entre 0 et 20</li>
                <li>Assurez-vous que les matières existent dans le système</li>
                <li>Corrigez les erreurs avant de lancer l'importation</li>
            </ul>
        </div>
    `;
    
    // Masquer l'aperçu
    document.getElementById('previewSection').style.display = 'none';
    
    checkImportParams();
    showAlert('Fichier supprimé.', 'info');
}

function previewFile() {
    if (!currentFile) return;
    
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const csvData = e.target.result;
            const lines = csvData.split('\n').filter(line => line.trim());
            
            if (lines.length < 2) {
                showAlert('Impossible de générer un aperçu : fichier vide.', 'warning');
                return;
            }

            const delimiter = detectDelimiter(csvData);
            const headers = lines[0].split(delimiter).map(h => h.trim());
            const previewLines = lines.slice(1, 11); // Premières 10 lignes
            
            // Informations de détection
            let detectionInfo = `<div class="alert alert-info mb-3">
                <h6><i class="fas fa-info-circle"></i> Informations de détection:</h6>
                <div class="row">
                    <div class="col-md-4">
                        <strong>Délimiteur détecté:</strong><br>
                        ${delimiter === ',' ? 'Virgule (,)' : 'Point-virgule (;)'}
                    </div>
                    <div class="col-md-4">
                        <strong>Nombre de colonnes:</strong><br>
                        ${headers.length}
                    </div>
                    <div class="col-md-4">
                        <strong>Lignes de données:</strong><br>
                        ${lines.length - 1}
                    </div>
                </div>
            </div>`;
            
            let tableHtml = detectionInfo + '<div style="overflow-x: auto; max-height: 400px;"><table class="table table-striped table-sm">';
            
            // En-têtes
            tableHtml += '<thead class="table-dark"><tr>';
            headers.forEach(header => {
                tableHtml += `<th style="white-space: nowrap;">${header}</th>`;
            });
            tableHtml += '</tr></thead><tbody>';
            
            // Données
            previewLines.forEach(line => {
                const values = line.split(delimiter).map(v => v.trim());
                tableHtml += '<tr>';
                values.forEach((value, index) => {
                    if (index < headers.length) {
                        tableHtml += `<td style="white-space: nowrap;">${value}</td>`;
                    }
                });
                tableHtml += '</tr>';
            });
            
            tableHtml += '</tbody></table></div>';
            
            if (lines.length > 11) {
                tableHtml += `<p class="text-muted mt-2"><small>Aperçu des 10 premières lignes sur ${lines.length - 1} au total.</small></p>`;
            }
            
            document.getElementById('previewContent').innerHTML = tableHtml;
            document.getElementById('previewSection').style.display = 'block';
            
        } catch (error) {
            showAlert('Erreur lors de la génération de l\'aperçu.', 'danger');
            console.error(error);
        }
    };
    reader.readAsText(currentFile);
}

function loadDepartments() {
    fetch('/admin/grades-import/departments')
        .then(response => response.json())
        .then(departments => {
            const departmentSelect = document.getElementById('department');
            departmentSelect.innerHTML = '<option value="">Sélectionnez un département</option>';
            
            departments.forEach(dept => {
                const option = document.createElement('option');
                option.value = dept.id;
                option.textContent = dept.name;
                departmentSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Erreur lors du chargement des départements:', error);
            showAlert('Erreur lors du chargement des départements', 'danger');
        });
}

function loadAcademicYears(departmentId) {
    fetch(`/admin/grades-import/academic-years/${departmentId}`)
        .then(response => response.json())
        .then(academicYears => {
            const academicYearSelect = document.getElementById('academicYear');
            academicYearSelect.innerHTML = '<option value="">Sélectionnez une année académique</option>';
            
            academicYears.forEach(year => {
                const option = document.createElement('option');
                option.value = year.id;
                option.textContent = year.year;
                academicYearSelect.appendChild(option);
            });
            
            academicYearSelect.disabled = false;
        })
        .catch(error => {
            console.error('Erreur lors du chargement des années académiques:', error);
            showAlert('Erreur lors du chargement des années académiques', 'danger');
        });
}

function loadSemesters(departmentId, academicYearId) {
    fetch(`/admin/grades-import/semesters/${departmentId}/${academicYearId}`)
        .then(response => response.json())
        .then(semesters => {
            const semesterSelect = document.getElementById('semester');
            semesterSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
            
            semesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester.id;
                option.textContent = semester.label;
                semesterSelect.appendChild(option);
            });
            
            semesterSelect.disabled = false;
            
            // Réinitialiser les cours
            const courseSelect = document.getElementById('course');
            courseSelect.innerHTML = '<option value="">Sélectionnez un semestre</option>';
            courseSelect.disabled = true;
        })
        .catch(error => {
            console.error('Erreur lors du chargement des semestres:', error);
            showAlert('Erreur lors du chargement des semestres', 'danger');
        });
}

function loadCourses(departmentId, academicYearId, semesterId) {
    fetch(`/admin/grades-import/courses/${departmentId}/${academicYearId}/${semesterId}`)
        .then(response => response.json())
        .then(courses => {
            const courseSelect = document.getElementById('course');
            courseSelect.innerHTML = '<option value="">Sélectionnez un cours</option>';
            
            courses.forEach(course => {
                const option = document.createElement('option');
                option.value = course.id;
                option.textContent = course.label;
                courseSelect.appendChild(option);
            });
            
            courseSelect.disabled = false;
        })
        .catch(error => {
            console.error('Erreur lors du chargement des cours:', error);
            showAlert('Erreur lors du chargement des cours', 'danger');
        });
}

function validateImportParams() {
    const department = document.getElementById('department').value;
    const academicYear = document.getElementById('academicYear').value;
    const semester = document.getElementById('semester').value;
    const course = document.getElementById('course').value;
    return department && academicYear && semester && course;
}

function checkImportParams() {
    const fileSelected = currentFile !== null;
    const paramsValid = validateImportParams();
    document.getElementById('importBtn').disabled = !(fileSelected && paramsValid);
}

function startImport() {
    const formData = new FormData();
    formData.append('file', currentFile);
    formData.append('courseId', document.getElementById('course').value);
    
    // Afficher la barre de progression
    document.getElementById('progressSection').style.display = 'block';
    document.getElementById('importBtn').disabled = true;
    
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    
    progressText.textContent = 'Envoi du fichier...';
    progressBar.style.width = '10%';
    
    fetch('/admin/grades-import/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        progressBar.style.width = '100%';
        progressText.textContent = 'Terminé !';
        
        setTimeout(() => {
            document.getElementById('progressSection').style.display = 'none';
            document.getElementById('importBtn').disabled = false;
            
            if (data.success) {
                showAlert(data.message, 'success');
                // Réinitialiser après succès
                setTimeout(() => {
                    removeFile();
                    document.getElementById('department').value = '';
                    document.getElementById('academicYear').innerHTML = '<option value="">Sélectionnez d\'abord un département</option>';
                    document.getElementById('academicYear').disabled = true;
                    document.getElementById('semester').innerHTML = '<option value="">Sélectionnez d\'abord une année</option>';
                    document.getElementById('semester').disabled = true;
                    document.getElementById('course').innerHTML = '<option value="">Sélectionnez un semestre</option>';
                    document.getElementById('course').disabled = true;
                }, 2000);
            } else {
                // Afficher l'erreur principale
                const errorMessage = data.error || 'Erreur lors de l\'importation';
                
                // Si l'erreur contient des informations de détection, l'afficher dans une popup
                if (errorMessage.includes('Délimiteur détecté')) {
                    const errorLines = errorMessage.split('\n');
                    let formattedError = '<div class="alert alert-danger">';
                    errorLines.forEach(line => {
                        if (line.trim()) {
                            formattedError += '<p>' + line.replace('•', '<i class="fas fa-bullet"></i>') + '</p>';
                        }
                    });
                    formattedError += '</div>';
                    
                    document.getElementById('previewContent').innerHTML = formattedError;
                    document.getElementById('previewSection').style.display = 'block';
                }
                
                showAlert(errorMessage.split('\n')[0], 'danger');
                
                if (data.data && data.data.errors) {
                    data.data.errors.forEach(error => {
                        showAlert(error, 'warning');
                    });
                }
            }
        }, 1000);
    })
    .catch(error => {
        console.error('Erreur:', error);
        document.getElementById('progressSection').style.display = 'none';
        document.getElementById('importBtn').disabled = false;
        showAlert('Erreur de communication avec le serveur', 'danger');
    });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function showAlert(message, type = 'info') {
    const alertsContainer = document.getElementById('alertsContainer');
    const alertId = 'alert-' + Date.now();
    
    const typeClass = {
        'success': 'alert-success',
        'danger': 'alert-danger', 
        'warning': 'alert-warning',
        'info': 'alert-info'
    }[type] || 'alert-info';
    
    const iconClass = {
        'success': 'fa-check-circle',
        'danger': 'fa-exclamation-triangle',
        'warning': 'fa-exclamation-circle', 
        'info': 'fa-info-circle'
    }[type] || 'fa-info-circle';
    
    const alertHtml = `
        <div class="alert ${typeClass} alert-dismissible fade show" id="${alertId}" role="alert">
            <i class="fas ${iconClass}"></i> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    alertsContainer.insertAdjacentHTML('beforeend', alertHtml);
    
    // Auto-suppression après 5 secondes
    setTimeout(() => {
        const alert = document.getElementById(alertId);
        if (alert) {
            alert.classList.remove('show');
            setTimeout(() => alert.remove(), 150);
        }
    }, 5000);
}

// Les écouteurs pour département et cours sont déjà définis dans le DOMContentLoaded
</script>
{% endblock %}