{% extends "base.html" %}

{% block title %}{{ parrilla.nombre }}{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <div class="header-content">
            <h1>🎬 {{ parrilla.nombre }}</h1>
            <span class="badge {% if parrilla.activo %}badge-success{% else %}badge-secondary{% endif %}">
                {% if parrilla.activo %}Activa{% else %}Inactiva{% endif %}
            </span>
        </div>
        <div class="header-actions">
            <button onclick="generarVideo({{ parrilla.id }})" class="btn btn-primary">▶ Generar Video Ahora</button>
            <a href="{{ url_for('parrillas.index') }}" class="btn btn-secondary">Volver</a>
        </div>
    </div>

    <div class="grid-layout">
        <!-- Sidebar Info -->
        <div class="sidebar">
            <div class="info-card">
                <h3>Configuración</h3>
                <p class="desc">{{ parrilla.descripcion }}</p>

                <ul class="info-list">
                    <li><strong>Tipo:</strong> {{ parrilla.tipo_filtro }}</li>
                    {% if parrilla.pais_nombre %}
                    <li><strong>País:</strong> {{ parrilla.pais_nombre }}</li>
                    {% endif %}
                    {% if parrilla.categoria_nombre %}
                    <li><strong>Categoría:</strong> {{ parrilla.categoria_nombre }}</li>
                    {% endif %}
                    <li><strong>Máx. Noticias:</strong> {{ parrilla.max_noticias }}</li>
                    <li><strong>Frecuencia:</strong> {{ parrilla.frecuencia }}</li>
                    <li><strong>Idioma:</strong> {{ parrilla.idioma_voz }}</li>
                    <li><strong>Subtítulos:</strong> {% if parrilla.include_subtitles %}Sí{% else %}No{% endif %}</li>
                    <li><strong>Última Gen:</strong> {{ parrilla.ultima_generacion or 'Nunca' }}</li>
                </ul>
            </div>

            <div class="preview-card">
                <h3>📰 Preview Contenido</h3>
                <div id="preview-list">Cargando noticias...</div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <h2>Videos Generados</h2>

            {% if videos %}
            <div class="videos-list">
                {% for video in videos %}
                <div class="video-item status-{{ video.status }}">
                    <div class="video-info">
                        <h4>{{ video.titulo }}</h4>
                        <span class="date">{{ video.fecha_generacion }}</span>
                        <span class="status-badge {{ video.status }}">{{ video.status }}</span>
                        {% if video.error_message %}
                        <p class="error-msg">{{ video.error_message }}</p>
                        {% endif %}
                    </div>
                    <div class="video-actions">
                        {% if video.status == 'completed' %}
                        <audio controls style="height: 30px; margin-right: 10px;">
                            <source src="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
                                type="audio/wav">
                            Tu navegador no soporta audio.
                        </audio>
                        <a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='script.txt') }}"
                            target="_blank" class="btn btn-sm btn-outline">📝 Ver Script</a>
                        <a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
                            download class="btn btn-sm btn-outline">📥 Bajar Audio</a>
                        {% endif %}
                        <button onclick="verLog({{ video.id }})" class="btn btn-sm btn-outline">📜 Ver Log</button>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p>No se han generado videos todavía.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Log Modal -->
<div id="logModal" class="modal"
    style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
    <div class="modal-content"
        style="background:var(--paper-color); margin:10% auto; padding:20px; width:80%; max-width:800px; border-radius:10px; position:relative;">
        <span onclick="document.getElementById('logModal').style.display='none'"
            style="position:absolute; top:10px; right:15px; cursor:pointer; font-size:24px;">&times;</span>
        <h3>Log de Generación</h3>
        <pre id="logContent"
            style="background:#1e1e1e; color:#d4d4d4; padding:15px; border-radius:5px; overflow:auto; max-height:500px; font-family:monospace;"></pre>
    </div>
</div>

<style>
    .grid-layout {
        display: grid;
        grid-template-columns: 350px 1fr;
        gap: 30px;
        margin-top: 20px;
    }

    .info-card,
    .preview-card {
        background: var(--paper-color);
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .info-card h3,
    .preview-card h3 {
        margin-top: 0;
        border-bottom: 2px solid var(--accent-color);
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .info-list {
        list-style: none;
        padding: 0;
    }

    .info-list li {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .videos-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .video-item {
        background: var(--paper-color);
        padding: 15px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid transparent;
    }

    .video-item.status-completed {
        border-left-color: #28a745;
    }

    .video-item.status-error {
        border-left-color: #dc3545;
    }

    .video-item.status-processing {
        border-left-color: #ffc107;
    }

    .status-badge {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        text-transform: uppercase;
        font-weight: bold;
    }

    .status-badge.completed {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.error {
        background: #f8d7da;
        color: #721c24;
    }

    .status-badge.processing {
        background: #fff3cd;
        color: #856404;
    }

    .preview-item {
        padding: 10px;
        background: rgba(0, 0, 0, 0.02);
        margin-bottom: 10px;
        border-radius: 6px;
        font-size: 0.9em;
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: 0.85em;
    }

    @media (max-width: 768px) {
        .grid-layout {
            grid-template-columns: 1fr;
        }
    }
</style>

<script>
    async function loadPreview() {
        try {
            const res = await fetch(`/parrillas/api/{{ parrilla.id }}/preview`);
            const data = await res.json();

            const container = document.getElementById('preview-list');
            if (data.noticias && data.noticias.length > 0) {
                container.innerHTML = data.noticias.map(n => `
                <div class="preview-item">
                    <strong>${n.titulo_trad || n.titulo}</strong><br>
                    <small>${n.fecha}</small>
                </div>
            `).join('');
            } else {
                container.innerHTML = '<p>No hay noticias recientes que coincidan con los filtros.</p>';
            }
        } catch (e) {
            console.error(e);
            document.getElementById('preview-list').innerHTML = 'Error cargando preview.';
        }
    }

    async function generarVideo(id) {
        if (!confirm('¿Generar nuevo video?')) return;
        try {
            const res = await fetch(`/parrillas/api/${id}/generar`, { method: 'POST' });
            const data = await res.json();
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        } catch (e) {
            alert('Error de conexión');
        }
    }

    async function verLog(id) {
        const modal = document.getElementById('logModal');
        const content = document.getElementById('logContent');
        content.textContent = "Cargando log...";
        modal.style.display = 'block';

        try {
            const res = await fetch(`/parrillas/files/${id}/generation.log`);
            if (res.ok) {
                const text = await res.text();
                content.textContent = text || "Log vacío.";
            } else {
                content.textContent = "No se pudo cargar el log. (Posiblemente el video es antiguo o falló antes de crear logs).";
            }
        } catch (e) {
            content.textContent = "Error de conexión al cargar log.";
        }
    }

    // Init
    loadPreview();
</script>
{% endblock %}
```