{% extends "base.html" %}

{% block extra_head %}
<style>
    .usage-chart-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .usage-chart-panel {
        min-height: 340px;
    }
    .usage-chart-frame {
        height: 280px;
    }
    .usage-filter-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    @media (max-width: 1080px) {
        .usage-chart-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Usage Summary</h1>
        <p class="page-subtitle">Current Ursa workload and ParallelCluster tag spend.</p>
    </div>
    <div class="toolbar">
        <a href="/usage?refresh=true" class="btn btn-outline"><i class="fa-solid fa-rotate"></i> Force Refresh</a>
    </div>
</div>

<section class="alert alert-info" data-usage-loading>
    Loading usage data...
</section>
<section class="alert alert-danger d-none" data-usage-error></section>

<section class="grid grid-4" style="margin-bottom: 1rem;">
    <article class="stat-card"><div><div class="stat-value" data-usage-stat="worksets_total">...</div><div class="stat-label">Total Worksets</div></div></article>
    <article class="stat-card"><div><div class="stat-value" data-usage-stat="manifests_total">...</div><div class="stat-label">Manifests</div></div></article>
    <article class="stat-card"><div><div class="stat-value" data-usage-stat="analysis_total">...</div><div class="stat-label">Analyses</div></div></article>
    <article class="stat-card"><div><div class="stat-value" data-usage-stat="artifact_references">...</div><div class="stat-label">Artifact References</div></div></article>
</section>

<section class="grid grid-3" style="margin-bottom: 1.5rem;">
    <article class="card">
        <h3 class="card-title">Execution</h3>
        <p class="small">Active worksets: <strong data-usage-stat="active_worksets">...</strong></p>
        <p class="small">Completed worksets: <strong data-usage-stat="completed_worksets">...</strong></p>
    </article>
    <article class="card">
        <h3 class="card-title">Linked Storage</h3>
        <p class="small">Linked buckets: <strong data-usage-stat="linked_buckets">...</strong></p>
    </article>
    <article class="card">
        <h3 class="card-title">AWS Cost Source</h3>
        <div data-usage-cost-source>Loading AWS usage report...</div>
    </article>
</section>

<section class="alert alert-danger d-none" style="margin-bottom: 1.5rem;" data-usage-report-error></section>

<section data-usage-report-content class="d-none">
    <section class="grid grid-4" style="margin-bottom: 1rem;">
        <article class="stat-card"><div><div class="stat-value" data-usage-report-stat="total_cost_amount">...</div><div class="stat-label">Tagged Spend</div></div></article>
        <article class="stat-card"><div><div class="stat-value" data-usage-report-stat="costs_by_tag_service">...</div><div class="stat-label">Tag-Service Rows</div></div></article>
        <article class="stat-card"><div><div class="stat-value" data-usage-report-stat="cost_totals_by_service">...</div><div class="stat-label">Services</div></div></article>
        <article class="stat-card"><div><div class="stat-value" data-usage-report-stat="resource_inventory">...</div><div class="stat-label">Inventory Rows</div></div></article>
    </section>

    <section class="card" style="margin-bottom: 1.5rem;">
        <div class="card-header">
            <h3 class="card-title">Spend Visuals</h3>
            <div class="usage-filter-bar" data-usage-filter-bar></div>
        </div>
        <div class="usage-chart-grid">
            <article class="usage-chart-panel"><h4 class="text-sm text-muted">Service Spend</h4><div class="usage-chart-frame"><canvas id="usage-service-spend-chart" aria-label="Tag spend by service"></canvas></div></article>
            <article class="usage-chart-panel"><h4 class="text-sm text-muted">Selected Tag Breakdown</h4><div class="usage-chart-frame"><canvas id="usage-tag-service-chart" aria-label="Selected tag spend by service"></canvas></div></article>
            <article class="usage-chart-panel"><h4 class="text-sm text-muted">Tag Key Totals</h4><div class="usage-chart-frame"><canvas id="usage-tag-key-chart" aria-label="Tag key spend totals"></canvas></div></article>
            <article class="usage-chart-panel"><h4 class="text-sm text-muted">Tagged Resources</h4><div class="usage-chart-frame"><canvas id="usage-resource-chart" aria-label="Tagged resources by service"></canvas></div></article>
        </div>
    </section>

    <section class="card" style="margin-bottom: 1.5rem;">
        <div class="card-header"><h3 class="card-title">Tag Spend By Service</h3></div>
        <div class="table-container" data-usage-cost-table>Loading spend rows...</div>
    </section>

    <section class="card" style="margin-bottom: 1.5rem;">
        <div class="card-header"><h3 class="card-title">Tagged Resource Inventory</h3></div>
        <div class="table-container" data-usage-resource-table>Loading resource rows...</div>
    </section>
</section>

<section class="card">
    <div class="card-header"><h3 class="card-title">Recent Workload</h3></div>
    <div class="table-container" data-usage-workload>Loading recent workload...</div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(() => {
    const html = window.escapeHtml || ((value) => String(value ?? ""));
    const refresh = new URLSearchParams(window.location.search).get('refresh') === 'true';
    const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
    const wholeCurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
    const charts = {};
    const colors = ['#0f766e', '#2563eb', '#ca8a04', '#dc2626', '#7c3aed', '#0891b2', '#16a34a', '#be123c', '#4b5563'];

    function setText(selector, value) {
        document.querySelectorAll(selector).forEach((node) => { node.textContent = String(value ?? "0"); });
    }

    function money(value) {
        return currencyFormatter.format(Number(value || 0));
    }

    function sumBy(rows, keyFn, valueFn) {
        const totals = new Map();
        rows.forEach((row) => {
            const key = keyFn(row);
            totals.set(key, (totals.get(key) || 0) + valueFn(row));
        });
        return Array.from(totals.entries()).map(([key, amount]) => ({ key, amount })).sort((a, b) => b.amount - a.amount || String(a.key).localeCompare(String(b.key)));
    }

    function renderTable(selector, columns, rows, emptyText) {
        const container = document.querySelector(selector);
        if (!container) return;
        if (!Array.isArray(rows) || !rows.length) {
            container.innerHTML = `<p class="text-muted">${html(emptyText)}</p>`;
            return;
        }
        container.innerHTML = `<table><thead><tr>${columns.map((col) => `<th>${html(col.label)}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${columns.map((col) => `<td>${col.render(row)}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
        window.UrsaPortal?.initSortableTables?.(container);
    }

    function destroyChart(id) {
        if (charts[id]) {
            charts[id].destroy();
            delete charts[id];
        }
    }

    function renderBar(id, labels, values, label, options = {}) {
        const canvas = document.getElementById(id);
        if (!canvas || typeof Chart === 'undefined') return;
        destroyChart(id);
        charts[id] = new Chart(canvas, {
            type: 'bar',
            data: { labels, datasets: [{ label, data: values, backgroundColor: labels.map((_, index) => colors[index % colors.length]), borderWidth: 1 }] },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: options.indexAxis || 'x',
                plugins: { legend: { display: false }, tooltip: { callbacks: { label: (context) => money(context.raw) } } },
                scales: {
                    x: options.currencyAxis === 'x' ? { beginAtZero: true, ticks: { callback: (value) => wholeCurrencyFormatter.format(Number(value || 0)) } } : { ticks: { autoSkip: false, maxRotation: 45 } },
                    y: options.currencyAxis === 'y' ? { beginAtZero: true, ticks: { callback: (value) => wholeCurrencyFormatter.format(Number(value || 0)) } } : { beginAtZero: true },
                },
            },
        });
    }

    function renderUsageCharts(report) {
        const costRows = Array.isArray(report.costs_by_tag_service) ? report.costs_by_tag_service : [];
        const inventoryRows = Array.isArray(report.resource_inventory) ? report.resource_inventory : [];
        const serviceTotals = Array.isArray(report.cost_totals_by_service) && report.cost_totals_by_service.length
            ? report.cost_totals_by_service.map((row) => ({ key: row.service || 'unknown', amount: Number(row.amount || 0) }))
            : sumBy(costRows, (row) => row.service || 'unknown', (row) => Number(row.amount || 0));
        renderBar('usage-service-spend-chart', serviceTotals.map((row) => row.key), serviceTotals.map((row) => row.amount), 'Spend', { indexAxis: 'y', currencyAxis: 'x' });
        const selectedTagKey = report.cost_basis_tag_key || (report.tag_keys || [])[0] || '';
        const selectedRows = selectedTagKey ? costRows.filter((row) => row.tag_key === selectedTagKey) : costRows;
        const selectedTotals = sumBy(selectedRows, (row) => row.service || 'unknown', (row) => Number(row.amount || 0));
        renderBar('usage-tag-service-chart', selectedTotals.map((row) => row.key), selectedTotals.map((row) => row.amount), 'Spend', { indexAxis: 'y', currencyAxis: 'x' });
        const tagTotals = Object.entries(report.cost_totals_by_tag_key || {}).map(([key, amount]) => ({ key, amount: Number(amount || 0) }));
        renderBar('usage-tag-key-chart', tagTotals.map((row) => row.key), tagTotals.map((row) => row.amount), 'Spend', { indexAxis: 'y', currencyAxis: 'x' });
        const resourceTotals = sumBy(inventoryRows, (row) => row.service || 'unknown', (row) => Number(row.resource_count || 0));
        renderBar('usage-resource-chart', resourceTotals.map((row) => row.key), resourceTotals.map((row) => row.amount), 'Resources');
        const filterBar = document.querySelector('[data-usage-filter-bar]');
        if (filterBar) {
            filterBar.innerHTML = `${report.cost_basis_tag_key ? `<span class="badge badge-outline">Spend basis ${html(report.cost_basis_tag_key)}</span>` : ''}<span class="badge badge-outline">Cache TTL ${(report.ttl_seconds || 900)}s</span>`;
        }
    }

    async function loadUsage() {
        const loading = document.querySelector('[data-usage-loading]');
        const error = document.querySelector('[data-usage-error]');
        try {
            const payload = await window.UrsaPortal.apiRequest(`/api/v1/gui/usage?refresh=${refresh ? 'true' : 'false'}`);
            const usage = payload.usage || {};
            Object.entries(usage).forEach(([key, value]) => setText(`[data-usage-stat="${key}"]`, value));
            const costSource = document.querySelector('[data-usage-cost-source]');
            const report = payload.usage_report;
            const reportError = payload.usage_report_error || '';
            if (report) {
                if (costSource) {
                    costSource.innerHTML = `<p class="small">Profile: <strong>${html(report.aws_profile)}</strong></p><p class="small">Window: <strong>${html(report.start_date)}</strong> through <strong>${html(report.end_date)}</strong></p><p class="small">Cached: <strong>${html(String(report.fetched_at || '').slice(0, 19))}</strong></p>`;
                }
                document.querySelector('[data-usage-report-content]')?.classList.remove('d-none');
                setText('[data-usage-report-stat="total_cost_amount"]', money(report.total_cost_amount || 0));
                setText('[data-usage-report-stat="costs_by_tag_service"]', (report.costs_by_tag_service || []).length);
                setText('[data-usage-report-stat="cost_totals_by_service"]', (report.cost_totals_by_service || []).length);
                setText('[data-usage-report-stat="resource_inventory"]', (report.resource_inventory || []).length);
                renderUsageCharts(report);
                renderTable('[data-usage-cost-table]', [
                    { label: 'Tag Key', render: (row) => `<span class="mono">${html(row.tag_key)}</span>` },
                    { label: 'Tag Value', render: (row) => `<span class="mono">${html(row.tag_value || '<untagged>')}</span>` },
                    { label: 'Service', render: (row) => html(row.service) },
                    { label: 'Amount', render: (row) => money(row.amount) },
                ], report.costs_by_tag_service || [], 'No Cost Explorer rows returned for the configured tags.');
                renderTable('[data-usage-resource-table]', [
                    { label: 'Tag Key', render: (row) => `<span class="mono">${html(row.tag_key)}</span>` },
                    { label: 'Tag Value', render: (row) => `<span class="mono">${html(row.tag_value || '<empty>')}</span>` },
                    { label: 'Service', render: (row) => html(row.service) },
                    { label: 'Region', render: (row) => html(row.region) },
                    { label: 'Resources', render: (row) => html(row.resource_count) },
                ], report.resource_inventory || [], 'No currently tagged resources found in configured regions.');
            } else if (reportError) {
                if (costSource) costSource.innerHTML = `<p class="small text-danger">${html(reportError)}</p>`;
                const node = document.querySelector('[data-usage-report-error]');
                if (node) {
                    node.textContent = `AWS usage report failed: ${reportError}`;
                    node.classList.remove('d-none');
                }
            }
            const workloadRows = []
                .concat((payload.worksets || []).map((row) => ({ kind: 'Workset', name: row.name, state: row.state, url: `/worksets/${encodeURIComponent(row.workset_euid)}` })))
                .concat((payload.manifests || []).slice(0, 10).map((row) => ({ kind: 'Manifest', name: row.name, state: row.state, url: `/manifests/${encodeURIComponent(row.manifest_euid)}` })))
                .concat((payload.analyses || []).slice(0, 10).map((row) => ({ kind: 'Analysis', name: row.analysis_euid, state: row.state, url: `/analyses/${encodeURIComponent(row.analysis_euid)}` })));
            renderTable('[data-usage-workload]', [
                { label: 'Kind', render: (row) => html(row.kind) },
                { label: 'Name', render: (row) => html(row.name) },
                { label: 'State', render: (row) => html(row.state) },
                { label: 'Link', render: (row) => `<a href="${html(row.url)}">Open</a>` },
            ], workloadRows, 'No recent workload found.');
            loading?.remove();
        } catch (err) {
            if (loading) loading.classList.add('d-none');
            if (error) {
                error.textContent = `Usage load failed: ${err.message || err}`;
                error.classList.remove('d-none');
            }
        }
    }

    document.addEventListener('DOMContentLoaded', loadUsage);
})();
</script>
{% endblock %}