{% extends "base.html" %}

{% block title %}
{{ dato.titulo_trad or dato.titulo_orig or 'Detalle de Noticia' }}
{% endblock %}

{% block content %}
{% set d = dato %}

{% if not d %}
<div class="card">
    <p>No se encontró la noticia solicitada.</p>
</div>
{% else %}

<div class="card" id="main-article">
    <div class="feed-header">
        <h2 style="margin:0;">{{ d.titulo_trad or d.titulo_orig }}
            {% if d.lang_to %}
            <span class="badge">{{ d.lang_to|upper }}</span>
            {% endif %}
        </h2>
        <div class="header-actions">
            <a href="{{ url_for('pdf.export_noticia', noticia_id=d.noticia_id) }}" class="btn btn-small"
                title="Exportar PDF" target="_blank">
                <i class="fas fa-file-pdf"></i>
            </a>
            <button class="btn btn-small" onclick="toggleReadingMode()" title="Modo lectura">
                <i class="fas fa-book-reader"></i>
            </button>
            {% if d.url %}
            <a href="{{ d.url }}" target="_blank" class="btn btn-small">Ver fuente</a>
            {% endif %}
        </div>
    </div>

    <div class="feed-body">
        <div class="noticia-meta">
            {% if d.fecha %}
            <i class="far fa-calendar-alt"></i>
            {% if d.fecha is string %}
            {{ d.fecha }}
            {% else %}
            {{ d.fecha.strftime('%d-%m-%Y %H:%M') }}
            {% endif %}
            {% endif %}

            {% if d.fuente_nombre %} | <i class="fas fa-newspaper"></i> {{ d.fuente_nombre }}{% endif %}
            {% if d.categoria %} | <i class="fas fa-tag"></i> {{ d.categoria }}{% endif %}
            {% if d.pais %} | <i class="fas fa-globe"></i> {{ d.pais }}{% endif %}
        </div>

        {% if d.imagen_url %}
        <div style="text-align:center;margin-bottom:16px;">
            <img src="{{ d.imagen_url }}" alt="" loading="lazy" onerror="this.style.display='none';"
                style="max-width: 100%; height: auto; border-radius: 8px;">
        </div>
        {% endif %}

        {% if d.resumen_trad %}
        <h3>Resumen (traducido)</h3>
        <div>{{ d.resumen_trad|safe_html }}</div>
        <hr>
        {% endif %}

        {% if d.resumen_orig %}
        <h3>Resumen (original)</h3>
        <div>{{ d.resumen_orig|safe_html }}</div>
        {% endif %}

        {% if tags %}
        <div style="margin-top:12px;">
            {% for t in tags %}
            <span class="badge" title="{{ t.tipo }}">{{ t.valor }}</span>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Share Buttons -->
        <div class="share-section">
            <span class="share-label">Compartir:</span>
            <div class="share-buttons">
                <a href="https://twitter.com/intent/tweet?text={{ (d.titulo_trad or d.titulo_orig)|urlencode }}&url={{ request.url|urlencode }}"
                    target="_blank" class="share-btn share-twitter" title="Twitter">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://wa.me/?text={{ (d.titulo_trad or d.titulo_orig)|urlencode }}%20{{ request.url|urlencode }}"
                    target="_blank" class="share-btn share-whatsapp" title="WhatsApp">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <a href="https://t.me/share/url?url={{ request.url|urlencode }}&text={{ (d.titulo_trad or d.titulo_orig)|urlencode }}"
                    target="_blank" class="share-btn share-telegram" title="Telegram">
                    <i class="fab fa-telegram"></i>
                </a>
                <button class="share-btn share-copy" onclick="copyLink()" title="Copiar enlace">
                    <i class="fas fa-link"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .share-section {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color, #eee);
    }

    .share-label {
        font-size: 0.85rem;
        color: var(--text-muted, #666);
        font-weight: 500;
    }

    .share-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        font-size: 1rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .share-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .share-twitter {
        background: #1DA1F2;
    }

    .share-whatsapp {
        background: #25D366;
    }

    .share-telegram {
        background: #0088cc;
    }

    .share-copy {
        background: #111;
    }

    .dark-mode .share-copy {
        background: #fff;
        color: #111;
    }

    /* Reading Mode Styles */
    .header-actions {
        display: flex;
        gap: 0.5rem;
    }

    body.reading-mode header,
    body.reading-mode .main-nav,
    body.reading-mode .share-section,
    body.reading-mode .card:not(#main-article),
    body.reading-mode .noticia-meta,
    body.reading-mode .header-actions .btn:not([onclick*="Reading"]) {
        display: none !important;
    }

    body.reading-mode {
        background: #faf9f5;
    }

    body.reading-mode #main-article {
        max-width: 700px;
        margin: 2rem auto;
        padding: 3rem;
        font-size: 1.15rem;
        line-height: 1.9;
        box-shadow: none;
        border: none;
    }

    body.reading-mode #main-article h2 {
        font-size: 2.2rem;
        line-height: 1.3;
        margin-bottom: 1.5rem;
        font-family: 'Playfair Display', Georgia, serif;
    }

    body.reading-mode #main-article img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    body.reading-mode.dark-mode {
        background: #111;
    }

    body.reading-mode.dark-mode #main-article {
        background: #1a1a1a;
        color: #e0e0e0;
    }

    /* Exit reading mode button */
    .exit-reading-btn {
        position: fixed;
        top: 1rem;
        right: 1rem;
        background: #111;
        color: #fff;
        border: none;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.85rem;
        z-index: 1000;
        display: none;
    }

    body.reading-mode .exit-reading-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
</style>

<button class="exit-reading-btn" onclick="toggleReadingMode()">
    <i class="fas fa-times"></i> Salir
</button>

<script>
    function copyLink() {
        navigator.clipboard.writeText(window.location.href).then(() => {
            const btn = document.querySelector('.share-copy');
            const icon = btn.querySelector('i');
            icon.className = 'fas fa-check';
            setTimeout(() => { icon.className = 'fas fa-link'; }, 2000);
        });
    }

    function toggleReadingMode() {
        document.body.classList.toggle('reading-mode');
        // Scroll to top in reading mode
        if (document.body.classList.contains('reading-mode')) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    // ESC key to exit reading mode
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && document.body.classList.contains('reading-mode')) {
            toggleReadingMode();
        }
    });
</script>

{% if relacionadas %}
<div class="card" style="margin-top:16px;">
    <div class="card-header">
        <h3>Noticias relacionadas</h3>
    </div>

    <ul class="noticias-list">
        {% for r in relacionadas %}
        <li class="noticia-item">

            {% if r.imagen_url %}
            <div class="noticia-imagen"
                style="width: 120px; height: 80px; flex-shrink: 0; overflow: hidden; border-radius: 4px;">
                <img src="{{ r.imagen_url }}" loading="lazy" onerror="this.parentElement.style.display='none'"
                    style="width: 100%; height: 100%; object-fit: cover;">
            </div>
            {% endif %}

            <div class="noticia-texto">
                <h3 class="m0">
                    <a href="{{ url_for('noticia.noticia', tr_id=r.related_tr_id) if r.related_tr_id else r.url }}" {%
                        if not r.related_tr_id %}target="_blank" {% endif %}>
                        {{ r.titulo_trad or r.titulo }}
                    </a>
                </h3>

                <div class="noticia-meta">
                    {% if r.fecha %}
                    <i class="far fa-calendar-alt"></i>
                    {% if r.fecha is string %}
                    {{ r.fecha }}
                    {% else %}
                    {{ r.fecha.strftime('%d-%m-%Y %H:%M') }}
                    {% endif %}
                    {% endif %}
                    {% if r.fuente_nombre %} | {{ r.fuente_nombre }}{% endif %}
                    {% if r.score is defined %} | score {{ "%.3f"|format(r.score) }}{% endif %}
                </div>
            </div>

        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% endif %}
{% endblock %}