{% extends "base.html" %}

{% block title %}Parrillas de Videos{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>🎬 Parrillas de Videos Automatizados</h1>
        <p>Genera videos automáticos de noticias filtradas por país, categoría o entidad</p>
        <a href="{{ url_for('parrillas.nueva') }}" class="btn btn-primary">➕ Nueva Parrill</a>
    </div>

    {% if parrillas %}
    <div class="parrillas-grid">
        {% for p in parrillas %}
        <div class="parrilla-card">
            <div class="card-header">
                <h3>{{ p.nombre }}</h3>
                <span class="badge {% if p.activo %}badge-success{% else %}badge-secondary{% endif %}">
                    {% if p.activo %}Activa{% else %}Inactiva{% endif %}
                </span>
            </div>

            <div class="card-body">
                <p class="description">{{ p.descripcion or 'Sin descripción' }}</p>

                <div class="metadatos">
                    <div class="meta-item">
                        <strong>Tipo:</strong> {{ p.tipo_filtro }}
                    </div>
                    {% if p.pais_nombre %}
                    <div class="meta-item">
                        <strong>País:</strong> {{ p.pais_nombre }}
                    </div>
                    {% endif %}
                    {% if p.categoria_nombre %}
                    <div class="meta-item">
                        <strong>Categoría:</strong> {{ p.categoria_nombre }}
                    </div>
                    {% endif %}
                    {% if p.entidad_nombre %}
                    <div class="meta-item">
                        <strong>Entidad:</strong> {{ p.entidad_nombre }} ({{ p.entidad_tipo }})
                    </div>
                    {% endif %}
                    <div class="meta-item">
                        <strong>Videos generados:</strong> {{ p.total_videos }}
                    </div>
                    <div class="meta-item">
                        <strong>Frecuencia:</strong> {{ p.frecuencia }}
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <a href="{{ url_for('parrillas.ver', id=p.id) }}" class="btn btn-secondary">Ver Detalles</a>
                <button onclick="toggleParrilla({{ p.id }})" class="btn btn-warning">
                    {% if p.activo %}Desactivar{% else %}Activar{% endif %}
                </button>
                <button onclick="generarVideo({{ p.id }})" class="btn btn-success">Generar Video</button>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>No hay parrillas configuradas.</p>
        <a href="{{ url_for('parrillas.nueva') }}" class="btn btn-primary">Crear tu primera parrilla</a>
    </div>
    {% endif %}
</div>

<style>
    .parrillas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }

    .parrilla-card {
        background: var(--paper-color);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.2s;
    }

    .parrilla-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .card-header {
        background: var(--accent-color);
        color: white;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3 {
        margin: 0;
        font-size: 1.2em;
    }

    .badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85em;
        font-weight: bold;
    }

    .badge-success {
        background: #28a745;
    }

    .badge-secondary {
        background: #6c757d;
    }

    .card-body {
        padding: 20px;
    }

    .description {
        color: var(--text-secondary);
        margin-bottom: 15px;
        font-style: italic;
    }

    .metadatos {
        display: grid;
        gap: 8px;
    }

    .meta-item {
        font-size: 0.9em;
        padding: 6px;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 4px;
    }

    .card-footer {
        padding: 15px 20px;
        border-top: 1px solid var(--border-color);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }

    .btn-primary {
        background: var(--accent-color);
        color: white;
    }

    .btn-secondary {
        background: #6c757d;
        color: white;
    }

    .btn-warning {
        background: #ffc107;
        color: black;
    }

    .btn-success {
        background: #28a745;
        color: white;
    }

    .btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .page-header h1 {
        margin: 0;
    }

    .page-header p {
        color: var(--text-secondary);
        margin: 5px 0;
    }
</style>

<script>
    async function toggleParrilla(id) {
        try {
            const res = await fetch(`/parrillas/api/${id}/toggle`, { method: 'POST' });
            const data = await res.json();
            if (data.success) {
                location.reload();
            } else {
                alert('Error al cambiar estado');
            }
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }

    async function generarVideo(id) {
        if (!confirm('¿Generar nuevo video para esta parrilla?')) return;

        try {
            const res = await fetch(`/parrillas/api/${id}/generar`, { method: 'POST' });
            const data = await res.json();
            if (data.success) {
                alert('Video en cola para generación!');
            } else {
                alert('Error: ' + (data.error || 'Unknown error'));
            }
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }
</script>
{% endblock %}