// Liste des monstres du jeu
let monsters = [
    { id: 1, name: 'Chatacabra', image: 'img/Chatacabra.jpg' },
    { id: 2, name: 'Quematrice', image: 'img/Quematrice.jpg' },
    { id: 3, name: 'Lala Barina', image: 'img/Lala_Barina.jpg' },
    { id: 4, name: 'Congalala', image: 'img/Congalala.jpg' },
    { id: 5, name: 'Balahara', image: 'img/Balahara.jpg' },
    { id: 6, name: 'Doshaguma', image: 'img/Doshaguma.jpg' },
    { id: 7, name: 'Uth Duna', image: 'img/Uth_Duna.jpg' },
    { id: 8, name: 'Rompopolo', image: 'img/Rompopolo.jpg' },
    { id: 9, name: 'Rey Dau', image: 'img/Rey_Dau.jpg' },
    { id: 10, name: 'Nerscylla', image: 'img/Nerscylla.jpg' },
    { id: 11, name: 'Hirabami', image: 'img/Hirabami.jpg' },
    { id: 12, name: 'Ajarakan', image: 'img/Ajarakan.jpg' },
    { id: 13, name: 'Nu Udra', image: 'img/Nu_Udra.jpg' },
    { id: 14, name: 'Doshaguma Gardien', image: 'img/Doshaguma_Gardien.jpg' },
    { id: 15, name: 'Rathalos Gardien', image: 'img/Rathalos_Gardien.jpg' },
    { id: 16, name: 'Jin Dahaad', image: 'img/Jin_Dahaad.jpg' },
    { id: 17, name: 'Odogaron Désastre Gardien', image: 'img/Odogaron_Desastre_Gardien.jpg' },
    { id: 18, name: 'Xu Wu', image: 'img/Xu_Wu.jpg' },
    { id: 19, name: 'Arkveld Gardien', image: 'img/Arkveld_Gardien.jpg' },
    { id: 20, name: 'Zoh Shia', image: 'img/Zoh_Shia.jpg' },
    { id: 21, name: 'Yian Kut-Ku', image: 'img/Yian_Kut-Ku.jpg' },
    { id: 22, name: 'Gypceros', image: 'img/Gypceros.jpg' },
    { id: 23, name: 'Rathian', image: 'img/Rathian.jpg' },
    { id: 24, name: 'Anjanath Tonnerre Gardien', image: 'img/Anjanath_Tonnerre_Gardien.jpg' },
    { id: 25, name: 'Rathalos', image: 'img/Rathalos.jpg' },
    { id: 26, name: 'Gravios', image: 'img/Gravios.jpg' },
    { id: 27, name: 'Blangonga', image: 'img/Blangonga.jpg' },
    { id: 28, name: 'Gore Malaga', image: 'img/Gore_Malaga.jpg' },
    { id: 29, name: 'Arkveld', image: 'img/Arkveld.jpg' }
];

let quests = [
    { id: 1, monsterId: 1, crownType: 'small', playerName: 'Hunter123', playerId: 'MHW-1234', date: new Date().toISOString() },
    { id: 2, monsterId: 1, crownType: 'large', playerName: 'DragonSlayer', playerId: 'MHW-5678', date: new Date().toISOString() },
    { id: 3, monsterId: 2, crownType: 'small', playerName: 'ThunderLord', playerId: 'MHW-9012', date: new Date().toISOString() }
];

let announcements = [
    { id: 1, text: "Bienvenue sur le site de partage de quêtes à couronnes pour Monster Hunter Wilds!", active: true }
];

// Éléments DOM
const monsterListEl = document.getElementById('monsterList');
const modalMonsterNameEl = document.getElementById('modalMonsterName');
const questListEl = document.getElementById('questList');
const addQuestBtn = document.getElementById('addQuestBtn');
const monsterSelectEl = document.getElementById('monsterSelect');
const addQuestForm = document.getElementById('addQuestForm');
const crownFilterEls = document.querySelectorAll('input[name="crownFilter"]');
const announcementAreaEl = document.getElementById('announcementArea');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const monsterSearchEl = document.getElementById('monsterSearch');
const clearSearchBtn = document.getElementById('clearSearchBtn');

// Variables globales
let currentMonsterId = null;
let currentQuestToDelete = null;

// Modales Bootstrap
const questListModal = new bootstrap.Modal(document.getElementById('questListModal'));
const addQuestModal = new bootstrap.Modal(document.getElementById('addQuestModal'));
const deleteQuestModal = new bootstrap.Modal(document.getElementById('deleteQuestModal'));

// Initialisation
document.addEventListener('DOMContentLoaded', () => {
    loadData();
    renderMonsterList();
    populateMonsterSelect();
    displayAnnouncements();
    
    // Événements
    addQuestBtn.addEventListener('click', () => addQuestModal.show());
    addQuestForm.addEventListener('submit', handleAddQuest);
    crownFilterEls.forEach(radio => {
        radio.addEventListener('change', filterQuests);
    });
    confirmDeleteBtn.addEventListener('click', handleDeleteQuest);
    
    // Événements pour la recherche
    monsterSearchEl.addEventListener('input', searchMonsters);
    clearSearchBtn.addEventListener('click', clearSearch);
});

// Fonctions de chargement et sauvegarde des données
function loadData() {
    // Dans une implémentation réelle, ces données seraient chargées depuis des fichiers JSON ou une API
    // Par exemple:
    // fetch('data/monsters.json')
    //     .then(response => response.json())
    //     .then(data => {
    //         monsters = data;
    //         renderMonsterList();
    //     })
    //     .catch(error => console.error('Erreur lors du chargement des monstres:', error));
    
    // Pour l'instant, nous utilisons les données temporaires définies plus haut
}

function saveData() {
    // Dans une implémentation réelle, ces données seraient sauvegardées via une API
    // Pour l'instant, nous les sauvegardons dans localStorage pour la démo
    localStorage.setItem('mhw_quests', JSON.stringify(quests));
    console.log('Données sauvegardées');
}

// Affichage des annonces
function displayAnnouncements() {
    const activeAnnouncements = announcements.filter(a => a.active);
    
    if (activeAnnouncements.length > 0) {
        announcementAreaEl.innerHTML = activeAnnouncements.map(a => `<p>${a.text}</p>`).join('');
        announcementAreaEl.classList.remove('d-none');
    } else {
        announcementAreaEl.classList.add('d-none');
    }
}

// Rendu de la liste des monstres
function renderMonsterList() {
    if (monsters.length === 0) {
        monsterListEl.innerHTML = `
            <div class="col-12">
                <div class="empty-message">
                    <p>Aucun monstre disponible pour le moment.</p>
                </div>
            </div>
        `;
        return;
    }

    monsterListEl.innerHTML = monsters.map(monster => {
        const smallCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'small').length;
        const largeCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'large').length;
        
        return `
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card monster-card fade-in" data-monster-id="${monster.id}">
                    <div class="card-img-container">
                        <img src="${monster.image}" class="card-img-top" alt="${monster.name}">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">${monster.name}</h5>
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="crown-badge small-crown" title="Petites couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${smallCrownCount}
                                </span>
                                <span class="crown-badge large-crown" title="Grandes couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${largeCrownCount}
                                </span>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">Voir les quêtes</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    // Ajouter les écouteurs d'événements après avoir rendu la liste
    document.querySelectorAll('.monster-card').forEach(card => {
        card.addEventListener('click', () => {
            const monsterId = parseInt(card.dataset.monsterId);
            showQuestsForMonster(monsterId);
        });
    });
}

// Populer le sélecteur de monstres dans le formulaire d'ajout
function populateMonsterSelect() {
    monsterSelectEl.innerHTML = '<option value="" selected disabled>Sélectionner un monstre</option>';
    
    monsters.forEach(monster => {
        const option = document.createElement('option');
        option.value = monster.id;
        option.textContent = monster.name;
        monsterSelectEl.appendChild(option);
    });
}

// Afficher les quêtes pour un monstre spécifique
function showQuestsForMonster(monsterId) {
    currentMonsterId = monsterId;
    const monster = monsters.find(m => m.id === monsterId);
    
    if (!monster) return;
    
    modalMonsterNameEl.textContent = monster.name;
    
    // Réinitialiser le filtre
    document.getElementById('filterAll').checked = true;
    
    // Afficher toutes les quêtes pour ce monstre
    renderQuestList(monsterId);
    
    // Afficher la modale
    questListModal.show();
}

// Rendu de la liste des quêtes
function renderQuestList(monsterId, filter = 'all') {
    let monsterQuests = quests.filter(q => q.monsterId === monsterId);
    
    if (filter !== 'all') {
        monsterQuests = monsterQuests.filter(q => q.crownType === filter);
    }
    
    if (monsterQuests.length === 0) {
        questListEl.innerHTML = `
            <div class="empty-message">
                <p>Aucune quête disponible pour ce monstre avec ce filtre.</p>
            </div>
        `;
        return;
    }
    
    questListEl.innerHTML = monsterQuests.map(quest => {
        const monster = monsters.find(m => m.id === quest.monsterId);
        const crownClass = quest.crownType === 'small' ? 'small-crown' : 'large-crown';
        const crownText = quest.crownType === 'small' ? 'Petite couronne' : 'Grande couronne';
        const questDate = new Date(quest.date);
        const daysDiff = Math.floor((new Date() - questDate) / (1000 * 60 * 60 * 24));
        const freshness = daysDiff <= 1 ? 'Aujourd\'hui' : 
                          daysDiff <= 2 ? 'Hier' : 
                          `Il y a ${daysDiff} jours`;
        
        return `
            <div class="card quest-card mb-3 fade-in">
                <div class="card-body">
                    <h5 class="card-title">
                        <span class="${crownClass}"><i class="bi bi-trophy-fill">👑</i></span>
                        ${crownText} pour ${monster.name}
                    </h5>
                    <p class="card-text">
                        Proposée par: <strong>${quest.playerName}</strong> (ID: ${quest.playerId})
                    </p>
                    <p class="quest-date">Ajoutée: ${freshness}</p>
                    <button class="btn btn-outline-danger btn-sm quest-delete-btn" 
                            data-quest-id="${quest.id}">
                        Supprimer
                    </button>
                </div>
            </div>
        `;
    }).join('');
    
    // Ajouter les écouteurs d'événements pour les boutons de suppression
    document.querySelectorAll('.quest-delete-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const questId = parseInt(btn.dataset.questId);
            showDeleteConfirmation(questId);
        });
    });
}

// Filtrer les quêtes
function filterQuests() {
    const filterValue = document.querySelector('input[name="crownFilter"]:checked').value;
    renderQuestList(currentMonsterId, filterValue);
}

// Afficher la confirmation de suppression
function showDeleteConfirmation(questId) {
    currentQuestToDelete = questId;
    deleteQuestModal.show();
}

// Gérer l'ajout d'une quête
function handleAddQuest(e) {
    e.preventDefault();
    
    const monsterId = parseInt(monsterSelectEl.value);
    const crownType = document.querySelector('input[name="crownType"]:checked').value;
    const playerName = document.getElementById('playerName').value.trim();
    const playerId = document.getElementById('playerId').value.trim();
    
    if (!monsterId || !crownType || !playerName || !playerId) {
        alert('Veuillez remplir tous les champs requis');
        return;
    }
    
    // Générer un ID unique pour la nouvelle quête
    const newQuestId = quests.length > 0 ? Math.max(...quests.map(q => q.id)) + 1 : 1;
    
    // Créer la nouvelle quête
    const newQuest = {
        id: newQuestId,
        monsterId,
        crownType,
        playerName,
        playerId,
        date: new Date().toISOString()
    };
    
    // Ajouter la quête à la liste
    quests.push(newQuest);
    
    // Sauvegarder les données
    saveData();
    
    // Mettre à jour l'affichage
    renderMonsterList();
    
    // Réinitialiser le formulaire et fermer la modale
    addQuestForm.reset();
    addQuestModal.hide();
    
    // Si la modale des quêtes est ouverte, mettre à jour son contenu
    if (currentMonsterId === monsterId) {
        renderQuestList(currentMonsterId);
    }
}

// Gérer la suppression d'une quête
function handleDeleteQuest() {
    if (currentQuestToDelete === null) return;
    
    // Trouver l'index de la quête à supprimer
    const questIndex = quests.findIndex(q => q.id === currentQuestToDelete);
    
    if (questIndex === -1) return;
    
    // Mémoriser le monsterId pour mettre à jour l'affichage
    const monsterId = quests[questIndex].monsterId;
    
    // Supprimer la quête
    quests.splice(questIndex, 1);
    
    // Sauvegarder les données
    saveData();
    
    // Mettre à jour l'affichage
    renderMonsterList();
    
    // Si la modale des quêtes est ouverte, mettre à jour son contenu
    if (currentMonsterId === monsterId) {
        renderQuestList(currentMonsterId);
    }
    
    // Fermer la modale de confirmation
    deleteQuestModal.hide();
    
    // Réinitialiser
    currentQuestToDelete = null;
}

// Nettoyer les quêtes de plus de 7 jours (à appeler depuis l'admin)
function cleanOldQuests() {
    const sevenDaysAgo = new Date();
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
    
    const oldQuestsCount = quests.filter(q => new Date(q.date) < sevenDaysAgo).length;
    
    quests = quests.filter(q => new Date(q.date) >= sevenDaysAgo);
    
    saveData();
    renderMonsterList();
    
    return oldQuestsCount;
}

// Recherche de monstres
function searchMonsters() {
    const searchTerm = monsterSearchEl.value.trim().toLowerCase();
    
    if (searchTerm === '') {
        // Si la recherche est vide, afficher tous les monstres
        renderMonsterList();
        return;
    }
    
    // Filtrer les monstres qui correspondent à la recherche
    const filteredMonsters = monsters.filter(monster => 
        monster.name.toLowerCase().includes(searchTerm)
    );
    
    // Afficher un message si aucun monstre ne correspond
    if (filteredMonsters.length === 0) {
        monsterListEl.innerHTML = `
            <div class="col-12">
                <div class="empty-message">
                    <p>Aucun monstre ne correspond à votre recherche "${monsterSearchEl.value}".</p>
                </div>
            </div>
        `;
        return;
    }
    
    // Rendre les monstres filtrés
    monsterListEl.innerHTML = filteredMonsters.map(monster => {
        const smallCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'small').length;
        const largeCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'large').length;
        
        return `
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card monster-card fade-in" data-monster-id="${monster.id}">
                    <div class="card-img-container">
                        <img src="${monster.image}" class="card-img-top" alt="${monster.name}">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">${monster.name}</h5>
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="crown-badge small-crown" title="Petites couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${smallCrownCount}
                                </span>
                                <span class="crown-badge large-crown" title="Grandes couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${largeCrownCount}
                                </span>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">Voir les quêtes</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }).join('');
    
    // Ajouter les écouteurs d'événements après avoir rendu la liste
    document.querySelectorAll('.monster-card').forEach(card => {
        card.addEventListener('click', () => {
            const monsterId = parseInt(card.dataset.monsterId);
            showQuestsForMonster(monsterId);
        });
    });
}

// Effacer la recherche
function clearSearch() {
    monsterSearchEl.value = '';
    renderMonsterList();
}