{% extends "base.html" %}

{% block title %}Estadísticas de Actividad{% endblock %}

{% block content %}
<div class="stats-header">
    <h1><i class="fas fa-chart-line"></i> Estadísticas</h1>
    <p>Actividad de noticias y distribución por categorías</p>
</div>

<!-- Live Stats Banner (Moved from Config) -->
<div class="stats-banner">
    <div class="stat-item">
        <div class="stat-value">{{ translations_per_min }}</div>
        <div class="stat-label">trad/min</div>
    </div>
    <div class="stat-divider"></div>
    <div class="stat-item">
        <div class="stat-value {% if pending_count > 100 %}stat-warning{% endif %}">{{ pending_count }}</div>
        <div class="stat-label">pendientes</div>
    </div>
    <div class="stat-divider"></div>
    <div class="stat-item">
        <div class="stat-value stat-processing">{{ processing_count }}</div>
        <div class="stat-label">procesando</div>
    </div>
    <div class="stat-divider"></div>
    <div class="stat-item">
        <div class="stat-value">{{ traducciones_count }}</div>
        <div class="stat-label">completadas</div>
    </div>
    {% if error_count > 0 %}
    <div class="stat-divider"></div>
    <div class="stat-item">
        <div class="stat-value stat-error">{{ error_count }}</div>
        <div class="stat-label">errores</div>
    </div>
    {% endif %}
</div>



<!-- Big Stats Section (Moved from Config) -->
<div class="big-stats">
    <div class="big-stat">
        <div class="big-number">{{ noticias_count|default(0) }}</div>
        <div class="big-label">Noticias</div>
    </div>
    <div class="big-stat">
        <div class="big-number">{{ traducciones_count|default(0) }}</div>
        <div class="big-label">Traducidas</div>
    </div>
    <div class="big-stat highlight">
        {% set percent = ((traducciones_count / noticias_count * 100) if noticias_count > 0 else 0)|round(1) %}
        <div class="big-number">{{ percent }}%</div>
        <div class="big-label">Completado</div>
    </div>
    <div class="big-stat">
        <div class="big-number">{{ noticias_hoy|default(0) }}</div>
        <div class="big-label">Noticias Hoy</div>
    </div>
    <div class="big-stat">
        <div class="big-number">{{ noticias_ultima_hora|default(0) }}</div>
        <div class="big-label">Última Hora</div>
    </div>
</div>

<div class="stats-grid">
    <div class="card stats-card full-width">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
            <h3 style="margin:0;">Actividad</h3>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateActivityChart('1h', this)">1h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateActivityChart('8h', this)">8h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateActivityChart('24h', this)">24h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateActivityChart('7d', this)">7d</button>
                <button type="button" class="btn btn-outline-primary btn-sm active"
                    onclick="updateActivityChart('30d', this)">30d</button>
            </div>
        </div>
        <div class="chart-container">
            <canvas id="activityChart"></canvas>
        </div>
    </div>

    <div class="card stats-card">
        <h3>Noticias por Categoría</h3>
        <div class="chart-container">
            <canvas id="categoryChart"></canvas>
        </div>
    </div>

    <div class="card stats-card">
        <h3>Noticias por País</h3>
        <div class="chart-container">
            <canvas id="countryChart"></canvas>
        </div>
    </div>

    <!-- Translations Section -->
    <div class="card stats-card full-width">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
            <h3 style="margin:0;">Ritmo de Traducción (TPM)</h3>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary btn-sm active"
                    onclick="updateRateChart('1h', this)">1h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateRateChart('8h', this)">8h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateRateChart('24h', this)">24h</button>
                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="updateRateChart('7d', this)">7d</button>
            </div>
        </div>
        <div class="chart-container">
            <canvas id="rateChart"></canvas>
        </div>
    </div>

    <div class="card stats-card">
        <h3>Traducciones Diarias</h3>
        <div class="chart-container">
            <canvas id="translationActivityChart"></canvas>
        </div>
    </div>

    <div class="card stats-card">
        <h3>Idiomas de Origen</h3>
        <div class="chart-container">
            <canvas id="langChart"></canvas>
        </div>
    </div>

    <div class="card stats-card">
        <h3>Información del Sistema</h3>
        <ul class="system-stats" id="system-info-list">
            <li><strong>CPU:</strong> <span id="cpu-load">Cargando...</span></li>
            <li><strong>Núcleos:</strong> <span id="cpu-cores">-</span></li>
            <li><strong>GPU:</strong> <span id="gpu-name">-</span></li>
            <li><strong>GPU Temp:</strong> <span id="gpu-temp">-</span></li>
            <li><strong>GPU Util:</strong> <span id="gpu-util">-</span></li>
            <li><strong>GPU Mem:</strong> <span id="gpu-mem">-</span></li>
            <li><strong>Uptime:</strong> <span id="system-uptime">-</span></li>
            <li class="last-update">Actualizado: <span id="last-update-time">-</span></li>
        </ul>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Activity Chart
        let activityChart = null;

        window.updateActivityChart = function (range, btn) {
            // Update active button state
            if (btn) {
                // Find buttons specifically for this chart
                const parent = btn.closest('.btn-group');
                if (parent) {
                    parent.querySelectorAll('button').forEach(b => b.classList.remove('active'));
                }
                btn.classList.add('active');
            }

            fetch(`/stats/api/activity?range=${range}`)
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('activityChart').getContext('2d');

                    if (activityChart) {
                        activityChart.destroy();
                    }

                    // Dynamic title
                    let titleText = "Noticias Recientes";
                    if (range === '1h') titleText = "Última Hora";
                    if (range === '8h') titleText = "Últimas 8 Horas";
                    if (range === '24h') titleText = "Últimas 24 Horas";
                    if (range === '7d') titleText = "Últimos 7 Días";
                    if (range === '30d') titleText = "Últimos 30 Días";

                    // Create gradient
                    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
                    gradient.addColorStop(0, 'rgba(52, 152, 219, 0.5)'); // Start color
                    gradient.addColorStop(1, 'rgba(52, 152, 219, 0.0)'); // End color

                    activityChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: data.labels,
                            datasets: [{
                                label: 'Noticias Ingestadas',
                                data: data.data,
                                borderColor: '#3498db',
                                backgroundColor: gradient,
                                borderWidth: 3,
                                tension: 0.4, // Smooth curves
                                fill: true,
                                pointRadius: 0,
                                pointHoverRadius: 6,
                                pointHitRadius: 10
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            plugins: {
                                legend: { display: false },
                                title: {
                                    display: true,
                                    text: titleText,
                                    font: { size: 16, weight: 'normal' },
                                    padding: { bottom: 20 }
                                },
                                tooltip: {
                                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                    titleColor: '#2c3e50',
                                    bodyColor: '#2c3e50',
                                    borderColor: '#e0e0e0',
                                    borderWidth: 1,
                                    padding: 10,
                                    displayColors: false
                                }
                            },
                            scales: {
                                x: {
                                    grid: { display: false }
                                },
                                y: {
                                    beginAtZero: true,
                                    border: { display: false },
                                    grid: {
                                        borderDash: [5, 5],
                                        color: '#f0f0f0'
                                    },
                                    title: {
                                        display: true,
                                        text: 'Miles de noticias'
                                    }
                                }
                            }
                        }
                    });
                });
        };

        // Initial load (30d)
        updateActivityChart('30d');

        // Category Chart
        fetch('/stats/api/categories')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('categoryChart').getContext('2d');
                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.data,
                            backgroundColor: [
                                '#4facfe', '#00f2fe', '#43e97b', '#38f9d7', '#fa709a',
                                '#fee140', '#667eea', '#764ba2', '#ff9a9e', '#a18cd1'
                            ],
                            borderWidth: 0,
                            hoverOffset: 10
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '75%', // Thinner ring
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    usePointStyle: true,
                                    padding: 20,
                                    font: { size: 12 }
                                }
                            }
                        }
                    }
                });
            });

        // Country Chart
        fetch('/stats/api/countries')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('countryChart').getContext('2d');

                // Gradient for bars
                const gradient = ctx.createLinearGradient(0, 0, 0, 400);
                gradient.addColorStop(0, '#1abc9c');
                gradient.addColorStop(1, '#16a085');

                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Noticias',
                            data: data.data,
                            backgroundColor: gradient,
                            borderRadius: 4, // Rounded bars
                            borderSkipped: false,
                            barPercentage: 0.6,
                            categoryPercentage: 0.8
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#2c3e50',
                                bodyColor: '#2c3e50',
                                borderColor: '#e0e0e0',
                                borderWidth: 1,
                                displayColors: false
                            }
                        },
                        scales: {
                            x: {
                                grid: { display: false }
                            },
                            y: {
                                beginAtZero: true,
                                border: { display: false },
                                grid: {
                                    borderDash: [5, 5],
                                    color: '#f0f0f0'
                                }
                            }
                        }
                    }
                });
            });

        // --- NEW TRANSLATION CHARTS ---

        // Translation Rate (TPM)
        let rateChart = null;

        window.updateRateChart = function (range, btn) {
            // Update active button state
            if (btn) {
                document.querySelectorAll('.btn-group button').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
            }

            fetch(`/stats/api/translations/rate?range=${range}`)
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('rateChart').getContext('2d');

                    if (rateChart) {
                        rateChart.destroy();
                    }

                    // Gradient for rate chart
                    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
                    gradient.addColorStop(0, 'rgba(230, 126, 34, 0.5)');
                    gradient.addColorStop(1, 'rgba(230, 126, 34, 0.0)');

                    rateChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: data.labels,
                            datasets: [{
                                label: 'Traducciones',
                                data: data.data,
                                borderColor: '#e67e22',
                                backgroundColor: gradient,
                                borderWidth: 3,
                                tension: 0.4,
                                fill: true,
                                pointRadius: 0,
                                pointHoverRadius: 6,
                                pointHitRadius: 10
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            plugins: {
                                legend: { display: false },
                                title: {
                                    display: true,
                                    text: `Traducciones - Última(s) ${range}`,
                                    font: { size: 16, weight: 'normal' },
                                    padding: { bottom: 20 }
                                },
                                tooltip: {
                                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                    titleColor: '#2c3e50',
                                    bodyColor: '#2c3e50',
                                    borderColor: '#e0e0e0',
                                    borderWidth: 1,
                                    padding: 10,
                                    displayColors: false
                                }
                            },
                            scales: {
                                x: { grid: { display: false } },
                                y: {
                                    beginAtZero: true,
                                    border: { display: false },
                                    grid: {
                                        borderDash: [5, 5],
                                        color: '#f0f0f0'
                                    }
                                }
                            }
                        }
                    });
                });
        };

        // Initial load (1h)
        updateRateChart('1h');

        // Translation Activity
        fetch('/stats/api/translations/activity')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('translationActivityChart').getContext('2d');

                // Gradient
                const gradient = ctx.createLinearGradient(0, 0, 0, 400);
                gradient.addColorStop(0, '#9b59b6');
                gradient.addColorStop(1, '#8e44ad');

                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Traducciones Diarias',
                            data: data.data,
                            backgroundColor: gradient,
                            borderRadius: 4,
                            barPercentage: 0.6,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#2c3e50',
                                bodyColor: '#2c3e50',
                                borderColor: '#e0e0e0',
                                borderWidth: 1,
                                displayColors: false
                            }
                        },
                        scales: {
                            x: { grid: { display: false } },
                            y: {
                                beginAtZero: true,
                                border: { display: false },
                                grid: {
                                    borderDash: [5, 5],
                                    color: '#f0f0f0'
                                }
                            }
                        }
                    }
                });
            });

        // Translation Languages
        fetch('/stats/api/translations/languages')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('langChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.data,
                            backgroundColor: [
                                '#34495e', '#16a085', '#27ae60', '#2980b9', '#8e44ad',
                                '#2c3e50', '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1'
                            ],
                            borderWidth: 0,
                            hoverOffset: 10
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    usePointStyle: true,
                                    padding: 20,
                                    font: { size: 12 }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Idioma de Origen (Top 10)',
                                padding: { bottom: 10 }
                            }
                        }
                    }
                });
            });

        // System Info Polling
        function updateSystemInfo() {
            fetch('/stats/api/system/info')
                .then(res => res.json())
                .then(data => {
                    document.getElementById('cpu-load').textContent = data.cpu ? data.cpu.load : 'N/A';
                    document.getElementById('cpu-cores').textContent = data.cpu ? data.cpu.cores : '-';
                    document.getElementById('system-uptime').textContent = data.uptime;
                    document.getElementById('last-update-time').textContent = data.timestamp;

                    if (data.gpu) {
                        document.getElementById('gpu-name').textContent = data.gpu.name;
                        document.getElementById('gpu-temp').textContent = data.gpu.temp;
                        document.getElementById('gpu-util').textContent = data.gpu.util;
                        document.getElementById('gpu-mem').textContent = data.gpu.mem;
                    } else {
                        document.getElementById('gpu-name').textContent = 'No detectada';
                    }
                })
                .catch(err => console.error("Error polling system info", err));
        }

        updateSystemInfo();
        setInterval(updateSystemInfo, 40000);
    });
</script>

<style>
    .stats-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
    }

    .full-width {
        grid-column: 1 / -1;
    }

    .stats-card {
        padding: 20px;
        min-height: 300px;
        display: flex;
        flex-direction: column;
    }

    .chart-container {
        flex: 1;
        position: relative;
        min-height: 250px;
    }

    .system-stats {
        list-style: none;
        padding: 0;
    }

    .system-stats li {
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .system-stats li:last-child {
        border-bottom: none;
    }

    /* Stats Banner Styles */
    .stats-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 1rem 1.5rem;
        background: #111;
        border-radius: 8px;
        margin-bottom: 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .stat-item {
        text-align: center;
    }

    .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        line-height: 1;
    }

    .stat-value.stat-warning {
        color: #ffc107;
    }

    .stat-value.stat-processing {
        color: #17a2b8;
    }

    .stat-value.stat-error {
        color: #dc3545;
    }

    .stat-label {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.25rem;
    }

    .stat-divider {
        width: 1px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
    }

    .last-update {
        font-size: 0.75rem;
        color: #888;
        font-style: italic;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px dashed var(--border-color);
    }

    .dark-mode .stats-banner {
        background: #000;
        border: 1px solid #333;
    }

    @media (max-width: 600px) {
        .stats-banner {
            flex-wrap: wrap;
            gap: 1rem;
        }

        .stat-divider {
            display: none;
        }

        .stat-item {
            flex: 0 0 45%;
        }
    }

    /* Big Stats */
    .big-stats {
        display: flex;
        gap: 2rem;
        margin: 1rem 0 2rem 0;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color, #eee);
        border-bottom: 1px solid var(--border-color, #eee);
    }

    .big-stat {
        text-align: center;
        flex: 1;
    }

    .big-stat .big-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: #111;
        font-family: 'Poppins', sans-serif;
        line-height: 1;
    }

    .big-stat .big-label {
        font-size: 0.75rem;
        color: var(--text-muted, #666);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.35rem;
    }

    .big-stat.highlight .big-number {
        color: #28a745;
    }

    .dark-mode .big-stat .big-number {
        color: #fff;
    }

    @media (max-width: 600px) {
        .big-stats {
            flex-direction: column;
            gap: 1rem;
        }
    }
</style>
{% endblock %}
```