{% extends "base.html" %}

{% block title %}Usage Dashboard - HM QC Platform{% endblock %}

{% block extra_head %}
<style>
    .stat-card { border-radius: 8px; text-align: center; }
    .stat-value { font-size: 2rem; font-weight: bold; }
    .stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; }
    .filter-btn.active { background-color: #333; color: #FFDD00; border-color: #333; }
    .table-usage th { font-size: 0.8rem; text-transform: uppercase; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h2">
                <i class="bi bi-speedometer2 me-2"></i>
                Usage Dashboard
            </h1>
            <p class="text-muted">API usage, token consumption, and estimated costs across all tools.</p>
        </div>
    </div>

    <!-- Time Filter -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="btn-group" role="group">
                <button class="btn btn-outline-dark filter-btn active" data-days="">All Time</button>
                <button class="btn btn-outline-dark filter-btn" data-days="30">Last 30 Days</button>
                <button class="btn btn-outline-dark filter-btn" data-days="7">Last 7 Days</button>
                <button class="btn btn-outline-dark filter-btn" data-days="1">Today</button>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4" id="summaryCards">
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-value text-primary" id="totalCalls">-</div>
                    <div class="stat-label">API Calls</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-value text-info" id="totalTokens">-</div>
                    <div class="stat-label">Total Tokens</div>
                    <small class="text-muted">
                        <span id="totalInputTokens">-</span> in
                        / <span id="totalOutputTokens">-</span> out
                    </small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="stat-value text-success" id="totalCost">-</div>
                    <div class="stat-label">Estimated Cost (USD)</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- By Provider -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header"><i class="bi bi-cloud me-2"></i>By Provider</div>
                <div class="card-body p-0">
                    <table class="table table-hover table-usage mb-0">
                        <thead class="table-light">
                            <tr><th>Provider</th><th>Calls</th><th>Input</th><th>Output</th><th>Cost</th></tr>
                        </thead>
                        <tbody id="byProvider"><tr><td colspan="5" class="text-center text-muted">Loading...</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- By Model -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header"><i class="bi bi-cpu me-2"></i>By Model</div>
                <div class="card-body p-0">
                    <table class="table table-hover table-usage mb-0">
                        <thead class="table-light">
                            <tr><th>Model</th><th>Calls</th><th>Input</th><th>Output</th><th>Cost</th></tr>
                        </thead>
                        <tbody id="byModel"><tr><td colspan="5" class="text-center text-muted">Loading...</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- By Tool -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header"><i class="bi bi-tools me-2"></i>By Tool</div>
                <div class="card-body p-0">
                    <table class="table table-hover table-usage mb-0">
                        <thead class="table-light">
                            <tr><th>Tool</th><th>Calls</th><th>Input</th><th>Output</th><th>Cost</th></tr>
                        </thead>
                        <tbody id="byModule"><tr><td colspan="5" class="text-center text-muted">Loading...</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- By User -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header"><i class="bi bi-people me-2"></i>By User</div>
                <div class="card-body p-0">
                    <table class="table table-hover table-usage mb-0">
                        <thead class="table-light">
                            <tr><th>User</th><th>Calls</th><th>Input</th><th>Output</th><th>Cost</th></tr>
                        </thead>
                        <tbody id="byUser"><tr><td colspan="5" class="text-center text-muted">Loading...</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Calls -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header"><i class="bi bi-clock-history me-2"></i>Recent API Calls</div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-usage mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Time</th>
                                    <th>User</th>
                                    <th>Tool</th>
                                    <th>Provider</th>
                                    <th>Model</th>
                                    <th>Check</th>
                                    <th>Input</th>
                                    <th>Output</th>
                                    <th>Cost</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="recentCalls"><tr><td colspan="10" class="text-center text-muted">Loading...</td></tr></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let currentDays = '';

    function formatNum(n) {
        if (n === null || n === undefined) return '-';
        return n.toLocaleString();
    }

    function formatCost(n) {
        if (n === null || n === undefined) return '-';
        return '$' + n.toFixed(4);
    }

    function renderRows(tbodyId, data, columns) {
        const tbody = document.getElementById(tbodyId);
        if (!data || data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="' + columns.length + '" class="text-center text-muted">No data</td></tr>';
            return;
        }
        tbody.innerHTML = data.map(row =>
            '<tr>' + columns.map(col => `<td>${col(row)}</td>`).join('') + '</tr>'
        ).join('');
    }

    async function loadStats(days) {
        const url = days ? `${BASE_URL}/usage/api/stats?days=${days}` : `${BASE_URL}/usage/api/stats`;
        try {
            const resp = await fetch(url);
            const data = await resp.json();
            if (data.error) { console.error(data.error); return; }

            // Summary
            document.getElementById('totalCalls').textContent = formatNum(data.summary.total_calls);
            document.getElementById('totalTokens').textContent = formatNum(data.summary.total_tokens);
            document.getElementById('totalInputTokens').textContent = formatNum(data.summary.total_input_tokens);
            document.getElementById('totalOutputTokens').textContent = formatNum(data.summary.total_output_tokens);
            document.getElementById('totalCost').textContent = formatCost(data.summary.total_cost);

            // By Provider
            renderRows('byProvider', data.by_provider, [
                r => `<strong>${r.provider}</strong>`,
                r => formatNum(r.calls),
                r => formatNum(r.input_tokens),
                r => formatNum(r.output_tokens),
                r => formatCost(r.cost)
            ]);

            // By Model
            renderRows('byModel', data.by_model, [
                r => `<span class="text-muted">${r.provider}/</span><strong>${r.model}</strong>`,
                r => formatNum(r.calls),
                r => formatNum(r.input_tokens),
                r => formatNum(r.output_tokens),
                r => formatCost(r.cost)
            ]);

            // By Module
            renderRows('byModule', data.by_module, [
                r => `<strong>${r.module}</strong>`,
                r => formatNum(r.calls),
                r => formatNum(r.input_tokens),
                r => formatNum(r.output_tokens),
                r => formatCost(r.cost)
            ]);

            // By User
            renderRows('byUser', data.by_user, [
                r => `<strong>${r.user}</strong>`,
                r => formatNum(r.calls),
                r => formatNum(r.input_tokens),
                r => formatNum(r.output_tokens),
                r => formatCost(r.cost)
            ]);

            // Recent Calls
            renderRows('recentCalls', data.recent, [
                r => r.timestamp ? new Date(r.timestamp).toLocaleString() : '-',
                r => r.user || '-',
                r => r.module || '-',
                r => r.provider || '-',
                r => `<small>${r.model || '-'}</small>`,
                r => r.check_name || '-',
                r => formatNum(r.input_tokens),
                r => formatNum(r.output_tokens),
                r => formatCost(r.estimated_cost_usd),
                r => r.success ? '<span class="badge bg-success">OK</span>' : '<span class="badge bg-danger">Error</span>'
            ]);

        } catch (e) {
            console.error('Failed to load stats:', e);
        }
    }

    // Filter buttons
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentDays = this.dataset.days;
            loadStats(currentDays);
        });
    });

    // Initial load
    loadStats('');
</script>
{% endblock %}