const seriesData = [
    {
        category: "Anime",
        name: "Naruto",
        tracks: [
            "Main Theme",
            "Sadness and Sorrow",
            "The Raising Fighting Spirit"
        ]
    },
    {
        category: "Anime",
        name: "Attack on Titan",
        tracks: [
            "Guren no Yumiya",
            "Reluctant Heroes",
            "Call of Silence"
        ]
    },
    {
        category: "Film d'animation",
        name: "Your Name",
        tracks: [
            "Dream Lantern",
            "Zenzenzense",
            "Sparkle"
        ]
    },
    {
        category: "Jeu vidéo",
        name: "Final Fantasy VII",
        tracks: [
            "Opening - Bombing Mission",
            "Aerith's Theme",
            "One-Winged Angel"
        ]
    }
];

function createSeriesList() {
    const seriesList = document.getElementById('seriesList');
    seriesData.forEach(serie => {
        const serieElement = document.createElement('div');
        serieElement.classList.add('serie');
        serieElement.innerHTML = `
            <div class="serie-header">
                <span class="category">${serie.category}</span>
                <span class="name">${serie.name}</span>
            </div>
            <div class="tracks">
                <ul>
                    ${serie.tracks.map(track => `<li>${track}</li>`).join('')}
                </ul>
            </div>
        `;
        seriesList.appendChild(serieElement);
    });
}

function addEventListeners() {
    const serieHeaders = document.querySelectorAll('.serie-header');
    serieHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const tracks = header.nextElementSibling;
            tracks.classList.toggle('show');
        });
    });

    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('input', filterSeries);
}

function filterSeries() {
    const searchValue = document.getElementById('searchInput').value.toLowerCase();
    const series = document.querySelectorAll('.serie');

    series.forEach(serie => {
        const name = serie.querySelector('.name').textContent.toLowerCase();
        const tracks = Array.from(serie.querySelectorAll('.tracks li')).map(li => li.textContent.toLowerCase());
        const isVisible = name.includes(searchValue) || tracks.some(track => track.includes(searchValue));
        serie.style.display = isVisible ? 'block' : 'none';
    });
}

document.addEventListener('DOMContentLoaded', () => {
    createSeriesList();
    addEventListeners();
});