<?php

$tipo = trim($_GET['tipo'] ?? '');
$tituloSeccion = $tipo !== '' ? $tipo : 'Películas mexicanas';

?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">

    <title>
        Cinema México | <?= htmlspecialchars($tituloSeccion, ENT_QUOTES, 'UTF-8') ?>
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta
        name="description"
        content="Consulta el catálogo cinematográfico de Cinema México."
    >

    <link rel="stylesheet" href="assets/css/cinema.css">

    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    >
</head>

<body>

<div class="cm-page cm-catalog-page">

    <div class="cm-layout">

        <?php include __DIR__ . '/partials/sidebar.php'; ?>

        <main class="cm-content cm-catalog-content">

            <!-- ENCABEZADO -->
            <section class="cm-catalog-hero">

                <div class="cm-catalog-hero-copy">

                    <div class="cm-catalog-eyebrow">
                        <span></span>
                        Catálogo cinematográfico
                    </div>

                    <h1 class="cm-catalog-title">
                        <?= htmlspecialchars(
                            $tituloSeccion,
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>
                    </h1>

                    <p class="cm-catalog-description">
                        Explora películas, producciones, historias y personas
                        que forman parte de la cinematografía mexicana.
                    </p>

                </div>

                <div class="cm-catalog-hero-decoration">
                    <i class="fa-solid fa-film"></i>
                </div>

            </section>


            <!-- BÚSQUEDA -->
           <!-- BUSCADOR Y FILTROS -->
            <section class="cm-search-panel">

                <div class="cm-search-main">

                    <div class="cm-catalog-search-wrapper">

                        <i class="fa-solid fa-magnifying-glass"></i>

                        <input
                            type="search"
                            id="buscar"
                            class="cm-catalog-search"
                            placeholder="Título, dirección, reparto, producción..."
                            autocomplete="off"
                            aria-label="Buscar en el catálogo cinematográfico"
                        >

                        <button
                            id="buscarBtn"
                            class="cm-catalog-search-btn"
                            type="button"
                        >
                            <i class="fa-solid fa-magnifying-glass"></i>
                            Buscar
                        </button>

                    </div>

                    <button
                        type="button"
                        id="toggleFilters"
                        class="cm-filter-toggle"
                        aria-expanded="false"
                        aria-controls="advancedFilters"
                    >
                        <i class="fa-solid fa-sliders"></i>
                        Filtros
                        <span id="activeFiltersCount"></span>
                    </button>

                </div>

                <div id="advancedFilters" class="cm-advanced-filters" hidden>

                    <div class="cm-filter-grid">

                        <div class="cm-filter-field">
                            <label for="filtroTipo">
                                Tipo de producción
                            </label>

                            <select id="filtroTipo">
                                <option value="">Todos los tipos</option>
                                <option value="Largometraje">Largometraje</option>
                                <option value="Cortometraje">Cortometraje</option>
                                <option value="Documental">Documental</option>
                                <option value="Animación">Animación</option>
                                <option value="Serie">Serie</option>
                            </select>
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroGenero">
                                Género
                            </label>

                            <select id="filtroGenero">
                                <option value="">Todos los géneros</option>
                                <option value="Drama">Drama</option>
                                <option value="Comedia">Comedia</option>
                                <option value="Documental">Documental</option>
                                <option value="Terror">Terror</option>
                                <option value="Suspenso">Suspenso</option>
                                <option value="Acción">Acción</option>
                                <option value="Animación">Animación</option>
                                <option value="Experimental">Experimental</option>
                            </select>
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroPais">
                                País
                            </label>

                            <select id="filtroPais">
                                <option value="">Todos los países</option>
                                <option value="México">México</option>
                            </select>
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroAnioDesde">
                                Año desde
                            </label>

                            <input
                                type="number"
                                id="filtroAnioDesde"
                                min="1895"
                                max="<?= date('Y') ?>"
                                placeholder="Ej. 2010"
                            >
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroAnioHasta">
                                Año hasta
                            </label>

                            <input
                                type="number"
                                id="filtroAnioHasta"
                                min="1895"
                                max="<?= date('Y') ?>"
                                placeholder="Ej. <?= date('Y') ?>"
                            >
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroDuracion">
                                Duración
                            </label>

                            <select id="filtroDuracion">
                                <option value="">Cualquier duración</option>
                                <option value="corta">Hasta 30 minutos</option>
                                <option value="media">31 a 60 minutos</option>
                                <option value="larga">Más de 60 minutos</option>
                            </select>
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroApoyo">
                                Apoyo cinematográfico
                            </label>

                            <select id="filtroApoyo">
                                <option value="">Todos los apoyos</option>
                                <option value="FOCINE">FOCINE</option>
                                <option value="EFICINE">EFICINE</option>
                                <option value="FOPROCINE">FOPROCINE</option>
                                <option value="FIDECINE">FIDECINE</option>
                                <option value="IMCINE">IMCINE</option>
                            </select>
                        </div>

                        <div class="cm-filter-field">
                            <label for="filtroOrden">
                                Ordenar por
                            </label>

                            <select id="filtroOrden">
                                <option value="titulo_asc">Título A–Z</option>
                                <option value="titulo_desc">Título Z–A</option>
                                <option value="anio_desc">Más recientes</option>
                                <option value="anio_asc">Más antiguas</option>
                            </select>
                        </div>

                    </div>

                    <div class="cm-filter-actions">

                        <button
                            type="button"
                            id="limpiarFiltros"
                            class="cm-filter-clear"
                        >
                            <i class="fa-solid fa-rotate-left"></i>
                            Limpiar filtros
                        </button>

                        <button
                            type="button"
                            id="aplicarFiltros"
                            class="cm-filter-apply"
                        >
                            Aplicar filtros
                        </button>

                    </div>

                </div>

                <div
                    id="activeFilterChips"
                    class="cm-active-filter-chips"
                    aria-live="polite"
                ></div>

            </section>


            <!-- TÍTULO DE RESULTADOS -->
            <section class="cm-catalog-results-heading">

                <div>

                    <span class="cm-home-section-kicker">
                        Selección cinematográfica
                    </span>

                    <h2 class="cm-section-title" id="sectionTitle">

                        <?= htmlspecialchars(
                            $tituloSeccion,
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>

                        <span
                            class="cm-results-count"
                            id="resultsCount"
                        ></span>

                    </h2>

                </div>

                <div class="cm-catalog-line"></div>

            </section>


            <!-- ESTADO -->
            <div id="status" class="cm-loading">

                <span class="cm-spinner"></span>

                <span>Cargando películas...</span>

            </div>


            <!-- PELÍCULAS -->
            <section
                class="cm-grid cm-catalog-grid"
                id="moviesGrid"
                aria-live="polite"
            ></section>


            <!-- PAGINACIÓN -->
            <nav
                class="cm-pagination cm-catalog-pagination"
                aria-label="Paginación del catálogo"
            >

                <button
                    id="prevBtn"
                    type="button"
                    aria-label="Página anterior"
                >
                    <i class="fa-solid fa-arrow-left"></i>
                    Anterior
                </button>

                <span id="pageInfo"></span>

                <button
                    id="nextBtn"
                    type="button"
                    aria-label="Página siguiente"
                >
                    Siguiente
                    <i class="fa-solid fa-arrow-right"></i>
                </button>

            </nav>

        </main>

    </div>

</div>


<script>
const API_URL = '../api/index.php?r=peliculas';

const initialTipo = <?= json_encode(
    $tipo,
    JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
) ?>;

let page = 1;
let totalPages = 1;
let buscar = '';
let tipo = initialTipo;
let searchTimeout = null;
let filters = {
    genero: '',
    pais: '',
    anioDesde: '',
    anioHasta: '',
    duracion: '',
    apoyo: '',
    orden: 'titulo_asc'
};

const grid = document.getElementById('moviesGrid');
const statusBox = document.getElementById('status');
const pageInfo = document.getElementById('pageInfo');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const buscarInput = document.getElementById('buscar');
const buscarBtn = document.getElementById('buscarBtn');
const resultsCount = document.getElementById('resultsCount');
const pagination = document.querySelector('.cm-pagination');
const toggleFilters = document.getElementById('toggleFilters');
const advancedFilters = document.getElementById('advancedFilters');
const aplicarFiltrosBtn = document.getElementById('aplicarFiltros');
const limpiarFiltrosBtn = document.getElementById('limpiarFiltros');
const activeFiltersCount = document.getElementById('activeFiltersCount');
const activeFilterChips = document.getElementById('activeFilterChips');

const filtroTipo = document.getElementById('filtroTipo');
const filtroGenero = document.getElementById('filtroGenero');
const filtroPais = document.getElementById('filtroPais');
const filtroAnioDesde = document.getElementById('filtroAnioDesde');
const filtroAnioHasta = document.getElementById('filtroAnioHasta');
const filtroDuracion = document.getElementById('filtroDuracion');
const filtroApoyo = document.getElementById('filtroApoyo');
const filtroOrden = document.getElementById('filtroOrden');

async function loadMovies() {

    showLoading();

    const params = new URLSearchParams({
        page: String(page),
        limit: '9'
    });

    if (buscar) {
        params.append('buscar', buscar);
    }

    if (tipo) {
        params.append('tipo', tipo);
    }
    if (filters.genero) {
        params.append('genero', filters.genero);
    }

    if (filters.pais) {
        params.append('pais', filters.pais);
    }

    if (filters.anioDesde) {
        params.append('anio_desde', filters.anioDesde);
    }

    if (filters.anioHasta) {
        params.append('anio_hasta', filters.anioHasta);
    }

    if (filters.duracion) {
        params.append('duracion', filters.duracion);
    }

    if (filters.apoyo) {
        params.append('apoyo', filters.apoyo);
    }

    if (filters.orden) {
        params.append('orden', filters.orden);
    }
    try {

        const response = await fetch(
            `${API_URL}&${params.toString()}`
        );

        if (!response.ok) {
            throw new Error(
                `La consulta respondió con código ${response.status}`
            );
        }

        const json = await response.json();

        if (!json.success) {
            throw new Error(
                json.message || 'Error al consultar las películas'
            );
        }

        const movies = Array.isArray(json.data)
            ? json.data
            : [];

        const paginationData = json.pagination || {
            page: 1,
            total_pages: 1,
            total_items: movies.length
        };

        totalPages = Number(
            paginationData.total_pages || 1
        );

        renderMovies(movies);
        renderPagination(paginationData);
        updateResultsCount(
            Number(paginationData.total_items || 0)
        );

    } catch (error) {

        console.error('Error al cargar películas:', error);

        grid.innerHTML = '';

        statusBox.style.display = 'flex';
        statusBox.className = 'cm-error cm-catalog-message';

        statusBox.innerHTML = `
            <span class="cm-catalog-message-icon">
                <i class="fa-solid fa-triangle-exclamation"></i>
            </span>

            <div>
                <strong>No fue posible cargar las películas</strong>
                <p>${escapeHtml(error.message)}</p>
            </div>
        `;

        pagination.style.display = 'none';
    }
}


function showLoading() {

    statusBox.style.display = 'flex';
    statusBox.className = 'cm-loading';

    statusBox.innerHTML = `
        <span class="cm-spinner"></span>
        <span>Cargando películas...</span>
    `;

    grid.innerHTML = '';
    pagination.style.display = 'none';
}


function renderMovies(movies) {

    statusBox.style.display = 'none';

    if (!movies.length) {

        grid.innerHTML = '';

        statusBox.style.display = 'flex';
        statusBox.className = 'cm-empty cm-catalog-message';

        statusBox.innerHTML = `
            <span class="cm-catalog-message-icon">
                <i class="fa-solid fa-film"></i>
            </span>

            <div>
                <strong>No encontramos películas</strong>

                <p>
                    ${
                        buscar
                            ? `No existen resultados para “${escapeHtml(buscar)}”.`
                            : 'No hay películas disponibles en esta categoría.'
                    }
                </p>

                ${
                    buscar
                        ? `
                            <button
                                class="cm-clear-search"
                                type="button"
                                onclick="clearSearch()"
                            >
                                Limpiar búsqueda
                            </button>
                        `
                        : ''
                }
            </div>
        `;

        return;
    }

    grid.innerHTML = movies.map((movie, index) => {

        const title =
            movie.titulo_espanol ||
            movie.titulo_original ||
            movie.titulo_ingles ||
            'Sin título';

        const defaultImage = 'assets/img/sin-imagen-pelicula.png';

        const img =
            movie.imagen_principal &&
            String(movie.imagen_principal).trim() !== ''
                ? movie.imagen_principal
                : defaultImage;
        const sicId = movie.sic_id || movie.id || '';
        const year = movie.anio || '';
        const country = movie.pais || movie.pais_produccion || '';
        const genre = movie.genero || movie.tipo_produccion || '';

        const safeDetailUrl =
            `pelicula-detalle.php?id=${encodeURIComponent(sicId)}`;

        return `
            <article
                class="cm-catalog-card"
                style="--cm-card-delay: ${index * 60}ms"
            >

                <a
                    href="${safeDetailUrl}"
                    class="cm-catalog-card-image"
                    aria-label="Consultar ${escapeHtml(title)}"
                >

                    ${
                        img
                            ? `
                                <img
                                    src="${escapeHtml(img)}"
                                    alt="${escapeHtml(title)}"
                                    loading="lazy"
                                    onerror="this.onerror=null; this.src='assets/img/sin-imagen-pelicula.png';"
                                >
                            `
                            : renderImagePlaceholder()
                    }

                    <div class="cm-catalog-card-overlay"></div>

                    <div class="cm-catalog-card-view">
                        <span>
                            <i class="fa-solid fa-eye"></i>
                        </span>

                        Ver ficha
                    </div>

                    ${
                        year
                            ? `
                                <span class="cm-catalog-card-year">
                                    ${escapeHtml(year)}
                                </span>
                            `
                            : ''
                    }

                </a>

                <div class="cm-catalog-card-body">

                    <div class="cm-catalog-card-index">
                        ${String(index + 1).padStart(2, '0')}
                    </div>

                    <div class="cm-catalog-card-copy">

                        <h3>
                            <a href="${safeDetailUrl}">
                                ${escapeHtml(title)}
                            </a>
                        </h3>

                        <div class="cm-catalog-card-meta">

                            ${
                                country
                                    ? `
                                        <span>
                                            <i class="fa-solid fa-location-dot"></i>
                                            ${escapeHtml(country)}
                                        </span>
                                    `
                                    : ''
                            }

                            ${
                                genre
                                    ? `
                                        <span>
                                            <i class="fa-solid fa-clapperboard"></i>
                                            ${escapeHtml(genre)}
                                        </span>
                                    `
                                    : ''
                            }

                        </div>

                    </div>

                    <a
                        href="${safeDetailUrl}"
                        class="cm-catalog-card-arrow"
                        aria-label="Abrir ficha de ${escapeHtml(title)}"
                    >
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </div>

            </article>
        `;

    }).join('');
}


/*function renderImagePlaceholder() {
    return `
        <div class="cm-catalog-card-placeholder">
            <i class="fa-solid fa-film"></i>
            <span>Imagen no disponible</span>
        </div>
    `;
}


function handleImageError(image) {

    const container = image.parentElement;

    image.remove();

    if (
        container &&
        !container.querySelector('.cm-catalog-card-placeholder')
    ) {
        container.insertAdjacentHTML(
            'afterbegin',
            renderImagePlaceholder()
        );
    }
}
*/

function renderPagination(paginationData) {

    const currentPage = Number(paginationData.page || page);
    const pages = Number(paginationData.total_pages || 1);

    pageInfo.innerHTML = `
        <span>Página</span>
        <strong>${currentPage}</strong>
        <span>de</span>
        <strong>${pages}</strong>
    `;

    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= pages;

    pagination.style.display =
        pages <= 1 ? 'none' : 'flex';
}


function updateResultsCount(total) {

    if (total > 0) {

        resultsCount.textContent =
            `${total} ${total === 1 ? 'película' : 'películas'}`;

        resultsCount.style.display = 'inline-flex';

    } else {
        resultsCount.style.display = 'none';
    }
}


function clearSearch() {

    buscarInput.value = '';
    buscar = '';
    page = 1;

    loadMovies();
}


function executeSearch() {

    clearTimeout(searchTimeout);

    buscar = buscarInput.value.trim();
    page = 1;

    loadMovies();
}


buscarInput.addEventListener('input', event => {

    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(() => {

        buscar = event.target.value.trim();
        page = 1;

        loadMovies();

    }, 400);
});


buscarInput.addEventListener('keydown', event => {

    if (event.key === 'Enter') {
        executeSearch();
    }
});


buscarBtn.addEventListener('click', executeSearch);


document.addEventListener('keydown', event => {

    const target = event.target;

    const isTyping =
        target instanceof HTMLInputElement ||
        target instanceof HTMLTextAreaElement ||
        target.isContentEditable;

    if (
        (event.ctrlKey || event.metaKey) &&
        event.key.toLowerCase() === 'k'
    ) {
        event.preventDefault();
        buscarInput.focus();
        buscarInput.select();
        return;
    }

    if (
        event.key === 'Escape' &&
        document.activeElement === buscarInput
    ) {
        clearSearch();
        buscarInput.blur();
        return;
    }

    if (isTyping) {
        return;
    }

    if (
        event.key === 'ArrowLeft' &&
        !prevBtn.disabled
    ) {
        changePage(page - 1);
    }

    if (
        event.key === 'ArrowRight' &&
        !nextBtn.disabled
    ) {
        changePage(page + 1);
    }
});


function changePage(newPage) {

    if (
        newPage < 1 ||
        newPage > totalPages ||
        newPage === page
    ) {
        return;
    }

    page = newPage;

    loadMovies();

    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}


prevBtn.addEventListener('click', () => {
    changePage(page - 1);
});


nextBtn.addEventListener('click', () => {
    changePage(page + 1);
});


function escapeHtml(value) {

    if (
        value === null ||
        value === undefined
    ) {
        return '';
    }

    return String(value)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}


toggleFilters.addEventListener('click', () => {
    const isOpen = !advancedFilters.hasAttribute('hidden');

    if (isOpen) {
        advancedFilters.setAttribute('hidden', '');
    } else {
        advancedFilters.removeAttribute('hidden');
    }

    toggleFilters.setAttribute('aria-expanded', String(!isOpen));
});


aplicarFiltrosBtn.addEventListener('click', () => {

    tipo = filtroTipo.value;

    filters = {
        genero: filtroGenero.value,
        pais: filtroPais.value,
        anioDesde: filtroAnioDesde.value,
        anioHasta: filtroAnioHasta.value,
        duracion: filtroDuracion.value,
        apoyo: filtroApoyo.value,
        orden: filtroOrden.value
    };

    if (
        filters.anioDesde &&
        filters.anioHasta &&
        Number(filters.anioDesde) > Number(filters.anioHasta)
    ) {
        alert('El año inicial no puede ser mayor que el año final.');
        return;
    }

    page = 1;

    updateActiveFilters();
    loadMovies();
});


limpiarFiltrosBtn.addEventListener('click', () => {

    filtroTipo.value = '';
    filtroGenero.value = '';
    filtroPais.value = '';
    filtroAnioDesde.value = '';
    filtroAnioHasta.value = '';
    filtroDuracion.value = '';
    filtroApoyo.value = '';
    filtroOrden.value = 'titulo_asc';

    tipo = '';

    filters = {
        genero: '',
        pais: '',
        anioDesde: '',
        anioHasta: '',
        duracion: '',
        apoyo: '',
        orden: 'titulo_asc'
    };

    page = 1;

    updateActiveFilters();
    loadMovies();
});


function updateActiveFilters() {

    const activeFilters = [];

    if (tipo && tipo !== initialTipo) {
        activeFilters.push({
            key: 'tipo',
            label: `Tipo: ${tipo}`
        });
    }

    if (filters.genero) {
        activeFilters.push({
            key: 'genero',
            label: `Género: ${filters.genero}`
        });
    }

    if (filters.pais) {
        activeFilters.push({
            key: 'pais',
            label: `País: ${filters.pais}`
        });
    }

    if (filters.anioDesde) {
        activeFilters.push({
            key: 'anioDesde',
            label: `Desde: ${filters.anioDesde}`
        });
    }

    if (filters.anioHasta) {
        activeFilters.push({
            key: 'anioHasta',
            label: `Hasta: ${filters.anioHasta}`
        });
    }

    if (filters.duracion) {
        const durationLabels = {
            corta: 'Hasta 30 min',
            media: '31–60 min',
            larga: 'Más de 60 min'
        };

        activeFilters.push({
            key: 'duracion',
            label: `Duración: ${durationLabels[filters.duracion]}`
        });
    }

    if (filters.apoyo) {
        activeFilters.push({
            key: 'apoyo',
            label: `Apoyo: ${filters.apoyo}`
        });
    }

    if (filters.orden && filters.orden !== 'titulo_asc') {
        const orderLabels = {
            titulo_desc: 'Título Z–A',
            anio_desc: 'Más recientes',
            anio_asc: 'Más antiguas'
        };

        activeFilters.push({
            key: 'orden',
            label: `Orden: ${orderLabels[filters.orden] || filters.orden}`
        });
    }

    activeFiltersCount.textContent = activeFilters.length
        ? String(activeFilters.length)
        : '';

    activeFilterChips.innerHTML = activeFilters
        .map(filter => `
            <button
                type="button"
                class="cm-filter-chip"
                data-filter="${filter.key}"
            >
                ${escapeHtml(filter.label)}
                <i class="fa-solid fa-xmark"></i>
            </button>
        `)
        .join('');
}


activeFilterChips.addEventListener('click', event => {

    const chip = event.target.closest('.cm-filter-chip');

    if (!chip) {
        return;
    }

    const filterName = chip.dataset.filter;

    switch (filterName) {

        case 'tipo':
            filtroTipo.value = '';
            tipo = '';
            break;

        case 'genero':
            filtroGenero.value = '';
            filters.genero = '';
            break;

        case 'pais':
            filtroPais.value = '';
            filters.pais = '';
            break;

        case 'anioDesde':
            filtroAnioDesde.value = '';
            filters.anioDesde = '';
            break;

        case 'anioHasta':
            filtroAnioHasta.value = '';
            filters.anioHasta = '';
            break;

        case 'duracion':
            filtroDuracion.value = '';
            filters.duracion = '';
            break;

        case 'apoyo':
            filtroApoyo.value = '';
            filters.apoyo = '';
            break;

        case 'orden':
            filtroOrden.value = 'titulo_asc';
            filters.orden = 'titulo_asc';
            break;
    }

    page = 1;

    updateActiveFilters();
    loadMovies();
});

if (initialTipo) {
    filtroTipo.value = initialTipo;
}

updateActiveFilters();
loadMovies();
</script>

</body>
</html>