{% extends "base.html" %}
{% block title %}El Observador - Últimas Noticias{% endblock %}

{% block content %}
<div class="card" style="padding: 1.5rem;">
    <!-- 🔥 CORREGIDO: url_for('home.home') -->
    <form method="get" action="{{ url_for('home.home') }}" id="filter-form">
        <input type="hidden" name="page" id="page" value="{{ page or 1 }}">
        <input type="hidden" name="per_page" id="per_page" value="{{ per_page or 20 }}">
        <input type="hidden" name="lang" id="lang" value="{{ (lang or 'es') }}">
        {% if not use_tr %}
        <input type="hidden" name="orig" id="orig" value="1">
        {% else %}
        <input type="hidden" name="orig" id="orig" value="">
        {% endif %}
        <input type="hidden" name="semantic" id="semantic" value="{{ '1' if use_semantic else '' }}">

        <div class="filter-main-row" style="display: flex; gap: 10px; width: 100%;">
            <div class="filter-search-box" style="flex: 1;">
                <input type="search" name="q" id="q" placeholder="Buscar noticias..." value="{{ q or '' }}"
                    style="width: 100%; padding: 0.8rem 1rem; font-size: 1.1rem; border-radius: 0; border: 1px solid var(--ink-black);">
            </div>

            <div class="filter-actions" style="display: flex; gap: 5px;">
                <button type="submit" class="btn" style="padding: 0.8rem 1.2rem; border-radius: 0;" title="Buscar">
                    <i class="fas fa-search"></i>
                </button>
                <a href="{{ url_for('home.home') }}" class="btn btn-secondary"
                    style="padding: 0.8rem 1.2rem; border-radius: 8px;" title="Limpiar filtros">
                    <i class="fas fa-eraser"></i>
                </a>
            </div>
        </div>

        <div class="filter-row">
            <div class="filter-group">
                <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 class="filter-group">
                <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 class="filter-group">
                <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|country_flag }} {{ pais.nombre }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="filter-group">
                <label for="fecha">Fecha</label>
                <input type="date" name="fecha" id="fecha" value="{{ fecha_filtro or '' }}">
            </div>

            <div class="filter-group toggle-group">
                <label class="switch" style="margin-bottom: 0;">
                    <input type="checkbox" id="semantic-toggle" {% if use_semantic %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
                <span style="font-size: 0.85rem; font-weight: 600;">Búsqueda IA</span>
            </div>
        </div>
    </form>
</div>



<div id="search-history-container" {% if q %}style="display:none;" {% endif %}>
    {% if session.get('user_id') and recent_searches_with_results and not q and page == 1 %}
    <div class="search-history-home" style="margin-bottom: 3rem; padding: 0 10px;">
        <h3 style="margin-bottom: 20px; color: var(--text-color); font-weight: 600; padding-left: 10px;">
            <i class="fas fa-history"></i> Tu Actividad Reciente
        </h3>
        <div class="timeline-container">
            {% for search in recent_searches_with_results %}
            <div class="timeline-item" id="search-block-{{ search.id }}">
                <div class="timeline-dot"></div>
                <div class="timeline-content search-block-container">
                    <button onclick="confirmDeleteSearch('{{ search.id }}')" class="btn-delete-search"
                        title="Eliminar este bloque">
                        <i class="fas fa-times"></i>
                    </button>

                    {% set search_url = url_for('home.home', q=search.query, pais_id=search.pais_id,
                    categoria_id=search.categoria_id) %}
                    <a href="{{ search_url }}" class="search-block-link" style="text-decoration: none; color: inherit;">
                        <div class="card search-history-card">
                            <div class="timeline-header">
                                <div class="timeline-title">
                                    {% if search.query %}
                                    <span class="search-query">"{{ search.query }}"</span>
                                    {% endif %}
                                    {% if search.pais_nombre %}
                                    <span class="search-tag"><i class="fas fa-globe-americas"></i> {{ search.pais_nombre
                                        }}</span>
                                    {% endif %}
                                    {% if search.categoria_nombre %}
                                    <span class="search-tag"><i class="fas fa-tag"></i> {{ search.categoria_nombre
                                        }}</span>
                                    {% endif %}
                                    {% if not search.query and not search.pais_nombre and not search.categoria_nombre %}
                                    <span class="search-query">Búsqueda General</span>
                                    {% endif %}
                                </div>
                                <div class="timeline-meta">
                                    <span title="{{ search.searched_at.strftime('%d/%m/%Y %H:%M') }}">
                                        {{ search.searched_at.strftime('%H:%M') }}
                                    </span>
                                </div>
                            </div>

                            <div class="search-results-preview">
                                {% if search.noticias %}
                                <ul class="timeline-news-list">
                                    {% for noticia in search.noticias %}
                                    <li>
                                        {% if noticia.traduccion_id %}
                                        <a href="{{ url_for('noticia.noticia', tr_id=noticia.traduccion_id) }}"
                                            class="result-tile-link">
                                            {% else %}
                                            <a href="{{ url_for('noticia.noticia', id=noticia.id) }}"
                                                class="result-tile-link">
                                                {% endif %}
                                                <span class="result-title">
                                                    {{ noticia.titulo_traducido if noticia.tiene_traduccion else
                                                    noticia.titulo_original }}
                                                </span>
                                                <span class="result-source">{{ noticia.fuente_nombre }}</span>
                                            </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                <p class="no-results">Sin resultados nuevos</p>
                                {% endif %}
                            </div>

                            <div class="timeline-footer">
                                <i class="far fa-newspaper"></i> {{ search.results_count }} resultados encontrados
                                <span class="view-more">Ver ahora <i class="fas fa-arrow-right"></i></span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <style>
        :root {
            --accent-color: var(--accent-red);
            --text-color: var(--newspaper-gray);
            --bg-color: var(--paper-cream);
            --card-bg: var(--paper-white);
        }

        .timeline-container {
            position: relative;
            padding-left: 30px;
            border-left: 2px solid var(--accent-red);
            /* Var accent-color opacity */
            margin-left: 10px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 30px;
        }

        .timeline-dot {
            position: absolute;
            left: -37px;
            top: 20px;
            width: 12px;
            height: 12px;
            background: var(--accent-red);
            border-radius: 50%;
            border: 2px solid var(--bg-color, #f4f6f8);
            box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2);
        }

        .timeline-content {
            position: relative;
        }

        .search-history-card {
            padding: 0;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            background: var(--card-bg, #fff);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .timeline-header {
            padding: 15px 20px;
            background: rgba(108, 99, 255, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .timeline-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-color);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .search-query {
            color: var(--accent-color);
            font-weight: 700;
        }

        .search-tag {
            font-size: 0.85rem;
            background: rgba(0, 0, 0, 0.05);
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: normal;
            color: #666;
        }

        .timeline-meta {
            font-size: 0.85rem;
            color: #888;
            white-space: nowrap;
            margin-left: 10px;
        }

        .search-results-preview {
            padding: 15px 20px;
        }

        .timeline-news-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .timeline-news-list li {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .timeline-news-list li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .result-title {
            display: block;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-color);
            line-height: 1.4;
            margin-bottom: 4px;
            transition: color 0.2s;
        }

        .result-source {
            font-size: 0.8rem;
            color: #888;
        }

        .result-tile-link:hover .result-title {
            color: var(--accent-color);
        }

        .timeline-footer {
            padding: 10px 20px;
            background: rgba(0, 0, 0, 0.02);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.85rem;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .view-more {
            color: var(--accent-color);
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .btn-delete-search {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
            border: none;
            background: #fff;
            color: #ccc;
            cursor: pointer;
            transition: all 0.2s;
            padding: 6px;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .search-block-container:hover .btn-delete-search {
            color: #ff4d4d;
        }

        .timeline-item:hover .search-history-card {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }

        .timeline-item:hover .view-more {
            opacity: 1;
        }

        /* Dark Mode Adjustments */
        .dark-mode .timeline-container {
            border-left-color: rgba(108, 99, 255, 0.2);
        }

        .dark-mode .timeline-dot {
            border-color: #1a2635;
            /* Dark bg */
        }

        .dark-mode .search-history-card {
            background: #252e3e;
            border-color: #333;
        }

        .dark-mode .timeline-header {
            background: rgba(255, 255, 255, 0.03);
            border-bottom-color: #333;
        }

        .dark-mode .search-tag {
            background: rgba(255, 255, 255, 0.1);
            color: #ccc;
        }

        .dark-mode .timeline-news-list li {
            border-bottom-color: #333;
        }

        .dark-mode .timeline-footer {
            background: rgba(0, 0, 0, 0.2);
            border-top-color: #333;
        }

        .dark-mode .btn-delete-search {
            background: #333;
            color: #666;
        }

        .dark-mode .result-source {
            color: #777;
        }

        .no-results {
            text-align: center;
            color: #888;
            font-style: italic;
            padding: 10px;
        }
    </style>

    <script>
        function confirmDeleteSearch(searchId) {
            if (confirm('¿Eliminar este bloque del historial?')) {
                fetch(`/delete_search/${searchId}`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const block = document.getElementById(`search-block-${searchId}`);
                            if (block) {
                                block.style.opacity = '0';
                                block.style.transform = 'scale(0.9)';
                                setTimeout(() => {
                                    block.remove();
                                    // If no blocks left, maybe hide the container?
                                    const container = document.querySelector('.search-history-home div[style*="grid"]');
                                    if (container && container.children.length === 0) {
                                        document.querySelector('.search-history-home').remove();
                                    }
                                }, 300);
                            }
                        } else {
                            alert('Error al eliminar: ' + (data.error || 'Desconocido'));
                        }
                    })
                    .catch(err => {
                        console.error('Error:', err);
                        alert('Error de conexión');
                    });
            }
        }
    </script>
    {% endif %}
</div>

<div id="noticias-container" style="position: relative;">
    <div id="news-loading-overlay"
        style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 10; align-items: center; justify-content: center;">
        <div class="spinner"
            style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent-red); border-radius: 50%; animation: spin 1s linear infinite;">
        </div>
    </div>
    <style>
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    {% 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');
        const categoriaSelect = document.getElementById('categoria_id');
        const fechaInput = document.getElementById('fecha');
        const qInput = document.getElementById('q');

        const pageInput = document.getElementById('page');
        const origInput = document.getElementById('orig');
        const langInput = document.getElementById('lang');

        window.setPage = function (p) {
            if (pageInput) pageInput.value = p;
        };

        function setPage1() { pageInput.value = 1; }

        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 = '';
            }
        }

        let currentAbortController = null;

        async function cargarNoticiasFromURL(url, isNewSearch = false) {
            const container = document.getElementById('noticias-container');

            // Abort previous request
            if (currentAbortController) {
                currentAbortController.abort();
            }
            currentAbortController = new AbortController();
            const signal = currentAbortController.signal;

            // Prepare UI for loading
            container.style.opacity = '0.5';
            container.style.transition = 'opacity 0.2s';
            const loadingOverlay = document.getElementById('news-loading-overlay');
            if (loadingOverlay) loadingOverlay.style.display = 'flex';

            try {
                const response = await fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    signal: signal
                });

                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

                const html = await response.text();

                if (signal.aborted) return;

                container.innerHTML = html;

                // Re-apply styles/initializers for dynamic content
                if (typeof applyReadStyles === 'function') applyReadStyles();
                if (typeof loadFavorites === 'function') loadFavorites();

                // Reset minHeight since we have new content
                container.style.minHeight = '';

                // Scroll to top of results if it's a new search
                if (isNewSearch) {
                    const rect = container.getBoundingClientRect();
                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                    const targetY = rect.top + scrollTop - 100; // Offset for sticky nav
                    window.scrollTo({ top: targetY, behavior: 'smooth' });
                }

            } catch (error) {
                if (error.name === 'AbortError') {
                    console.log('Fetch aborted');
                } else {
                    console.error('Error al cargar noticias:', error);
                    container.innerHTML = '<div style="text-align:center; padding:3rem; color:var(--accent-red);">' +
                        '<i class="fas fa-exclamation-triangle fa-2x"></i>' +
                        '<p style="margin-top:1rem;">Error al cargar las noticias. Por favor, reintenta.</p></div>';
                }
            } finally {
                if (!signal.aborted) {
                    container.style.opacity = '1';
                    const loadingOverlay = document.getElementById('news-loading-overlay');
                    if (loadingOverlay) loadingOverlay.style.display = 'none';
                    currentAbortController = null;
                }
            }
        }

        window.cargarNoticias = async function (keepPage) {
            if (!keepPage) setPage1();

            const formData = new FormData(form);
            const params = new URLSearchParams(formData);

            // Toggle search history visibility based on query
            const historyContainer = document.getElementById('search-history-container');
            if (historyContainer) {
                const queryVal = params.get('q') || '';
                historyContainer.style.display = queryVal.trim().length > 0 ? 'none' : 'block';
            }

            const newUrl = `${form.action}?${params.toString()}`;

            await cargarNoticiasFromURL(newUrl, !keepPage);

            // Update URL without reloading
            if (!keepPage) {
                window.history.pushState({ path: newUrl }, '', newUrl);
            } else {
                window.history.replaceState({ path: newUrl }, '', newUrl);
            }
        };

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            cargarNoticias(false);
        });

        // Toggle buttons (if they exist in the UI)
        ['toggle-orig', 'toggle-tr'].forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                el.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (id === 'toggle-orig') origInput.value = '1';
                    else {
                        origInput.value = '';
                        if (!langInput.value) langInput.value = 'es';
                    }
                    cargarNoticias(false);
                });
            }
        });

        continenteSelect.addEventListener('change', function () {
            filtrarPaises();
            cargarNoticias(false);
        });
        paisSelect.addEventListener('change', () => cargarNoticias(false));
        categoriaSelect.addEventListener('change', () => cargarNoticias(false));
        fechaInput.addEventListener('change', () => cargarNoticias(false));

        let qTimer = null;
        qInput.addEventListener('input', function () {
            if (qTimer) clearTimeout(qTimer);
            qTimer = setTimeout(() => {
                cargarNoticias(false);
            }, 500); // Optimized debounce
        });

        const semanticToggle = document.getElementById('semantic-toggle');
        const semanticInput = document.getElementById('semantic');
        if (semanticToggle) {
            semanticToggle.addEventListener('change', function () {
                semanticInput.value = this.checked ? '1' : '';
                cargarNoticias(false);
            });
        }

        filtrarPaises();

        window.addEventListener('popstate', function (e) {
            const url = (e.state && e.state.path) ? e.state.path : window.location.href;
            cargarNoticiasFromURL(url, false);
        });
    });
</script>
{% endblock %}