{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Product Analytics - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="/static/hil-pages/product_analytics.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Product Usage Analytics</h1>
            <div class="ops-subtitle">Active shops, active cashiers, checkout speed, failed checkouts, feature usage, and retention metrics.</div>
        </div>
        <div class="ops-actions"><a class="ops-button secondary" href="/admin">Admin</a></div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric"><span class="ops-muted">Active Shops</span><strong>{{ snapshot.active_shops }}</strong></div>
        <div class="ops-panel ops-metric"><span class="ops-muted">Active Users</span><strong>{{ snapshot.active_cashiers }}</strong></div>
        <div class="ops-panel ops-metric"><span class="ops-muted">Failures</span><strong>{{ snapshot.reliability.failures or 0 }}</strong></div>
    </section>

    <section class="ops-panel">
        <h2>Most Used Features</h2>
        <div class="usage-chart-frame"><canvas id="featureUsageChart"></canvas></div>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>Feature</th><th>Uses</th><th>Average Time</th></tr></thead>
                <tbody>
                {% for feature in snapshot.most_used_features %}
                <tr><td>{{ feature.feature_key }}</td><td>{{ feature.uses }}</td><td>{{ "%.1f"|format(feature.avg_duration_ms or 0) }}ms</td></tr>
                {% else %}
                <tr><td colspan="3">Usage appears after users move through workflows.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
<script>
const featureLabels = [{% for feature in snapshot.most_used_features %}{{ feature.feature_key|tojson }}{% if not loop.last %},{% endif %}{% endfor %}];
const featureUses = [{% for feature in snapshot.most_used_features %}{{ feature.uses or 0 }}{% if not loop.last %},{% endif %}{% endfor %}];
const featureDurations = [{% for feature in snapshot.most_used_features %}{{ feature.avg_duration_ms or 0 }}{% if not loop.last %},{% endif %}{% endfor %}];
const labels = featureLabels.length ? featureLabels : ["No data"];
const uses = featureUses.length ? featureUses : [0];
const durations = featureDurations.length ? featureDurations : [0];
Chart.defaults.font.family = "'Inter', 'Segoe UI', Arial, sans-serif";
new Chart(document.getElementById("featureUsageChart"), {
    type: "bar",
    data: {
        labels,
        datasets: [{
            label: "Uses",
            data: uses,
            backgroundColor: "#2563eb",
            borderRadius: 6,
            maxBarThickness: 36
        }, {
            type: "line",
            label: "Average Time (ms)",
            data: durations,
            borderColor: "#0891b2",
            backgroundColor: "rgba(8, 145, 178, 0.12)",
            borderWidth: 3,
            yAxisID: "y1",
            tension: 0.35
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {position: "bottom", labels: {usePointStyle: true, boxWidth: 8}},
            tooltip: {backgroundColor: "#0f172a"}
        },
        scales: {
            x: {grid: {display: false}},
            y: {beginAtZero: true, grid: {color: "rgba(100, 116, 139, 0.18)"}, ticks: {precision: 0}},
            y1: {beginAtZero: true, position: "right", grid: {drawOnChartArea: false}, ticks: {callback: value => value + "ms"}}
        }
    }
});
</script>
{% endblock %}