{% extends "base.html" %}

{% block head %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Breadcrumb -->
    <nav class="flex" aria-label="Breadcrumb">
        <ol role="list" class="flex items-center space-x-4">
            <li>
                <div>
                    <a href="/" class="text-gray-400 hover:text-gray-500">
                        <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="sr-only">Home</span>
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 20 20"
                        aria-hidden="true">
                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                    </svg>
                    <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                        aria-current="page">Run {{ run.id[:8] }}</a>
                </div>
            </li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between mb-8">
        <div class="min-w-0 flex-1">
            <h2
                class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:truncate sm:text-3xl sm:tracking-tight">
                Run Details: #{{ run.id[:8] }}
            </h2>
            <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400">
                <span>{{ run.timestamp.strftime('%Y-%m-%d %H:%M:%S') if run.timestamp else 'N/A' }}</span>
                <span class="mx-2">•</span>
                <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium
                    {% if run.status == 'completed' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                    {% elif run.status == 'running' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                    {% elif run.status == 'failed' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300{% endif %}">
                    {{ run.status|default('Pending')|title }}
                </span>
            </div>
        </div>
        <div class="mt-4 flex md:ml-4 md:mt-0 space-x-2">
            <!-- Export Dropdown -->
            <div class="relative inline-block text-left" x-data="{ open: false }">
                <button @click="open = !open" type="button"
                    class="inline-flex items-center rounded-md bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    Export
                    <svg class="ml-2 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>

                <div x-show="open" @click.away="open = false"
                    class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5">
                    <div class="py-1">
                        <a href="/runs/{{ run.id }}/export?format=csv"
                            class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">CSV</a>
                        <a href="/runs/{{ run.id }}/export?format=json"
                            class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">JSON</a>
                    </div>
                </div>
            </div>

            <a href="/"
                class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                Back to Home
            </a>
        </div>
    </div>

    <!-- Metrics Summary Cards -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-4">
        {% for metric, value in run.metrics_summary.items() %}
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500 capitalize">{{ metric }}</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ (value * 100)|round(1) }}%</dd>
        </div>
        {% endfor %}
    </div>

    <!-- Detailed Items Table -->
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-base font-semibold leading-6 text-gray-900">Detailed Interactions</h3>
            <p class="mt-1 text-sm text-gray-500">Review individual queries and their retrieval quality.</p>
        </div>
        <div class="border-t border-gray-200">
            <ul role="list" class="divide-y divide-gray-200">
                {% for item in items %}
                <li class="px-4 py-5 sm:px-6 hover:bg-gray-50 transition duration-150 ease-in-out"
                    x-data="{ open: false }">
                    <div class="flex items-center justify-between cursor-pointer" @click="open = !open">
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-indigo-600 truncate">{{ item.query }}</p>
                            <p class="mt-1 text-sm text-gray-500 truncate">{{ item.response[:100] }}...</p>
                        </div>
                        <div class="flex items-center space-x-4">
                            <!-- Playground Link (Stop propagation to prevent toggle) -->
                            <a href="/playground?query={{ item.query }}&response={{ item.response }}&contexts={{ item.retrieved_contexts|join('\n') }}"
                                @click.stop class="text-gray-400 hover:text-blue-600 transition-colors"
                                title="Open in Playground">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                                </svg>
                            </a>

                            {% if item.metrics.faithfulness is defined and item.metrics.faithfulness is not none %}
                            <div class="flex flex-col items-end">
                                <span class="text-xs text-gray-500">Faithfulness</span>
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset 
                                    {% if item.metrics.faithfulness > 0.8 %} bg-green-50 text-green-700 ring-green-600/20 
                                    {% elif item.metrics.faithfulness > 0.5 %} bg-yellow-50 text-yellow-700 ring-yellow-600/20 
                                    {% else %} bg-red-50 text-red-700 ring-red-600/20 {% endif %}">
                                    {{ (item.metrics.faithfulness * 100)|round(0) }}%
                                </span>
                            </div>
                            {% endif %}
                            <svg class="h-5 w-5 text-gray-400 transform transition-transform duration-200"
                                :class="{'rotate-180': open}" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>

                    <!-- Expanded Details -->
                    <div x-show="open" x-cloak class="mt-4 border-t border-gray-100 pt-4 space-y-4">
                        <div>
                            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Full Response</h4>
                            <p class="mt-1 text-sm text-gray-900 whitespace-pre-wrap">{{ item.response }}</p>
                        </div>

                        <div>
                            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Retrieved Contexts
                            </h4>
                            <ul class="mt-2 space-y-2">
                                {% for ctx in item.retrieved_contexts %}
                                <li
                                    class="bg-gray-50 rounded p-3 text-xs text-gray-700 font-mono border border-gray-200">
                                    {{ ctx }}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>

                        {% if item.metrics %}
                        <div>
                            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">All Metrics</h4>
                            <div class="mt-2 grid grid-cols-2 gap-4 sm:grid-cols-4">
                                {% for m_name, m_val in item.metrics.items() %}
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="block text-xs text-gray-500">{{ m_name }}</span>
                                    <span class="block text-sm font-medium text-gray-900">
                                        {% if m_val is number %}
                                        {{ m_val|round(3) }}
                                        {% else %}
                                        {{ m_val }}
                                        {% endif %}
                                    </span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}