document.addEventListener("DOMContentLoaded", function() {
    const endpoint = 'https://academiadaaprovacao.mindz.com.br/api/public/v1/products/courses/?limit=100';
    let courses = []; // Armazena os cursos para uso posterior na busca

    async function fetchCourses() {
        try {
            const response = await fetch(endpoint, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`Erro: ${response.statusText}`);
            }

            const responseData = await response.json();
            courses = responseData.results; // Guarda os cursos
            displayCourses(courses);
        } catch (error) {
            console.error('Erro ao buscar cursos:', error);
        }
    }

    function displayCourses(courses) {
        const container = document.querySelector('#courses-container');
        container.innerHTML = ''; // Limpa o container antes de exibir os cursos

        courses.forEach(course => {
            const cardHTML = `
                <div class="col-lg-4 d-inline-flex align-items-center justify-content-center course-card" data-name="${course.name.toLowerCase()}">
                    <div class="card p-3 border_02 shadow background_white">
                        <img src=${course.image} class="card-img-top" alt="Capa do Curso">
                        <div class="card-body col">
                            <h5 class="card-title mb-3 font-purple">${course.name}</h5>
                            <h6 class="card-subtitle mb-2 font-purple">${course.teachers_name}</h6>
                            <p class="fs-5 font-yellow"><b>por R$${course.price}</b></p>
                            <div class="text-center">
                                <a href="${course.checkout_page}" class="btn btn-primary btn_02 w-100">Quero comprar agora!</a>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            container.innerHTML += cardHTML;
        });
    }

    function setupSearch() {
        const searchInput = document.getElementById("search-bar");

        if (!searchInput) {
            console.error('Elemento search-bar não encontrado no DOM.');
            return;
        }

        searchInput.addEventListener("input", e => {
            const value = e.target.value.toLowerCase();
            const filteredCourses = courses.filter(course => course.name.toLowerCase().includes(value));
            displayCourses(filteredCourses); // Atualiza a exibição com os cursos filtrados
        });
    }

    // Chama a função fetchCourses e lida com os resultados
    fetchCourses().then(() => {
        setupSearch(); // Configura a busca após os cursos terem sido carregados
    });
});