{% extends "base.html" %}

{% block title %}Cost — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Cost Tracking</h1>
    <p class="mt-1 text-sm text-slate-400">Estimated spend across search + LLM providers. Real billing lives with each provider.</p>
</div>

<!-- KPI cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Last 24h</p>
        <p class="mt-2 text-3xl font-bold text-white">${{ "%.4f"|format(cost_24h) }}</p>
        <p class="mt-1 text-xs text-slate-500">estimated</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Last 7 days</p>
        <p class="mt-2 text-3xl font-bold text-white">${{ "%.2f"|format(cost_7d) }}</p>
        <p class="mt-1 text-xs text-slate-500">rolling</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Last 30 days</p>
        <p class="mt-2 text-3xl font-bold text-white">${{ "%.2f"|format(cost_30d) }}</p>
        <p class="mt-1 text-xs text-slate-500">rolling</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-indigo-700/40 p-5">
        <p class="text-xs uppercase tracking-wide text-indigo-300">Projected monthly</p>
        <p class="mt-2 text-3xl font-bold text-white">${{ "%.2f"|format(projected_monthly) }}</p>
        <p class="mt-1 text-xs text-slate-500">24h burn × 30</p>
    </div>
</div>

<!-- Provider quotas -->
<section class="mb-10">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-4">Provider Budgets (live)</h2>
    <div class="space-y-3">
        {% for b in budgets %}
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-4">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <span class="text-white font-medium text-sm">{{ b.name }}</span>
                    <span class="text-xs text-slate-500">{{ b.kind }}</span>
                    {% if b.plan_price %}<span class="text-xs text-slate-500">· ${{ "%.0f"|format(b.plan_price) }}/mo</span>{% endif %}
                </div>
                <span class="text-xs font-mono text-slate-400">
                    {% if b.unit == 'usd' %}${% endif %}{{ "%.2f"|format(b.used) }} / {% if b.unit == 'usd' %}${% endif %}{{ "%.0f"|format(b.limit) }} ({{ b.percent }}%)
                </span>
            </div>
            {% set color = 'bg-emerald-500' %}
            {% if b.percent >= 90 %}{% set color = 'bg-rose-500' %}
            {% elif b.percent >= 70 %}{% set color = 'bg-amber-500' %}
            {% elif b.percent >= 50 %}{% set color = 'bg-sky-500' %}
            {% endif %}
            <div class="w-full bg-slate-800 rounded-full h-2 overflow-hidden">
                <div class="h-2 {{ color }} transition-all" style="width: {{ b.percent }}%"></div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Breakdown tables -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
    <section>
        <h2 class="text-sm font-semibold text-slate-400 uppercase mb-4">By Provider (30d)</h2>
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <table class="min-w-full divide-y divide-slate-800 text-sm">
                <thead class="bg-slate-800/50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Provider</th>
                        <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Requests</th>
                        <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Cost</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                    {% for row in by_provider %}
                    <tr>
                        <td class="px-4 py-2 text-white">{{ row.provider }}</td>
                        <td class="px-4 py-2 text-right text-slate-300">{{ row.count }}</td>
                        <td class="px-4 py-2 text-right font-mono text-slate-300">${{ "%.4f"|format(row.cost) }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="3" class="px-4 py-6 text-center text-slate-500">No data</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section>
        <h2 class="text-sm font-semibold text-slate-400 uppercase mb-4">By Tier (30d)</h2>
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <table class="min-w-full divide-y divide-slate-800 text-sm">
                <thead class="bg-slate-800/50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Tier</th>
                        <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Requests</th>
                        <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Cost</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                    {% for row in by_tier %}
                    <tr>
                        <td class="px-4 py-2">
                            <span class="inline-flex px-2 py-0.5 text-xs rounded-full
                                {% if row.tier == 'premium' %}bg-fuchsia-900/50 text-fuchsia-300 border border-fuchsia-800
                                {% else %}bg-sky-900/50 text-sky-300 border border-sky-800{% endif %}">
                                {{ row.tier }}
                            </span>
                        </td>
                        <td class="px-4 py-2 text-right text-slate-300">{{ row.count }}</td>
                        <td class="px-4 py-2 text-right font-mono text-slate-300">${{ "%.4f"|format(row.cost) }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="3" class="px-4 py-6 text-center text-slate-500">No data</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>

<!-- Top expensive -->
<section class="mb-10">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-4">Top 10 Most Expensive (30d)</h2>
    <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
        <table class="min-w-full divide-y divide-slate-800 text-sm">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Time</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Tier</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Query</th>
                    <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Cost</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
                {% for item in top %}
                <tr class="hover:bg-slate-800/30 cursor-pointer" onclick="window.location='/history/{{ item.request_id }}'">
                    <td class="px-4 py-2 text-slate-400 font-mono text-xs whitespace-nowrap">{{ item.created_at.strftime('%m-%d %H:%M') if item.created_at else '—' }}</td>
                    <td class="px-4 py-2 text-slate-400">{{ item.tier }}</td>
                    <td class="px-4 py-2 text-slate-300 max-w-md truncate">{{ item.claim or item.query or '—' }}</td>
                    <td class="px-4 py-2 text-right font-mono text-slate-300">${{ "%.4f"|format(item.cost_usd|float) }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4" class="px-4 py-6 text-center text-slate-500">No data</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endblock %}