{% extends "base.html" %}

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

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Request History</h1>
    <p class="mt-1 text-sm text-slate-400">Last {{ filters.hours }} hours — {{ items|length }} results</p>
</div>

<!-- Filters -->
<form method="get" class="bg-slate-900 rounded-xl border border-slate-800 p-4 mb-6">
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
        <div>
            <label class="block text-xs text-slate-400 mb-1">Tier</label>
            <select name="tier" class="w-full bg-slate-800 text-white text-sm rounded-md border border-slate-700 px-3 py-2">
                <option value="">All</option>
                <option value="free" {% if filters.tier == 'free' %}selected{% endif %}>Free</option>
                <option value="premium" {% if filters.tier == 'premium' %}selected{% endif %}>Premium</option>
            </select>
        </div>
        <div>
            <label class="block text-xs text-slate-400 mb-1">Provider</label>
            <input type="text" name="provider" value="{{ filters.provider }}" placeholder="any"
                   class="w-full bg-slate-800 text-white text-sm rounded-md border border-slate-700 px-3 py-2">
        </div>
        <div>
            <label class="block text-xs text-slate-400 mb-1">Endpoint</label>
            <input type="text" name="endpoint" value="{{ filters.endpoint }}" placeholder="/v1/gather"
                   class="w-full bg-slate-800 text-white text-sm rounded-md border border-slate-700 px-3 py-2">
        </div>
        <div>
            <label class="block text-xs text-slate-400 mb-1">Window (hours)</label>
            <select name="hours" class="w-full bg-slate-800 text-white text-sm rounded-md border border-slate-700 px-3 py-2">
                {% for h in [1, 6, 24, 72, 168, 720] %}
                <option value="{{ h }}" {% if filters.hours == h %}selected{% endif %}>{{ h }}h</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-md transition">
            Apply
        </button>
    </div>
</form>

<!-- Table -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-slate-800">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Time</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Tier</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Endpoint</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Provider</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Query</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-300 uppercase">Results</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-300 uppercase">Duration</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-300 uppercase">Cost</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-slate-300 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800 text-sm">
                {% for item in items %}
                <tr class="hover:bg-slate-800/30 cursor-pointer" onclick="window.location='/history/{{ item.request_id }}'">
                    <td class="px-4 py-3 text-slate-400 font-mono text-xs whitespace-nowrap">
                        {{ item.created_at.strftime('%m-%d %H:%M:%S') if item.created_at else '—' }}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex px-2 py-0.5 text-xs rounded-full
                            {% if item.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 %}">
                            {{ item.tier }}
                        </span>
                    </td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-300">{{ item.endpoint }}</td>
                    <td class="px-4 py-3 text-slate-400">{{ item.provider or '—' }}</td>
                    <td class="px-4 py-3 text-slate-300 max-w-xs truncate">{{ item.claim or item.query or '—' }}</td>
                    <td class="px-4 py-3 text-right text-slate-300">{{ item.results_count if item.results_count is not none else '—' }}</td>
                    <td class="px-4 py-3 text-right font-mono text-xs
                        {% if item.duration_ms and item.duration_ms > 30000 %}text-amber-400
                        {% elif item.duration_ms and item.duration_ms > 60000 %}text-rose-400
                        {% else %}text-slate-300{% endif %}">
                        {{ '%.1fs'|format(item.duration_ms/1000) if item.duration_ms else '—' }}
                    </td>
                    <td class="px-4 py-3 text-right font-mono text-xs text-slate-400">
                        {% if item.cost_usd %}${{ '%.4f'|format(item.cost_usd|float) }}{% else %}—{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if item.status_code and item.status_code < 400 %}
                            <span class="text-emerald-400">✓</span>
                        {% elif item.status_code %}
                            <span class="text-rose-400" title="HTTP {{ item.status_code }}">✗</span>
                        {% else %}
                            <span class="text-slate-500">?</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="9" class="px-4 py-12 text-center text-slate-500">No requests in the selected window.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}