{% extends "base.html" %}

{% block title %}Monitor de Impacto Global{% endblock %}

{% block content %}
<header>
    <h1><i class="fas fa-globe"></i> Monitor de Impacto Global</h1>
    <p class="subtitle">Análisis de relevancia por país en los últimos {{ days }} días.</p>
</header>

<div class="filters">
    <a href="{{ url_for('topics.monitor', days=1) }}" class="btn {% if days==1 %}btn-active{% endif %}">24h</a>
    <a href="{{ url_for('topics.monitor', days=3) }}" class="btn {% if days==3 %}btn-active{% endif %}">3 Días</a>
    <a href="{{ url_for('topics.monitor', days=7) }}" class="btn {% if days==7 %}btn-active{% endif %}">Semana</a>
</div>

<div class="monitor-grid">
    {% for c in countries %}
    <div class="card country-card">
        <div class="country-header">
            <span class="flag-icon">{{ c.nombre[:2] }}</span> <!-- Placeholder for flag -->
            <h2><a href="{{ url_for('topics.country_detail', pais_id=c.id, days=days) }}">{{ c.nombre }}</a></h2>
        </div>
        <div class="country-stats">
            <div class="stat">
                <span class="value">{{ c.total_impact }}</span>
                <span class="label">Puntos de Impacto</span>
            </div>
            <div class="stat">
                <span class="value">{{ c.news_count }}</span>
                <span class="label">Noticias Relevantes</span>
            </div>
        </div>
        <div class="heat-bar">
            <!-- Simple visual bar based on impact (max approx 1000 for scaling) -->
            <div class="bar-fill" style="width: {{ (c.total_impact / 1000) * 100 }}%; max-width: 100%;"></div>
        </div>
    </div>
    {% else %}
    <p>No hay datos de impacto suficientes aún. El sistema está analizando noticias...</p>
    {% endfor %}
</div>

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

    .country-card {
        padding: 20px;
        border-left: 5px solid #3498db;
        transition: transform 0.2s;
    }

    .country-card:hover {
        transform: translateY(-5px);
    }

    .country-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }

    .country-header a {
        text-decoration: none;
        color: inherit;
    }

    .country-stats {
        display: flex;
        justify-content: space-between;
        margin: 15px 0;
    }

    .stat {
        text-align: center;
    }

    .stat .value {
        display: block;
        font-size: 1.2rem;
        font-weight: bold;
        color: #2c3e50;
    }

    .stat .label {
        font-size: 0.8rem;
        color: #7f8c8d;
    }

    .heat-bar {
        height: 6px;
        background: #ecf0f1;
        border-radius: 3px;
        overflow: hidden;
    }

    .bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #e74c3c);
    }

    .btn-active {
        background-color: #2c3e50;
        color: white;
    }
</style>
{% endblock %}