/**
 * Script principal pour MH Wilds - Partage de Quêtes à Couronnes
 * Fichier à placer dans assets/js/main.js
 */

document.addEventListener('DOMContentLoaded', function() {
    // Éléments DOM
    const monsterList = document.getElementById('monsterList');
    const monsterSearch = document.getElementById('monsterSearch');
    const clearSearchBtn = document.getElementById('clearSearchBtn');
    const addQuestBtn = document.getElementById('addQuestBtn');
    const monsterSearchSelect = document.getElementById('monsterSearchSelect');
    const monsterSearchResults = document.getElementById('monsterSearchResults');
    const selectedMonsterId = document.getElementById('selectedMonsterId');
    const monsterSort = document.getElementById('monsterSort');
    
    // Variables globales
    let monsters = [];
    let currentMonsterId = null;
    
    // ========== INITIALISATION ==========
    
    // Récupérer la liste des monstres
    fetchMonsters();
    
    // Ajouter les écouteurs d'événements
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', clearSearch);
    }
    
    if (monsterSearch) {
        monsterSearch.addEventListener('input', filterMonsters);
    }
    
    if (addQuestBtn) {
        addQuestBtn.addEventListener('click', function() {
            new bootstrap.Modal(document.getElementById('addQuestModal')).show();
        });
    }
    
    // Ajouter l'écouteur pour le tri des monstres
    if (monsterSort) {
        monsterSort.addEventListener('change', function() {
            // Rediriger vers la même page avec le paramètre de tri
            const sortValue = this.value;
            console.log("Changement de tri: " + sortValue); // Pour le débogage
            window.location.href = `index.php?sort=${sortValue}`;
        });
    }
    
    // Ajouter les écouteurs pour les cartes de monstres
    if (monsterList) {
        monsterList.addEventListener('click', function(e) {
            const card = e.target.closest('.monster-card');
            if (card) {
                const monsterId = parseInt(card.dataset.monsterId);
                if (!isNaN(monsterId)) {
                    currentMonsterId = monsterId;
                    showQuestListModal(monsterId);
                }
            }
            
            // Si le clic est sur un bouton dans la carte
            if (e.target.tagName === 'BUTTON') {
                e.preventDefault();
                // Trouver la carte parent
                const card = e.target.closest('.monster-card');
                if (card) {
                    const monsterId = parseInt(card.dataset.monsterId);
                    if (!isNaN(monsterId)) {
                        currentMonsterId = monsterId;
                        showQuestListModal(monsterId);
                    }
                }
            }
        });
    }
    
    // Initialiser la recherche de monstre dans le formulaire d'ajout
    if (monsterSearchSelect) {
        monsterSearchSelect.addEventListener('focus', function() {
            showMonsterSearchResults();
        });
        
        monsterSearchSelect.addEventListener('input', function() {
            showMonsterSearchResults(this.value);
        });
        
        // Clic en dehors des résultats pour les masquer
        document.addEventListener('click', function(e) {
            if (!monsterSearchSelect.contains(e.target) && !monsterSearchResults.contains(e.target)) {
                monsterSearchResults.classList.add('d-none');
            }
        });
    }
    
    // Écouteurs pour les filtres de couronnes dans la modale de quêtes
    document.querySelectorAll('input[name="crownFilter"]').forEach(radio => {
        radio.addEventListener('change', function() {
            if (currentMonsterId) {
                fetchQuests(currentMonsterId, this.value);
            }
        });
    });
    
    // Initialiser les formulaires
    initForms();
    
    // ========== FONCTIONS ==========
    
    /**
     * Récupérer tous les monstres via l'API
     */
    function fetchMonsters() {
        fetch('api.php?action=getMonsters')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    monsters = data.monsters;
                }
            })
            .catch(error => {
                console.error('Erreur lors de la récupération des monstres:', error);
            });
    }
    
    /**
     * Afficher la modale avec la liste des quêtes pour un monstre
     * 
     * @param {number} monsterId ID du monstre
     */
    function showQuestListModal(monsterId) {
        // Réinitialiser le filtre à "Toutes"
        document.getElementById('filterAll').checked = true;
        
        // Récupérer et afficher les quêtes
        fetchQuests(monsterId, 'all');
        
        // Afficher la modale
        new bootstrap.Modal(document.getElementById('questListModal')).show();
    }
    
    /**
     * Récupérer les quêtes pour un monstre
     * 
     * @param {number} monsterId ID du monstre
     * @param {string} crownType Type de couronne (all, small, large)
     */
    function fetchQuests(monsterId, crownType) {
        const questList = document.getElementById('questList');
        questList.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div></div>';
        
        fetch(`api.php?action=getQuests&monsterId=${monsterId}&crownType=${crownType}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Mettre à jour le titre de la modale
                    document.getElementById('modalMonsterName').textContent = data.monster;
                    
                    // Afficher les quêtes
                    displayQuests(data.quests);
                } else {
                    questList.innerHTML = `<div class="alert alert-danger">Erreur: ${data.message}</div>`;
                }
            })
            .catch(error => {
                console.error('Erreur lors de la récupération des quêtes:', error);
                questList.innerHTML = '<div class="alert alert-danger">Erreur de connexion. Veuillez réessayer.</div>';
            });
    }
    
    /**
     * Afficher les quêtes dans la modale
     * 
     * @param {Array} quests Liste des quêtes
     */
    function displayQuests(quests) {
        const questList = document.getElementById('questList');
        
        if (quests.length === 0) {
            questList.innerHTML = '<div class="empty-message"><p>Aucune quête disponible pour ce monstre avec ce filtre.</p></div>';
            return;
        }
        
        let html = '';
        
        quests.forEach(quest => {
            const crownClass = quest.crown_type === 'small' ? 'small-crown' : 'large-crown';
            const crownLabel = quest.crown_type === 'small' ? 'Petite couronne' : 'Grande couronne';
            
            html += `
                <div class="card quest-card mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="crown-badge ${crownClass}">${crownLabel}</span>
                            <button class="btn btn-sm btn-outline-danger delete-quest-btn" data-id="${quest.id}">
                                Supprimer
                            </button>
                        </div>
                        <p class="my-2">Joueur: <strong>${quest.player_name}</strong> (ID: ${quest.player_id})</p>
                        <div class="quest-date">Ajoutée: ${quest.freshness}</div>
                    </div>
                </div>
            `;
        });
        
        questList.innerHTML = html;
        
        // Ajouter les écouteurs pour les boutons de suppression
        questList.querySelectorAll('.delete-quest-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const questId = parseInt(this.dataset.id);
                if (!isNaN(questId)) {
                    showDeleteQuestModal(questId);
                }
            });
        });
    }
    
    /**
     * Afficher la modale de confirmation de suppression
     * 
     * @param {number} questId ID de la quête à supprimer
     */
    function showDeleteQuestModal(questId) {
        document.getElementById('deleteQuestId').value = questId;
        new bootstrap.Modal(document.getElementById('deleteQuestModal')).show();
    }
    
    /**
     * Filtrer les monstres par nom
     */
    function filterMonsters() {
        const searchTerm = monsterSearch.value.toLowerCase();
        const cards = monsterList.querySelectorAll('.monster-card');
        
        cards.forEach(card => {
            const monsterName = card.querySelector('.card-title').textContent.toLowerCase();
            const parent = card.parentElement; // Le parent est la colonne
            
            if (monsterName.includes(searchTerm)) {
                parent.style.display = 'block';
            } else {
                parent.style.display = 'none';
            }
        });
    }
    
    /**
     * Effacer la recherche
     */
    function clearSearch() {
        monsterSearch.value = '';
        filterMonsters();
    }
    
    /**
     * Afficher les résultats de recherche de monstre
     * 
     * @param {string} searchTerm Terme de recherche
     */
    function showMonsterSearchResults(searchTerm = '') {
        // Afficher le conteneur des résultats
        monsterSearchResults.classList.remove('d-none');
        
        // Filtrer les monstres
        const filteredMonsters = monsters.filter(monster => {
            if (searchTerm === '') return true;
            return monster.name.toLowerCase().includes(searchTerm.toLowerCase());
        });
        
        // Générer le HTML
        if (filteredMonsters.length === 0) {
            monsterSearchResults.innerHTML = '<div class="monster-search-no-results">Aucun monstre trouvé</div>';
        } else {
            let html = '';
            filteredMonsters.forEach(monster => {
                html += `<div class="monster-search-item" data-id="${monster.id}">${monster.name}</div>`;
            });
            monsterSearchResults.innerHTML = html;
            
            // Ajouter les écouteurs pour la sélection
            monsterSearchResults.querySelectorAll('.monster-search-item').forEach(item => {
                item.addEventListener('click', function() {
                    const monsterId = parseInt(this.dataset.id);
                    const monsterName = this.textContent;
                    
                    // Mettre à jour les champs
                    monsterSearchSelect.value = monsterName;
                    selectedMonsterId.value = monsterId;
                    
                    // Masquer les résultats
                    monsterSearchResults.classList.add('d-none');
                    
                    // Réinitialiser la validation
                    monsterSearchSelect.classList.remove('is-invalid');
                });
            });
        }
    }
    
    /**
     * Initialiser les formulaires
     */
    function initForms() {
        // Formulaire d'ajout de quête
        const addQuestForm = document.getElementById('addQuestForm');
        if (addQuestForm) {
            addQuestForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Vérifier que le monstre est sélectionné
                if (!selectedMonsterId.value) {
                    monsterSearchSelect.classList.add('is-invalid');
                    return;
                }
                
                // Récupérer les données du formulaire
                const formData = new FormData(this);
                
                // Envoyer les données
                fetch('api.php?action=addQuest', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Masquer la modale
                        bootstrap.Modal.getInstance(document.getElementById('addQuestModal')).hide();
                        
                        // Recharger la page pour mettre à jour le nombre de quêtes
                        window.location.reload();
                    } else {
                        alert('Erreur lors de l\'ajout de la quête: ' + (data.message || 'Erreur inconnue'));
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    alert('Erreur de connexion. Veuillez réessayer.');
                });
            });
        }
        
        // Formulaire de suppression de quête
        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        if (confirmDeleteBtn) {
            confirmDeleteBtn.addEventListener('click', function() {
                const formData = new FormData(document.getElementById('deleteQuestForm'));
                
                fetch('api.php?action=deleteQuest', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Masquer la modale de confirmation
                        bootstrap.Modal.getInstance(document.getElementById('deleteQuestModal')).hide();
                        
                        // Mettre à jour la liste des quêtes
                        const crownType = document.querySelector('input[name="crownFilter"]:checked').value;
                        fetchQuests(currentMonsterId, crownType);
                    } else {
                        alert('Erreur lors de la suppression de la quête: ' + (data.message || 'Erreur inconnue'));
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    alert('Erreur de connexion. Veuillez réessayer.');
                });
            });
        }
    }
});