{% extends "base.html" %}

{% block title %}Últimas Noticias RSS{% endblock %}

{% block content %}
<header>
    <h1>Agregador de Noticias</h1>
    <p class="subtitle">Tus fuentes de información, en un solo lugar.</p>
    <a href="{{ url_for('dashboard') }}" class="top-link" style="margin-top:15px;">
        <i class="fas fa-cogs"></i> Gestionar Feeds
    </a>
</header>

<div class="card">
    <h2><i class="fas fa-filter" style="color: var(--secondary-color); margin-right: 10px;"></i>Filtrar Noticias</h2>
    <form method="get" action="{{ url_for('home') }}" id="filter-form">

        <div style="margin-bottom: 20px;">
            <label for="q">Buscar por palabra clave</label>
            <input type="search" name="q" id="q" placeholder="Ej: Trump, California, IA..." value="{{ q or '' }}">
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: flex-end; border-top: 1px solid var(--border-color); padding-top: 20px;">
            <div>
                <label for="categoria_id">Categoría</label>
                <select name="categoria_id" id="categoria_id">
                    <option value="">— Todas —</option>
                    {% for cat in categorias %}
                        <option value="{{ cat.id }}" {% if cat_id == cat.id %}selected{% endif %}>{{ cat.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="continente_id">Continente</label>
                <select name="continente_id" id="continente_id">
                    <option value="">— Todos —</option>
                    {% for cont in continentes %}
                        <option value="{{ cont.id }}" {% if cont_id == cont.id %}selected{% endif %}>{{ cont.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="pais_id">País</label>
                <select name="pais_id" id="pais_id">
                    <option value="">— Todos —</option>
                    {% for pais in paises %}
                        <option value="{{ pais.id }}" data-continente-id="{{ pais.continente_id }}" {% if pais_id == pais.id %}selected{% endif %}>
                            {{ pais.nombre }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="fecha">Fecha</label>
                <input type="date" name="fecha" id="fecha" value="{{ fecha_filtro or '' }}">
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;">
                <button type="submit" class="btn"><i class="fas fa-search"></i> Filtrar</button>
                <a href="{{ url_for('home') }}" class="btn btn-secondary"><i class="fas fa-eraser"></i> Limpiar</a>
            </div>
        </div>
    </form>
</div>

<div id="noticias-container">
    {% include '_noticias_list.html' %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('filter-form');
    const continenteSelect = document.getElementById('continente_id');
    const paisSelect = document.getElementById('pais_id');

    // Lógica para filtrar países al cambiar el continente
    function filtrarPaises() {
        const continenteId = continenteSelect.value;
        for (let i = 1; i < paisSelect.options.length; i++) {
            const option = paisSelect.options[i];
            const paisContinenteId = option.getAttribute('data-continente-id');
            option.style.display = (!continenteId || paisContinenteId === continenteId) ? '' : 'none';
        }
        const opcionSeleccionada = paisSelect.options[paisSelect.selectedIndex];
        if (opcionSeleccionada && opcionSeleccionada.style.display === 'none') {
            paisSelect.value = '';
        }
    }

    // Lógica para enviar el formulario con AJAX
    async function actualizarNoticias(event) {
        if (event) event.preventDefault();
        const formData = new FormData(form);
        const params = new URLSearchParams(formData);
        const newUrl = `${form.action}?${params.toString()}`;
        const container = document.getElementById('noticias-container');
        container.style.opacity = '0.5';
        container.innerHTML = '<div style="text-align:center; padding: 40px;"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';
        try {
            const response = await fetch(newUrl, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            const html = await response.text();
            container.innerHTML = html;
            window.history.pushState({path: newUrl}, '', newUrl);
        } catch (error) {
            console.error('Error al filtrar noticias:', error);
            container.innerHTML = '<p style="color:var(--error-color); text-align:center;">Error al cargar las noticias.</p>';
        } finally {
            container.style.opacity = '1';
        }
    }

    // Asignar los eventos
    continenteSelect.addEventListener('change', filtrarPaises);
    form.addEventListener('submit', actualizarNoticias);
    filtrarPaises(); // Ejecutar al inicio
});
</script>
{% endblock %}