// app/view/admin/pedagogie/module/list/main.js

const API_BASE_URL = '/est-concours/model/api/module.php';
const API_FILIERE_URL = '/est-concours/model/api/filiere.php';
const API_SEMESTRE_URL = '/est-concours/model/api/semestre.php';

let currentPage = 1;
const perPage = 10;
let totalPages = 1;
let currentDetailId = null;
let editMode = false;
let currentModuleId = null;

// Variables pour les selects
let filieresList = [];
let semestresList = [];

document.addEventListener('DOMContentLoaded', function() {
    loadModules();
    loadStats();
    setupSearchForm();
    loadSelectData();
});

// =========================================
// CHARGEMENT DES DONNÉES DES SELECTS
// =========================================

function loadSelectData() {
    // Charger les filières
    fetch(`${API_FILIERE_URL}?action=all`)
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                filieresList = result.data;
                populateFiliereSelect();
            }
        })
        .catch(() => console.error('Erreur chargement filières'));

    // Charger les semestres
    fetch(`${API_SEMESTRE_URL}?action=all`)
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                semestresList = result.data;
                populateSemestreSelect();
            }
        })
        .catch(() => console.error('Erreur chargement semestres'));
}

function populateFiliereSelect() {
    const select = document.getElementById('filiere_id');
    if (!select) return;

    const currentValue = select.value;
    select.innerHTML = '<option value="">Sélectionner une filière</option>';

    filieresList.forEach(f => {
        const option = document.createElement('option');
        option.value = f.id;
        option.textContent = `${f.libelle} (${f.code})`;
        select.appendChild(option);
    });

    if (currentValue) select.value = currentValue;
}

function populateSemestreSelect() {
    const select = document.getElementById('semestre_id');
    if (!select) return;

    const currentValue = select.value;
    select.innerHTML = '<option value="">Sélectionner un semestre</option>';

    semestresList.forEach(s => {
        const option = document.createElement('option');
        option.value = s.id;
        option.textContent = `${s.libelle} (${s.code})`;
        select.appendChild(option);
    });

    if (currentValue) select.value = currentValue;
}

// =========================================
// RECHERCHE
// =========================================

function setupSearchForm() {
    document.getElementById('searchForm').addEventListener('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        loadModules();
    });
}

function resetSearch() {
    document.getElementById('searchForm').reset();
    document.getElementById('searchFiliere').value = '';
    document.getElementById('searchSemestre').value = '';
    document.getElementById('searchAnnee').value = '';
    currentPage = 1;
    loadModules();
}

// =========================================
// STATISTIQUES
// =========================================

function loadStats() {
    fetch(`${API_BASE_URL}?action=stats`)
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                document.getElementById('statTotal').textContent = result.data.total || 0;
                document.getElementById('statFilieres').textContent = result.data.total_filieres || 0;

                const total = (result.data.total_cours || 0) +
                    (result.data.total_tp || 0) +
                    (result.data.total_td || 0);
                document.getElementById('statTotalHeures').textContent = total;
            }
        });
}

// =========================================
// CHARGEMENT DES MODULES
// =========================================

function loadModules() {
    showLoading(true);

    const params = new URLSearchParams({
        libelle: document.getElementById('searchLibelle')?.value || '',
        code: document.getElementById('searchCode')?.value || '',
        filiere_id: document.getElementById('searchFiliere')?.value || '',
        semestre_id: document.getElementById('searchSemestre')?.value || '',
        annee_universitaire: document.getElementById('searchAnnee')?.value || '',
        page: currentPage,
        per_page: perPage
    });

    fetch(`${API_BASE_URL}?action=search&${params}`)
        .then(r => r.json())
        .then(result => {
            showLoading(false);
            if (result.success) {
                renderTable(result.data.data);
                renderPagination(result.data);
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(() => {
            showLoading(false);
            showToast('Erreur de connexion', 'error');
        });
}

// =========================================
// AFFICHAGE DU TABLEAU
// =========================================

function renderTable(modules) {
    const tbody = document.getElementById('tableBody');

    if (!modules || modules.length === 0) {
        tbody.innerHTML = `<tr><td colspan="10" style="text-align:center;padding:40px;">📭 Aucun module trouvé</td></tr>`;
        return;
    }

    tbody.innerHTML = modules.map(m => {
        const total = (m.charge_horaire_cours || 0) + (m.charge_horaire_tp || 0) + (m.charge_horaire_td || 0);
        const totalGroupes = (m.nombre_groupe_cours || 1) + (m.nombre_groupe_tp || 1) + (m.nombre_groupe_td || 1);
        const semestreLabel = m.semestre_libelle ? `${m.semestre_libelle} (${m.semestre_code})` : '-';
        const filiereLabel = m.filiere_libelle || m.filiere || '-';
        const annee = m.annee_universitaire ? `${m.annee_universitaire} - ${parseInt(m.annee_universitaire) + 1}` : '-';

        return `
            <tr>
                <td>${m.id}</td>
                <td><strong>${escapeHtml(m.libelle)}</strong></td>
                <td><span class="badge badge-info">${escapeHtml(m.code)}</span></td>
                <td><span class="badge badge-primary">${escapeHtml(filiereLabel)}</span></td>
                <td><span class="badge badge-warning">${escapeHtml(semestreLabel)}</span></td>
                <td><span class="badge badge-secondary">${escapeHtml(annee)}</span></td>
                <td>${m.charge_horaire_cours || 0}h / ${m.charge_horaire_tp || 0}h / ${m.charge_horaire_td || 0}h</td>
                <td><span class="badge badge-success">${total}h</span></td>
                <td><span class="badge badge-purple">${totalGroupes}</span></td>
                <td>
                    <button class="btn btn-info btn-sm" onclick="viewDetail(${m.id})"><i class="fas fa-eye"></i></button>
                    <button class="btn btn-warning btn-sm" onclick="openEditModuleModal(${m.id})"><i class="fas fa-edit"></i></button>
                    <button class="btn btn-danger btn-sm" onclick="deleteModule(${m.id})"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
        `;
    }).join('');
}

// =========================================
// PAGINATION
// =========================================

function renderPagination(data) {
    totalPages = data.totalPages;
    const start = (data.page - 1) * perPage + 1;
    const end = Math.min(data.page * perPage, data.total);

    document.getElementById('paginationInfo').textContent =
        `Affichage de ${start} à ${end} sur ${data.total} modules`;

    let html = '';
    for (let i = 1; i <= data.totalPages; i++) {
        html += `<button onclick="goToPage(${i})" ${i === data.page ? 'class="active"' : ''}>${i}</button>`;
    }
    document.getElementById('pageNumbers').innerHTML = html;

    document.getElementById('prevBtn').disabled = data.page <= 1;
    document.getElementById('nextBtn').disabled = data.page >= data.totalPages;
}

function changePage(dir) {
    if (dir === 'prev' && currentPage > 1) currentPage--;
    else if (dir === 'next' && currentPage < totalPages) currentPage++;
    loadModules();
}

function goToPage(page) {
    currentPage = page;
    loadModules();
}

// =========================================
// MODAL - CREATE MODULE
// =========================================

function openCreateModuleModal() {
    editMode = false;
    currentModuleId = null;

    document.getElementById('modalTitle').textContent = 'Nouveau Module';
    document.getElementById('moduleForm').reset();
    document.getElementById('moduleId').value = '';
    document.getElementById('charge_horaire_cours').value = 0;
    document.getElementById('charge_horaire_tp').value = 0;
    document.getElementById('charge_horaire_td').value = 0;
    document.getElementById('nombre_groupe_cours').value = 1;
    document.getElementById('nombre_groupe_tp').value = 1;
    document.getElementById('nombre_groupe_td').value = 1;

    // Réinitialiser les selects
    document.getElementById('filiere_id').value = '';
    document.getElementById('semestre_id').value = '';
    document.getElementById('annee_universitaire').value = '';

    calculateTotalHeures();
    calculateTotalGroupes();

    document.getElementById('moduleModal').classList.add('active');
    document.body.style.overflow = 'hidden';

    // Recharger les données des selects
    loadSelectData();
}

// =========================================
// MODAL - EDIT MODULE
// =========================================

function openEditModuleModal(id) {
    editMode = true;
    currentModuleId = id;

    if (document.getElementById('detailModal').classList.contains('active')) {
        closeDetailModal();
    }

    document.getElementById('modalTitle').textContent = 'Modifier Module';
    document.getElementById('moduleId').value = id;

    document.getElementById('moduleModal').classList.add('active');
    document.body.style.overflow = 'hidden';

    // Désactiver les champs pendant le chargement
    ['libelle', 'code', 'filiere_id', 'semestre_id', 'annee_universitaire',
        'charge_horaire_cours', 'charge_horaire_tp', 'charge_horaire_td',
        'nombre_groupe_cours', 'nombre_groupe_tp', 'nombre_groupe_td', 'description']
        .forEach(f => {
            const el = document.getElementById(f);
            if (el) el.disabled = true;
        });

    fetch(`${API_BASE_URL}?action=get&id=${id}`)
        .then(r => r.json())
        .then(result => {
            // Réactiver les champs
            ['libelle', 'code', 'filiere_id', 'semestre_id', 'annee_universitaire',
                'charge_horaire_cours', 'charge_horaire_tp', 'charge_horaire_td',
                'nombre_groupe_cours', 'nombre_groupe_tp', 'nombre_groupe_td', 'description']
                .forEach(f => {
                    const el = document.getElementById(f);
                    if (el) el.disabled = false;
                });

            if (result.success) {
                const m = result.data;
                document.getElementById('libelle').value = m.libelle || '';
                document.getElementById('code').value = m.code || '';
                document.getElementById('filiere_id').value = m.filiere_id || '';
                document.getElementById('semestre_id').value = m.semestre_id || '';
                document.getElementById('annee_universitaire').value = m.annee_universitaire || '';
                document.getElementById('charge_horaire_cours').value = m.charge_horaire_cours || 0;
                document.getElementById('charge_horaire_tp').value = m.charge_horaire_tp || 0;
                document.getElementById('charge_horaire_td').value = m.charge_horaire_td || 0;
                document.getElementById('nombre_groupe_cours').value = m.nombre_groupe_cours || 1;
                document.getElementById('nombre_groupe_tp').value = m.nombre_groupe_tp || 1;
                document.getElementById('nombre_groupe_td').value = m.nombre_groupe_td || 1;
                document.getElementById('description').value = m.description || '';

                calculateTotalHeures();
                calculateTotalGroupes();
            } else {
                showToast('Erreur: ' + result.message, 'error');
                closeModal();
            }
        })
        .catch(() => {
            ['libelle', 'code', 'filiere_id', 'semestre_id', 'annee_universitaire',
                'charge_horaire_cours', 'charge_horaire_tp', 'charge_horaire_td',
                'nombre_groupe_cours', 'nombre_groupe_tp', 'nombre_groupe_td', 'description']
                .forEach(f => {
                    const el = document.getElementById(f);
                    if (el) el.disabled = false;
                });
            showToast('Erreur de connexion', 'error');
            closeModal();
        });
}

// =========================================
// MODAL - OPEN (CREATE / EDIT) - Fonction générique
// =========================================

function openModuleModal(id = null) {
    if (id) {
        openEditModuleModal(id);
    } else {
        openCreateModuleModal();
    }
}

// =========================================
// SAUVEGARDE DU MODULE
// =========================================

function saveModule() {
    const data = {
        libelle: document.getElementById('libelle').value.trim(),
        code: document.getElementById('code').value.trim(),
        filiere_id: parseInt(document.getElementById('filiere_id').value) || null,
        semestre_id: parseInt(document.getElementById('semestre_id').value) || null,
        annee_universitaire: parseInt(document.getElementById('annee_universitaire').value) || null,
        charge_horaire_cours: parseInt(document.getElementById('charge_horaire_cours').value) || 0,
        charge_horaire_tp: parseInt(document.getElementById('charge_horaire_tp').value) || 0,
        charge_horaire_td: parseInt(document.getElementById('charge_horaire_td').value) || 0,
        nombre_groupe_cours: parseInt(document.getElementById('nombre_groupe_cours').value) || 1,
        nombre_groupe_tp: parseInt(document.getElementById('nombre_groupe_tp').value) || 1,
        nombre_groupe_td: parseInt(document.getElementById('nombre_groupe_td').value) || 1,
        description: document.getElementById('description').value.trim()
    };

    // Validation
    if (!data.libelle) {
        showToast('Veuillez saisir le libellé du module', 'warning');
        document.getElementById('libelle').focus();
        return;
    }
    if (!data.code) {
        showToast('Veuillez saisir le code du module', 'warning');
        document.getElementById('code').focus();
        return;
    }
    if (!data.filiere_id) {
        showToast('Veuillez sélectionner une filière', 'warning');
        document.getElementById('filiere_id').focus();
        return;
    }
    if (!data.semestre_id) {
        showToast('Veuillez sélectionner un semestre', 'warning');
        document.getElementById('semestre_id').focus();
        return;
    }
    if (!data.annee_universitaire) {
        showToast('Veuillez sélectionner l\'année universitaire', 'warning');
        document.getElementById('annee_universitaire').focus();
        return;
    }

    const id = document.getElementById('moduleId').value;
    const method = id ? 'PUT' : 'POST';
    const url = id
        ? `${API_BASE_URL}?action=update&id=${id}`
        : API_BASE_URL;

    const saveBtn = document.querySelector('#moduleModal .btn-primary');
    const orig = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
    saveBtn.disabled = true;

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(r => r.json())
        .then(result => {
            saveBtn.innerHTML = orig;
            saveBtn.disabled = false;

            if (result.success) {
                showToast(result.message, 'success');
                closeModal();
                loadModules();
                loadStats();
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(() => {
            saveBtn.innerHTML = orig;
            saveBtn.disabled = false;
            showToast('Erreur de connexion', 'error');
        });
}

// =========================================
// CALCUL DES TOTAUX
// =========================================

function calculateTotalHeures() {
    const cours = parseInt(document.getElementById('charge_horaire_cours').value) || 0;
    const tp = parseInt(document.getElementById('charge_horaire_tp').value) || 0;
    const td = parseInt(document.getElementById('charge_horaire_td').value) || 0;
    const total = cours + tp + td;
    const totalInput = document.getElementById('totalHeures');
    if (totalInput) {
        totalInput.value = total + 'h';
    }
}

function calculateTotalGroupes() {
    const cours = parseInt(document.getElementById('nombre_groupe_cours').value) || 0;
    const tp = parseInt(document.getElementById('nombre_groupe_tp').value) || 0;
    const td = parseInt(document.getElementById('nombre_groupe_td').value) || 0;
    const total = cours + tp + td;
    const totalInput = document.getElementById('totalGroupes');
    if (totalInput) {
        totalInput.value = total;
    }
}

// Auto-calcul des totaux
document.addEventListener('DOMContentLoaded', function() {
    // Heures
    ['charge_horaire_cours', 'charge_horaire_tp', 'charge_horaire_td'].forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', calculateTotalHeures);
            input.addEventListener('change', calculateTotalHeures);
        }
    });

    // Groupes
    ['nombre_groupe_cours', 'nombre_groupe_tp', 'nombre_groupe_td'].forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', calculateTotalGroupes);
            input.addEventListener('change', calculateTotalGroupes);
        }
    });
});

// =========================================
// DETAIL
// =========================================

function viewDetail(id) {
    currentDetailId = id;
    const modal = document.getElementById('detailModal');
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';

    document.getElementById('detailContent').innerHTML =
        '<div class="loading active"><div class="spinner"></div><p style="margin-top:10px;">Chargement...</p></div>';
    document.getElementById('editFromDetailBtn').style.display = 'none';

    fetch(`${API_BASE_URL}?action=get&id=${id}`)
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                renderDetail(result.data);
                document.getElementById('editFromDetailBtn').style.display = 'inline-flex';
            } else {
                document.getElementById('detailContent').innerHTML =
                    `<div class="alert alert-error">❌ ${result.message}</div>`;
            }
        })
        .catch(() => {
            document.getElementById('detailContent').innerHTML =
                '<div class="alert alert-error">❌ Erreur de connexion</div>';
        });
}

function renderDetail(module) {
    const total = (module.charge_horaire_cours || 0) + (module.charge_horaire_tp || 0) + (module.charge_horaire_td || 0);
    const totalGroupes = (module.nombre_groupe_cours || 1) + (module.nombre_groupe_tp || 1) + (module.nombre_groupe_td || 1);
    const semestreLabel = module.semestre_libelle ? `${module.semestre_libelle} (${module.semestre_code})` : 'Non défini';
    const filiereLabel = module.filiere_libelle || module.filiere || 'Non défini';
    const annee = module.annee_universitaire ? `${module.annee_universitaire} - ${parseInt(module.annee_universitaire) + 1}` : 'Non défini';

    document.getElementById('detailContent').innerHTML = `
        <div class="detail-section">
            <div class="detail-header">
                <div class="detail-avatar"><i class="fas fa-book"></i></div>
                <div class="detail-title">
                    <h2>${escapeHtml(module.libelle)}</h2>
                    <div class="detail-meta">
                        <span class="badge badge-info">${escapeHtml(module.code)}</span>
                        <span class="badge badge-primary">${escapeHtml(filiereLabel)}</span>
                        <span class="badge badge-warning">${escapeHtml(semestreLabel)}</span>
                        <span class="badge badge-secondary">${escapeHtml(annee)}</span>
                    </div>
                </div>
            </div>
            <div class="detail-grid">
                <div class="detail-item"><span class="label">ID</span><span class="value">${module.id}</span></div>
                <div class="detail-item"><span class="label">Code</span><span class="value"><span class="badge badge-info">${escapeHtml(module.code)}</span></span></div>
                <div class="detail-item"><span class="label">Filière</span><span class="value"><span class="badge badge-primary">${escapeHtml(filiereLabel)}</span></span></div>
                <div class="detail-item"><span class="label">Semestre</span><span class="value"><span class="badge badge-warning">${escapeHtml(semestreLabel)}</span></span></div>
                <div class="detail-item"><span class="label">Année</span><span class="value"><span class="badge badge-secondary">${escapeHtml(annee)}</span></span></div>
                <div class="detail-item"><span class="label">Heures Cours</span><span class="value">${module.charge_horaire_cours || 0}h</span></div>
                <div class="detail-item"><span class="label">Heures TP</span><span class="value">${module.charge_horaire_tp || 0}h</span></div>
                <div class="detail-item"><span class="label">Heures TD</span><span class="value">${module.charge_horaire_td || 0}h</span></div>
                <div class="detail-item"><span class="label">Total Heures</span><span class="value"><strong style="color:#27ae60;font-size:18px;">${total}h</strong></span></div>
                <div class="detail-item"><span class="label">Groupes Cours</span><span class="value">${module.nombre_groupe_cours || 1}</span></div>
                <div class="detail-item"><span class="label">Groupes TP</span><span class="value">${module.nombre_groupe_tp || 1}</span></div>
                <div class="detail-item"><span class="label">Groupes TD</span><span class="value">${module.nombre_groupe_td || 1}</span></div>
                <div class="detail-item"><span class="label">Total Groupes</span><span class="value"><strong style="color:#e67e22;font-size:18px;">${totalGroupes}</strong></span></div>
                <div class="detail-item full-width"><span class="label">Libellé</span><span class="value">${escapeHtml(module.libelle)}</span></div>
                <div class="detail-item full-width"><span class="label">Description</span><span class="value">${escapeHtml(module.description || 'Aucune description')}</span></div>
            </div>
        </div>`;

    document.getElementById('editFromDetailBtn').style.display = 'inline-flex';
}

function closeDetailModal() {
    document.getElementById('detailModal').classList.remove('active');
    document.body.style.overflow = '';
    currentDetailId = null;
}

function editFromDetail() {
    if (currentDetailId) {
        closeDetailModal();
        setTimeout(() => openEditModuleModal(currentDetailId), 300);
    }
}

// =========================================
// SUPPRESSION
// =========================================

function deleteModule(id) {
    if (!confirm('⚠️ Supprimer ce module ?\n\nCette action est irréversible.')) {
        return;
    }

    fetch(`${API_BASE_URL}?action=delete&id=${id}`, { method: 'DELETE' })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                showToast(result.message, 'success');
                loadModules();
                loadStats();
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(() => {
            showToast('Erreur de connexion', 'error');
        });
}

// =========================================
// EXPORT
// =========================================

function exportModules() {
    window.location.href = `${API_BASE_URL}?action=export`;
}

// =========================================
// UTILITAIRES
// =========================================

function closeModal() {
    const modal = document.getElementById('moduleModal');
    if (modal) {
        modal.classList.remove('active');
    }
    document.body.style.overflow = '';
}

function showLoading(show) {
    const loading = document.querySelector('.loading');
    if (loading) loading.classList.toggle('active', show);
}

function showToast(message, type = 'info') {
    const container = document.getElementById('toastContainer');
    if (!container) {
        alert(message);
        return;
    }
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `<span>${message}</span><button onclick="this.parentElement.remove()">&times;</button>`;
    container.appendChild(toast);
    setTimeout(() => {
        if (toast.parentElement) toast.remove();
    }, 4000);
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Fermeture des modals
document.querySelectorAll('.modal-overlay').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            if (this.id === 'detailModal') {
                closeDetailModal();
            } else if (this.id === 'moduleModal') {
                closeModal();
            }
        }
    });
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        if (document.getElementById('detailModal')?.classList.contains('active')) {
            closeDetailModal();
        } else if (document.getElementById('moduleModal')?.classList.contains('active')) {
            closeModal();
        }
    }
});