{% extends "base.html" %}

{% block title %}aide - Overview{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold mb-6">Overview</h1>

<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <!-- Last 30 Days -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-3">Last 30 Days</h3>
        <div class="text-3xl font-bold text-gray-900 mb-2">
            {{ summary.last_30d.work_blocks }} <span class="text-base font-normal text-gray-500" title="Continuous coding periods within sessions, split at 30-minute idle gaps">work blocks</span>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-600">
            <span>{{ summary.last_30d.sessions }} sessions</span>
            {% if not subscription_user %}<span class="text-gray-300">|</span><span>{{ "${:,.2f}".format(summary.last_30d.cost) }}</span>{% endif %}
            <span class="text-gray-300">|</span><span>{{ summary.last_30d.projects }} projects</span>
        </div>
    </div>

    <!-- This Week -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-3">This Week</h3>
        <div class="text-3xl font-bold text-gray-900 mb-2">
            {{ summary.this_week.work_blocks }} <span class="text-base font-normal text-gray-500" title="Continuous coding periods within sessions, split at 30-minute idle gaps">work blocks</span>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-600">
            <span>{{ summary.this_week.sessions }} sessions</span>
            {% if not subscription_user %}<span class="text-gray-300">|</span><span>{{ "${:,.2f}".format(summary.this_week.cost) }}</span>{% endif %}
            <span class="text-gray-300">|</span><span>{{ summary.this_week.projects }} projects</span>
        </div>
    </div>

    <!-- Today -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-3">Today</h3>
        <div class="text-3xl font-bold text-gray-900 mb-2">
            {{ summary.today.work_blocks }} <span class="text-base font-normal text-gray-500" title="Continuous coding periods within sessions, split at 30-minute idle gaps">work blocks</span>
        </div>
        <div class="text-sm text-gray-600">
            {% if not subscription_user %}{{ "${:,.2f}".format(summary.today.cost) }}{% else %}{{ summary.today.sessions }} session{{ "s" if summary.today.sessions != 1 else "" }} today{% endif %}
        </div>
    </div>
</div>

<!-- Effectiveness Metrics -->
<div class="mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Effectiveness</h2>

    <!-- 7 metric cards: 4 top row, 3 bottom row -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <!-- Cache Hit Rate -->
        <div class="bg-white rounded-lg shadow p-4" title="cache_read / (input + cache_read + cache_creation)">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Cache Hit Rate</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.0%}".format(effectiveness.cache_hit_rate) }}</div>
            <div class="text-xs text-gray-400 mt-1">% of context from cache</div>
            {% if effectiveness.cache_hit_rate < 0.5 and effectiveness.session_count > 0 %}
            <div class="text-xs text-amber-600 mt-1">Tip: Keep sessions focused on one task</div>
            {% endif %}
        </div>

        <!-- Edit Ratio -->
        <div class="bg-white rounded-lg shadow p-4" title="(file_edit + file_write) / tool_call_count">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Edit Ratio</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.0%}".format(effectiveness.edit_ratio) }}</div>
            <div class="text-xs text-gray-400 mt-1">% of tool calls that edit</div>
            {% if effectiveness.edit_ratio < 0.2 and effectiveness.session_count > 0 %}
            <div class="text-xs text-amber-600 mt-1">Tip: Use detailed prompts with file paths</div>
            {% endif %}
        </div>

        <!-- Compaction Rate -->
        <div class="bg-white rounded-lg shadow p-4" title="sessions with compaction / total sessions">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Compaction Rate</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.0%}".format(effectiveness.compaction_rate) }}</div>
            <div class="text-xs text-gray-400 mt-1">% of sessions hitting context limits</div>
            {% if effectiveness.compaction_rate > 0.3 and effectiveness.session_count > 0 %}
            <div class="text-xs text-amber-600 mt-1">Tip: Break tasks into smaller sessions</div>
            {% endif %}
        </div>

        <!-- Read-to-Edit Ratio -->
        <div class="bg-white rounded-lg shadow p-4" title="file_read / max(file_edit + file_write, 1)">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Read-to-Edit</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.1f}".format(effectiveness.read_to_edit_ratio) }}x</div>
            <div class="text-xs text-gray-400 mt-1">reads per edit</div>
            {% if effectiveness.read_to_edit_ratio > 8 and effectiveness.session_count > 0 %}
            <div class="text-xs text-amber-600 mt-1">Tip: Add project structure to CLAUDE.md</div>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <!-- Turns per User Prompt -->
        <div class="bg-white rounded-lg shadow p-4" title="assistant_count / user_message_count">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Turns / Prompt</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.1f}".format(effectiveness.turns_per_user_prompt) }}</div>
            <div class="text-xs text-gray-400 mt-1">assistant turns per user message</div>
        </div>

        <!-- Tool Error Rate (with iteration context) -->
        <div class="bg-white rounded-lg shadow p-4" title="tool errors / total tool calls — most errors are normal iteration (test/lint cycles)">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Error Rate</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "{:.1%}".format(effectiveness.error_rate) }}</div>
            <div class="text-xs text-gray-400 mt-1">% of tool calls that error</div>
            {% if effectiveness.error_rate > 0 and effectiveness.iteration_error_pct > 0 %}
            <div class="text-xs text-gray-500 mt-1">
                {{ "{:.0%}".format(effectiveness.iteration_error_pct) }} from test/lint/build
            </div>
            {% endif %}
        </div>

        <!-- Cost Per Edit -->
        {% if not subscription_user and effectiveness.cost_per_edit > 0 %}
        <div class="bg-white rounded-lg shadow p-4" title="total cost / (edits + writes)">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Cost / Edit</h3>
            <div class="text-2xl font-bold text-gray-900">{{ "${:,.2f}".format(effectiveness.cost_per_edit) }}</div>
            <div class="text-xs text-gray-400 mt-1">avg cost per file change</div>
        </div>
        {% endif %}

        <!-- Iteration Rate -->
        <div class="bg-white rounded-lg shadow p-4" title="sessions with files edited 3+ times / total sessions">
            <h3 class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Iteration Rate</h3>
            <div class="text-2xl font-bold {% if effectiveness.rework_rate > 0.5 %}text-amber-600{% else %}text-gray-900{% endif %}">{{ "{:.0%}".format(effectiveness.rework_rate) }}</div>
            <div class="text-xs text-gray-400 mt-1">sessions with repeated file edits</div>
        </div>
    </div>

    <!-- 3 trend charts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Cache Hit Rate Over Time</h3>
            <div style="height: 220px;">
                <canvas id="cacheHitRateChart"></canvas>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Edit Ratio Over Time</h3>
            <div style="height: 220px;">
                <canvas id="editRatioChart"></canvas>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Compaction Over Time</h3>
            <div style="height: 220px;">
                <canvas id="compactionChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Cost Over Time -->
{% if not subscription_user %}
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Cost Over Time</h2>
    <div style="height: 300px;">
        <canvas id="costOverTimeChart"></canvas>
    </div>
</div>
{% endif %}

<!-- Work Blocks Per Week -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4" title="A work block is a continuous coding period within a session. Sessions are split into blocks at 30-minute idle gaps.">Work Blocks Per Week</h2>
    <div style="height: 300px;">
        <canvas id="workBlocksPerWeekChart"></canvas>
    </div>
</div>

<!-- Two-column layout for project costs and token breakdown -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Cost By Project (API users only) -->
    {% if not subscription_user %}
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Cost By Project</h2>
        <div style="height: 300px;">
            <canvas id="costByProjectChart"></canvas>
        </div>
    </div>
    {% endif %}

    <!-- Token Breakdown -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Token Breakdown</h2>
        <div style="max-width: 320px; margin: 0 auto;">
            <canvas id="tokenBreakdownChart"></canvas>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // --- Data from server ---
    const dailyCosts = {{ daily_costs|tojson }};
    const weeklyWorkBlocks = {{ weekly_work_blocks|tojson }};
    const costByProject = {{ cost_by_project|tojson }};
    const tokenBreakdown = {{ token_breakdown|tojson }};
    const effectivenessTrends = {{ effectiveness_trends|tojson }};
    const isSubscriptionUser = {{ subscription_user|tojson }};

    // --- Helper: compute N-point moving average ---
    function movingAverage(data, window) {
        return data.map(function(_, i) {
            const start = Math.max(0, i - window + 1);
            const slice = data.slice(start, i + 1);
            return slice.reduce(function(a, b) { return a + b; }, 0) / slice.length;
        });
    }

    // --- Shared effectiveness chart options ---
    const effChartBase = {
        scales: {
            x: {
                type: "time",
                time: {
                    unit: "day",
                    tooltipFormat: "MMM d, yyyy",
                    displayFormats: { day: "MMM d" },
                },
                ticks: { maxTicksLimit: 8 },
                grid: { display: false },
            },
            y: {
                beginAtZero: true,
                suggestedMax: 1.05,
                ticks: { callback: function(v) { return formatPercent(v); } },
            },
        },
        plugins: {
            legend: {
                onClick: function() {},
                labels: {
                    usePointStyle: true,
                    pointStyleWidth: 20,
                },
            },
            tooltip: {
                callbacks: {
                    label: function(ctx) { return ctx.dataset.label + ": " + formatPercent(ctx.parsed.y); },
                },
            },
        },
    };

    // --- Effectiveness: Cache Hit Rate Over Time ---
    if (effectivenessTrends.length > 0) {
        const points = effectivenessTrends.map(function(d) { return { x: d.started_at, y: d.cache_hit_rate }; });
        const rates = effectivenessTrends.map(function(d) { return d.cache_hit_rate; });
        const avgValues = movingAverage(rates, 7);
        const avgPoints = effectivenessTrends.map(function(d, i) { return { x: d.started_at, y: avgValues[i] }; });

        createLineChart("cacheHitRateChart", null, [
            { label: "Per Session", data: points, borderColor: AIDE_COLORS.secondary, backgroundColor: AIDE_COLORS.secondary, showLine: false, pointRadius: 3, pointHitRadius: 8, pointStyle: "circle" },
            { label: "7-Session Avg", data: avgPoints, borderColor: AIDE_COLORS.secondary, borderWidth: 2, tension: 0.3, pointRadius: 0, pointHitRadius: 8, fill: false, pointStyle: "line" },
        ], effChartBase);
    }

    // --- Effectiveness: Edit Ratio Over Time ---
    if (effectivenessTrends.length > 0) {
        const points = effectivenessTrends.map(function(d) { return { x: d.started_at, y: d.edit_ratio }; });
        const ratios = effectivenessTrends.map(function(d) { return d.edit_ratio; });
        const avgValues = movingAverage(ratios, 7);
        const avgPoints = effectivenessTrends.map(function(d, i) { return { x: d.started_at, y: avgValues[i] }; });

        createLineChart("editRatioChart", null, [
            { label: "Per Session", data: points, borderColor: AIDE_COLORS.primary, backgroundColor: AIDE_COLORS.primary, showLine: false, pointRadius: 3, pointHitRadius: 8, pointStyle: "circle" },
            { label: "7-Session Avg", data: avgPoints, borderColor: AIDE_COLORS.primary, borderWidth: 2, tension: 0.3, pointRadius: 0, pointHitRadius: 8, fill: false, pointStyle: "line" },
        ], effChartBase);
    }

    // --- Effectiveness: Compaction Over Time ---
    if (effectivenessTrends.length > 0) {
        const points = effectivenessTrends.map(function(d) { return { x: d.started_at, y: d.had_compaction ? 1 : 0 }; });
        const compactions = effectivenessTrends.map(function(d) { return d.had_compaction ? 1 : 0; });
        const runningRateValues = movingAverage(compactions, 7);
        const avgPoints = effectivenessTrends.map(function(d, i) { return { x: d.started_at, y: runningRateValues[i] }; });

        createLineChart("compactionChart", null, [
            { label: "Had Compaction", data: points, borderColor: AIDE_COLORS.danger, backgroundColor: AIDE_COLORS.danger, showLine: false, pointRadius: 3, pointHitRadius: 8, pointStyle: "circle" },
            { label: "Running Rate", data: avgPoints, borderColor: AIDE_COLORS.danger, borderWidth: 2, tension: 0.3, pointRadius: 0, pointHitRadius: 8, fill: false, pointStyle: "line" },
        ], effChartBase);
    }

    // --- Cost Over Time (line chart with daily cost + 7-day avg) ---
    if (!isSubscriptionUser && document.getElementById("costOverTimeChart")) {
        createLineChart(
            "costOverTimeChart",
            dailyCosts.map(d => d.date),
            [
                {
                    label: "Daily Cost",
                    data: dailyCosts.map(d => d.cost),
                    borderColor: AIDE_COLORS.primary,
                    backgroundColor: AIDE_COLORS_ALPHA.primary,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 0,
                    pointHitRadius: 8,
                    borderWidth: 2,
                },
                {
                    label: "7-Day Avg",
                    data: dailyCosts.map(d => d.cost_7d_avg),
                    borderColor: AIDE_COLORS.secondary,
                    borderDash: [6, 3],
                    fill: false,
                    tension: 0.3,
                    pointRadius: 0,
                    pointHitRadius: 8,
                    borderWidth: 2,
                },
            ],
            {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) { return formatCost(value); },
                        },
                    },
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ctx.dataset.label + ": " + formatCost(ctx.parsed.y);
                            },
                        },
                    },
                },
            }
        );
    }

    // --- Work Blocks Per Week (bar chart) ---
    createBarChart(
        "workBlocksPerWeekChart",
        weeklyWorkBlocks.map(d => d.week_start),
        weeklyWorkBlocks.map(d => d.work_block_count),
        {
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0,
                    },
                },
            },
        }
    );

    // --- Cost By Project (horizontal bar chart, API users only) ---
    if (!isSubscriptionUser && document.getElementById("costByProjectChart")) {
        (function() {
            const labels = costByProject.map(d => d.project_name);
            const data = costByProject.map(d => d.total_cost);
            const colors = labels.map((_, i) => PROJECT_COLORS[i % PROJECT_COLORS.length]);

            const ctx = document.getElementById("costByProjectChart").getContext("2d");
            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderRadius: 4,
                    }],
                },
                options: {
                    indexAxis: "y",
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(ctx) { return formatCost(ctx.parsed.x); },
                            },
                        },
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) { return formatCost(value); },
                                font: { size: 11, family: "system-ui, sans-serif" },
                            },
                            grid: { color: "rgba(0, 0, 0, 0.05)" },
                        },
                        y: {
                            ticks: { font: { size: 11, family: "system-ui, sans-serif" } },
                            grid: { display: false },
                        },
                    },
                },
            });
        })();
    }

    // --- Token Breakdown (doughnut chart) ---
    createPieChart(
        "tokenBreakdownChart",
        ["Input", "Output", "Cache Read", "Cache Creation"],
        [
            tokenBreakdown.input,
            tokenBreakdown.output,
            tokenBreakdown.cache_read,
            tokenBreakdown.cache_creation,
        ],
        {
            cutout: "60%",
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            return ctx.label + ": " + formatTokens(ctx.parsed);
                        },
                    },
                },
            },
        }
    );
</script>
{% endblock %}