{% extends "base.html" %}

{% block title %}Request {{ item.request_id[:8] }} — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <a href="/history" class="text-sm text-slate-400 hover:text-white">← Back to history</a>
    {% if item.endpoint == '/v1/gather' and item.raw_response %}
    <button
        hx-post="/api/archive/promote/{{ item.request_id }}"
        hx-headers='{"Authorization": "Bearer dashboard-ui"}'
        hx-swap="outerHTML"
        hx-confirm="Promote this gather to the permanent archive?"
        class="text-xs px-3 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-md transition">
        📥 Promote to archive
    </button>
    {% endif %}
</div>

<div class="mb-6">
    <h1 class="text-2xl font-bold text-white font-mono">{{ item.request_id }}</h1>
    <p class="mt-1 text-sm text-slate-400">
        {{ item.created_at.strftime('%Y-%m-%d %H:%M:%S UTC') if item.created_at else '—' }}
    </p>
</div>

<!-- Summary -->
<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-4">
        <p class="text-xs uppercase text-slate-400">Tier</p>
        <p class="mt-1 text-lg font-semibold
            {% if item.tier == 'premium' %}text-fuchsia-400{% else %}text-sky-400{% endif %}">
            {{ item.tier }}
        </p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4">
        <p class="text-xs uppercase text-slate-400">Endpoint</p>
        <p class="mt-1 text-sm font-mono text-white">{{ item.endpoint }}</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4">
        <p class="text-xs uppercase text-slate-400">Duration</p>
        <p class="mt-1 text-lg font-semibold text-white">
            {{ '%.1fs'|format(item.duration_ms/1000) if item.duration_ms else '—' }}
        </p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4">
        <p class="text-xs uppercase text-slate-400">Status</p>
        <p class="mt-1 text-lg font-semibold
            {% if item.status_code and item.status_code < 400 %}text-emerald-400
            {% elif item.status_code %}text-rose-400{% else %}text-slate-400{% endif %}">
            {{ item.status_code or '—' }}
        </p>
    </div>
</div>

<!-- Claim/query -->
{% if item.claim or item.query %}
<section class="mb-6">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Query / Claim</h2>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4 text-slate-200">
        {{ item.claim or item.query }}
    </div>
</section>
{% endif %}

<!-- Stages (gather only) -->
{% if item.stages %}
<section class="mb-6">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Pipeline Stages</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">Stage</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Success</th>
                    <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Items</th>
                    <th class="px-4 py-2 text-right text-xs font-semibold text-slate-300 uppercase">Duration</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
                {% for stage in item.stages %}
                <tr>
                    <td class="px-4 py-2 text-white font-medium">{{ stage.stage }}</td>
                    <td class="px-4 py-2">
                        {% if stage.success %}
                            <span class="text-emerald-400">✓</span>
                        {% else %}
                            <span class="text-rose-400">✗ {{ stage.error or '' }}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-2 text-right text-slate-300">{{ stage.items_processed }}</td>
                    <td class="px-4 py-2 text-right font-mono text-xs text-slate-300">
                        {{ '%.0f'|format(stage.duration_ms) }}ms
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endif %}

<!-- Raw data -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    {% if item.raw_request %}
    <section>
        <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Request</h2>
        <pre class="bg-slate-900 rounded-xl border border-slate-800 p-4 text-xs text-slate-300 overflow-x-auto scrollbar-thin">{{ item.raw_request | tojson(indent=2) }}</pre>
    </section>
    {% endif %}
    {% if item.raw_response %}
    <section>
        <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Response</h2>
        <pre class="bg-slate-900 rounded-xl border border-slate-800 p-4 text-xs text-slate-300 overflow-x-auto scrollbar-thin max-h-96">{{ item.raw_response | tojson(indent=2) }}</pre>
    </section>
    {% endif %}
</div>

{% if item.error %}
<section class="mt-6">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Error</h2>
    <div class="bg-rose-900/20 border border-rose-800 rounded-xl p-4 text-rose-300 text-sm">{{ item.error }}</div>
</section>
{% endif %}
{% endblock %}