(() => {
    const csvUrl = "https://raw.githubusercontent.com/willdevs/movies/refs/heads/main/movie.csv"; 
    const container = document.getElementById("movies-container");
    const genreFilters = document.getElementById("genreFilters");
    const searchInput = document.getElementById("searchInput");
    const loadMoreButton = document.getElementById("loadMore");
    const searchBar = document.getElementById("searchBar");
    const toggleSearchButton = document.getElementById("toggleSearch");
    let movieData = [];
    let currentMovies = [];
    let filteredMovies = [];
    let currentIndex = 0;
    const MOVIES_PER_LOAD = 4;
    let activeFilter = null;

 
    function toggleLoadMoreButton(condition) {
        loadMoreButton.style.display = condition ? "block" : "none";
    }

 
    function applyFilter(filterType, filterValue = "") {
        if (filterType === "genre") {
            activeFilter = "genre";
            filteredMovies = movieData.filter(movie =>
                movie.genero.toLowerCase().includes(filterValue.toLowerCase())
            );
        } else if (filterType === "search") {
            activeFilter = "search";
            filteredMovies = movieData.filter(movie =>
                movie.titulo.toLowerCase().includes(filterValue) ||
                movie.titulo2.toLowerCase().includes(filterValue)
            );
        } else {
            activeFilter = null;
            filteredMovies = movieData;
        }

        currentMovies = filteredMovies.slice(0, MOVIES_PER_LOAD);
        currentIndex = MOVIES_PER_LOAD;
        displayMovies(currentMovies);
        toggleLoadMoreButton(filteredMovies.length > MOVIES_PER_LOAD);
    }

  
    function displayMovies(movies) {
        container.innerHTML = "";
        if (movies.length === 0) {
            container.innerHTML = "<p>No se encontraron resultados.</p>";
        } else {
            const fragment = document.createDocumentFragment();
            movies.forEach(movie => {
                const card = document.createElement("div");
                card.className = "card";
                card.innerHTML = `
                    <a href="${movie.url}" target="_blank" class="card-link">
                        <img src="${movie.poster}" alt="${movie.titulo}">
                        <h3>${movie.titulo}</h3>
                        <p>${movie.genero}</p>
                        <small>${movie.titulo2}</small>
                    </a>
                `;
                fragment.appendChild(card);
            });
            container.appendChild(fragment);
        }
    }


    function loadMoreMovies() {
        const nextMovies = filteredMovies.slice(currentIndex, currentIndex + MOVIES_PER_LOAD);
        currentMovies = [...currentMovies, ...nextMovies];
        displayMovies(currentMovies);
        currentIndex += MOVIES_PER_LOAD;
        toggleLoadMoreButton(currentIndex < filteredMovies.length);
    }

  
    function showAllMovies() {
        console.log("Mostrando todas las películas");
        applyFilter(null);
    }

   
    let debounceTimer;
    searchInput.addEventListener("input", () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            const searchTerm = searchInput.value.toLowerCase();
            applyFilter("search", searchTerm);
        }, 300); // Retraso de 300ms
    });

   
    toggleSearchButton.addEventListener("click", () => {
        const input = searchBar.querySelector("input");
        if (searchBar.style.width === "0px" || !searchBar.style.width) {
            searchBar.style.width = "350px";
            input.style.opacity = "1";
        } else {
            searchBar.style.width = "0";
            input.style.opacity = "0";
        }
    });

    
    loadMoreButton.addEventListener("click", loadMoreMovies);

   
    fetch(csvUrl)
        .then(response => response.text())
        .then(csvText => {
            const data = Papa.parse(csvText, { header: true, skipEmptyLines: true }).data;
            movieData = data;
            console.log("Datos cargados:", movieData);

          
            const fragment = document.createDocumentFragment();
            const allButton = document.createElement("button");
            allButton.textContent = "Todo";
            allButton.onclick = showAllMovies;
            fragment.appendChild(allButton);

            const genres = [...new Set(movieData.flatMap(movie => movie.genero.split(" ")))];
            genres.forEach(genre => {
                const button = document.createElement("button");
                button.textContent = genre;
                button.onclick = () => applyFilter("genre", genre);
                fragment.appendChild(button);
            });
            genreFilters.appendChild(fragment);

         
            showAllMovies();
        })
        .catch(error => console.error("Error al cargar el CSV:", error));
})();