{% extends "base.html" %}
{% load static %}
{% block title %}
    System Statistics Dashboard
{% endblock title %}
{% block description %}
    View real-time system statistics in a comprehensive dashboard. Track key metrics, trends, and historical data to monitor your system's performance effectively.
{% endblock description %}
{% block keywords %}
    System Statistics Dashboard, Real-Time Metrics, System Performance, Track Trends, Historical Data, Key Metrics
{% endblock keywords %}
{% block og_title %}
    System Statistics Dashboard - Monitor Performance
{% endblock og_title %}
{% block og_description %}
    Access a detailed system statistics dashboard. Track real-time metrics, view trends, and analyze historical data to ensure optimal system performance.
{% endblock og_description %}
{% load humanize %}
{% block style %}
    <!-- No custom styles needed as Tailwind handles everything -->
{% endblock style %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-3xl font-bold">Statistics</h2>
            <div class="flex gap-4">
                <a href="?period=7"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    7 Days
                </a>
                <a href="?period=30"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    30 Days
                </a>
                <a href="?period=90"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    90 Days
                </a>
                <a href="?period=ytd"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    YTD
                </a>
            </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            {% for stat in stats %}
                <div class="relative overflow-hidden rounded-[12px] p-5 bg-gradient-to-br from-[#e74c3c] to-[#c0392b] text-white shadow-md transition-shadow hover:shadow-lg">
                    <i class="{{ stat.icon }} absolute top-4 right-4 text-[4rem] opacity-15"></i>
                    <div class="relative z-10">
                        <div class="text-[1.25rem] font-semibold mb-1">{{ stat.label }}</div>
                        <div class="flex items-center text-[2.5rem] font-bold">
                            {{ stat.count|intcomma }}
                            {% if stat.trend > 0 %}
                                <span class="ml-2 flex items-center text-green-300">
                                    <i class="fas fa-arrow-up mr-1"></i> {{ stat.trend }}
                                </span>
                            {% elif stat.trend < 0 %}
                                <span class="ml-2 flex items-center text-red-300">
                                    <i class="fas fa-arrow-down mr-1"></i> {{ stat.trend }}
                                </span>
                            {% endif %}
                        </div>
                        <div class="text-[1rem] opacity-80 mt-1">Total: {{ stat.total_count|intcomma }}</div>
                        {% if stat.history and stat.dates %}
                            <div class="relative h-[60px] mt-5">
                                <canvas id="chart-{{ forloop.counter }}"
                                        class="sparkline"
                                        data-values='{{ stat.history|safe }}'
                                        data-dates='{{ stat.dates|safe }}'>
                                </canvas>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% block extra_js %}
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
        // Store chart instances globally
        window.chartInstances = window.chartInstances || {};

        function destroyCharts() {
            // Destroy all existing chart instances
            Object.values(window.chartInstances).forEach(chart => {
                if (chart) {
                    chart.destroy();
                }
            });
            window.chartInstances = {};
        }

        function initializeCharts() {
            // First destroy any existing charts
            destroyCharts();

            // Initialize new charts
            document.querySelectorAll('.sparkline').forEach(function(canvas) {
                const values = JSON.parse(canvas.dataset.values);
                const dates = JSON.parse(canvas.dataset.dates);
                const ctx = canvas.getContext('2d');

                // Create new chart instance and store it
                window.chartInstances[canvas.id] = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: dates,
                        datasets: [{
                            data: values,
                            borderColor: 'rgba(231, 76, 60, 0.7)',
                            borderWidth: 2,
                            fill: true,
                            backgroundColor: 'rgba(231, 76, 60, 0.1)',
                            pointRadius: 0,
                            tension: 0.4,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                enabled: true,
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                titleColor: '#fff',
                                bodyColor: '#fff',
                                callbacks: {
                                    title: function(tooltipItems) {
                                        return tooltipItems[0].label;
                                    },
                                    label: function(context) {
                                        return 'Count: ' + context.raw;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: { 
                                display: false,
                                grid: {
                                    display: false
                                }
                            },
                            y: { 
                                display: false,
                                beginAtZero: true,
                                grid: {
                                    display: false
                                }
                            }
                        },
                        interaction: {
                            intersect: false,
                            mode: 'index'
                        }
                    }
                });
            });
        }

        // Initialize charts when DOM is loaded
        document.addEventListener('DOMContentLoaded', initializeCharts);

        // Clean up charts when navigating away
        window.addEventListener('beforeunload', destroyCharts);
        </script>
    {% endblock extra_js %}
{% endblock content %}