{% extends "admin/base.html" %}

{% block title %}API Usage Statistics{% endblock %}

{% block header_title %}Usage Statistics{% endblock %}

{% macro sortable_header(column_key, column_name, text_align_class='text-left') %}
    {% set next_order = 'asc' if sort_by == column_key and sort_order == 'desc' else 'desc' %}
    <th class="px-6 py-3 {{ text_align_class }} text-xs font-medium text-gray-400 uppercase tracking-wider">
        <a href="{{ url_for('admin_stats') }}?sort_by={{ column_key }}&sort_order={{ next_order }}" class="flex items-center gap-1 hover:text-[var(--color-primary-500)]">
            {{ column_name }}
            {% if sort_by == column_key %}
                {% if sort_order == 'asc' %}<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                {% else %}<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>{% endif %}
            {% else %}<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg>{% endif %}
        </a>
    </th>
{% endmacro %}

{% block content %}
<div class="space-y-8">
    <!-- Header / Global Actions -->
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-bold">System Analytics</h1>
        <div class="flex gap-4">
            <button onclick="window.location.href='/admin/dashboard?trigger_report=true'" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 rounded-md text-white font-bold text-sm shadow-lg transition-all">Generate AI Health Audit</button>
            <a href="{{ url_for('admin_stats_pdf') }}" class="px-6 py-2 bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] rounded-md text-white font-bold text-sm shadow-lg transition-all">Download PDF Report</a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="card-style p-5">
            <h3 class="text-[10px] font-bold uppercase text-gray-500">Total Tokens</h3>
            <div class="text-3xl font-black mt-2 text-[var(--color-primary-400)]">{{ "{:,}".format(total_tokens|default(0)) }}</div>
        </div>
        <div class="card-style p-5 border-l-4 border-green-500">
            <h3 class="text-[10px] font-bold uppercase text-green-500">Est. Carbon Footprint</h3>
            <div class="text-3xl font-black mt-2 text-green-400">{{ "{:,.2f}".format(total_carbon|default(0)) }} <span class="text-sm font-normal">gCO₂e</span></div>
        </div>
        <div class="card-style p-5">
            <h3 class="text-[10px] font-bold uppercase text-gray-500">Total Prompt</h3>
            <div class="text-3xl font-black mt-2 text-gray-300">{{ "{:,}".format(total_prompt_tokens|default(0)) }}</div>
        </div>
        <div class="card-style p-5">
            <h3 class="text-[10px] font-bold uppercase text-gray-500">Total Output</h3>
            <div class="text-3xl font-black mt-2 text-gray-300">{{ "{:,}".format(total_completion_tokens|default(0)) }}</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="space-y-8">
        <!-- Daily Requests -->
        <div class="card-style">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold">Requests per Day (Last 30 Days)</h2>
                <div class="flex gap-2">
                    <button onclick="exportChartToPNG('dailyUsageChart', 'daily-usage.png')" class="text-[10px] bg-white/10 px-3 py-1 rounded hover:bg-white/20 uppercase font-bold">PNG</button>
                    <button onclick="exportDataToCSV(['Date', 'Requests'], {{ daily_labels | tojson }}, {{ daily_data | tojson }}, 'daily-usage.csv')" class="text-[10px] bg-white/10 px-3 py-1 rounded hover:bg-white/20 uppercase font-bold">CSV</button>
                </div>
            </div>
            <div class="h-64">
                {% if is_pdf %}
                    {% if static_plots and static_plots.daily %}
                        <img src="data:image/png;base64,{{ static_plots.daily }}" style="width: 100%;">
                    {% endif %}
                {% else %}
                    {% if daily_data %}<canvas id="dailyUsageChart"></canvas>{% else %}<div class="flex items-center justify-center h-full text-gray-500 italic">No request data available.</div>{% endif %}
                {% endif %}
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Peak Hours -->
            <div class="card-style">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold">Peak Hours (UTC)</h2>
                    <div class="flex gap-2">
                        <button onclick="exportChartToPNG('hourlyUsageChart', 'hourly-usage.png')" class="text-[10px] bg-white/10 px-3 py-1 rounded hover:bg-white/20 uppercase font-bold">PNG</button>
                    </div>
                </div>
                <div class="h-64">
                    {% if hourly_data %}<canvas id="hourlyUsageChart"></canvas>{% else %}<div class="flex items-center justify-center h-full text-gray-500 italic">No usage data.</div>{% endif %}
                </div>
            </div>

            <!-- Model Usage -->
            <div class="card-style">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold">Model Usage (Requests)</h2>
                    {% if not is_pdf %}
                    <div class="flex gap-2">
                        <button onclick="exportChartToPNG('modelUsageChart', 'model-usage.png')" class="text-[10px] bg-white/10 px-3 py-1 rounded hover:bg-white/20 uppercase font-bold">PNG</button>
                    </div>
                    {% endif %}
                </div>
                <div class="h-64">
                    {% if is_pdf %}
                        {% if static_plots and static_plots.models %}
                            <img src="data:image/png;base64,{{ static_plots.models }}" style="width: 100%;">
                        {% endif %}
                    {% else %}
                        {% if model_data %}<canvas id="modelUsageChart"></canvas>{% else %}<div class="flex items-center justify-center h-full text-gray-500 italic">No usage data.</div>{% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="card-style">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold">Detailed Key Usage</h2>
            <button onclick="exportTableToCSV('keyUsageTable', 'key-usage.csv')" class="text-[10px] bg-white/10 px-3 py-1 rounded hover:bg-white/20 uppercase font-bold">Export CSV</button>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full" id="keyUsageTable">
                <thead>
                    <tr class="border-b border-white/10">
                        {{ sortable_header('username', 'Username') }}
                        {{ sortable_header('key_name', 'Key Name') }}
                        {{ sortable_header('key_prefix', 'Key Prefix') }}
                        {{ sortable_header('request_count', 'Requests', 'text-right') }}
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Total Tokens</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    {% for stat in key_usage_stats %}
                    <tr class="hover:bg-white/5">
                        <td class="px-6 py-4 whitespace-nowrap text-sm">{{ stat.username }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">{{ stat.key_name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">{{ stat.key_prefix }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-bold">{{ stat.request_count }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm">{{ "{:,}".format(stat.total_tokens|default(0)) }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" class="px-6 py-4 text-center text-gray-500 italic">No usage data found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="{{ url_for('static', path='vendor/chart.js') }}"></script>
<script>
    function downloadURI(uri, name) {
        const link = document.createElement("a");
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    function exportChartToPNG(chartId, filename) {
        const chart = Chart.getChart(chartId);
        if (chart) {
            const uri = chart.toBase64Image();
            downloadURI(uri, filename);
        }
    }

    function exportDataToCSV(headers, labels, data, filename) {
        let csvContent = "data:text/csv;charset=utf-8," + headers.join(",") + "\n";
        labels.forEach((label, index) => {
            csvContent += `"${label}",${data[index]}\n`;
        });
        const encodedUri = encodeURI(csvContent);
        downloadURI(encodedUri, filename);
    }

    function exportTableToCSV(tableId, filename) {
        const table = document.getElementById(tableId);
        let csvContent = "data:text/csv;charset=utf-8,";
        table.querySelectorAll("tr").forEach(row => {
            const cols = row.querySelectorAll("th, td");
            const rowData = Array.from(cols).map(col => `"${col.innerText.trim().replace(/"/g, '""')}"`);
            csvContent += rowData.join(",") + "\n";
        });
        const encodedUri = encodeURI(csvContent);
        downloadURI(encodedUri, filename);
    }

    document.addEventListener('DOMContentLoaded', () => {
        const cs = getComputedStyle(document.documentElement);
        const pColor = cs.getPropertyValue('--color-primary-600').trim() || '#4f46e5';
        const pColorTrans = pColor + '33';
        const palette = [pColor, '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];

        // Daily
        const dailyCtx = document.getElementById('dailyUsageChart')?.getContext('2d');
        if (dailyCtx) new Chart(dailyCtx, { type: 'line', data: { labels: {{ daily_labels | tojson }}, datasets: [{ label: 'Requests', data: {{ daily_data | tojson }}, borderColor: pColor, backgroundColor: pColorTrans, fill: true, tension: 0.3 }] }, options: { responsive: true, maintainAspectRatio: false } });

        // Hourly
        const hourlyCtx = document.getElementById('hourlyUsageChart')?.getContext('2d');
        if (hourlyCtx) new Chart(hourlyCtx, { type: 'bar', data: { labels: {{ hourly_labels | tojson }}, datasets: [{ label: 'Requests', data: {{ hourly_data | tojson }}, backgroundColor: pColor }] }, options: { responsive: true, maintainAspectRatio: false } });

        // Model Usage
        const modelCtx = document.getElementById('modelUsageChart')?.getContext('2d');
        if (modelCtx) new Chart(modelCtx, { type: 'pie', data: { labels: {{ model_labels | tojson }}, datasets: [{ data: {{ model_data | tojson }}, backgroundColor: palette }] }, options: { responsive: true, maintainAspectRatio: false } });
    });
</script>
{% endblock %}