{% extends "base.html" %}
{% block title %}{{ project.name }} — evalkit{% endblock %}
{% block content %}
<div class="mb-6">
    <p class="text-sm text-gray-400 mb-1"><a href="/" class="hover:underline">Projects</a> / {{ project.name }}</p>
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-semibold">{{ project.name }}</h1>
    </div>
    {% if project.description %}
    <p class="mt-1 text-sm text-gray-500">{{ project.description }}</p>
    {% endif %}
</div>

<!-- Tabs -->
<div class="flex border-b border-gray-200 mb-6">
    <a href="/projects/{{ project.id }}"
       class="px-5 py-2.5 text-sm font-medium border-b-2 border-indigo-600 text-indigo-600">
        Evaluations
    </a>
    <a href="/projects/{{ project.id }}/monitor"
       class="px-5 py-2.5 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">
        Traces
    </a>
</div>

{% if total > 0 %}
<!-- Score timeline chart -->
{% if completed | length >= 2 %}
<div class="bg-white rounded-xl border border-gray-200 p-5 mb-6">
    <h2 class="text-sm font-semibold text-gray-600 mb-3">Score Timeline</h2>
    <canvas id="scoreChart" height="80"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
    const ctx = document.getElementById('scoreChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for e in completed %}"#{{ e.id }}"{% if not loop.last %},{% endif %}{% endfor %}],
            datasets: [{
                label: 'Average Score',
                data: [{% for e in completed %}{{ "%.3f"|format(e.average_score) }}{% if not loop.last %},{% endif %}{% endfor %}],
                borderColor: '#6366f1',
                backgroundColor: 'rgba(99,102,241,0.1)',
                tension: 0.3,
                fill: true,
                pointRadius: 4,
            }]
        },
        options: {
            scales: { y: { min: 0, max: 1, ticks: { format: { style: 'percent' } } } },
            plugins: { legend: { display: false } }
        }
    });
</script>
{% endif %}

<!-- Evaluations table -->
<div x-data="{ selected: [] }" class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <!-- Compare button bar -->
    <div x-show="selected.length >= 2" x-cloak class="px-5 py-3 bg-indigo-50 border-b border-indigo-100 flex items-center justify-between">
        <span class="text-sm text-indigo-700" x-text="selected.length + ' evaluations selected'"></span>
        <a :href="'/projects/{{ project.id }}/compare?ids=' + selected.join(',') + '&baseline=' + Math.min(...selected)"
           class="bg-indigo-600 text-white text-xs px-4 py-2 rounded-lg hover:bg-indigo-700">
            Compare Selected
        </a>
    </div>
    <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
            <tr>
                <th class="px-3 py-3 w-8"></th>
                <th class="px-5 py-3 text-left">ID</th>
                <th class="px-5 py-3 text-left">Suite</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left">Score</th>
                <th class="px-5 py-3 text-left">Date</th>
                <th class="px-5 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            {% for ev in evaluations %}
            <tr class="hover:bg-gray-50">
                <td class="px-3 py-3 text-center">
                    {% if ev.status.value == 'complete' %}
                    <input type="checkbox" :value="{{ ev.id }}"
                           x-model.number="selected"
                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                    {% endif %}
                </td>
                <td class="px-5 py-3 text-gray-400">#{{ ev.id }}</td>
                <td class="px-5 py-3 font-medium">{{ ev.suite_name }}</td>
                <td class="px-5 py-3">
                    <span class="px-2 py-0.5 rounded-full text-xs font-medium
                        {% if ev.status.value == 'complete' %}bg-green-100 text-green-800
                        {% elif ev.status.value == 'running' %}bg-blue-100 text-blue-800
                        {% elif ev.status.value == 'failed' %}bg-red-100 text-red-800
                        {% else %}bg-gray-100 text-gray-600{% endif %}">
                        {{ ev.status.value }}
                    </span>
                </td>
                <td class="px-5 py-3">
                    {% if ev.average_score is not none %}
                        {% set score = (ev.average_score * 100) | int %}
                        <span class="font-semibold {% if score >= 80 %}text-green-600{% elif score >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">
                            {{ score }}%
                        </span>
                    {% else %}&mdash;{% endif %}
                </td>
                <td class="px-5 py-3 text-gray-400">{{ ev.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                <td class="px-5 py-3 text-right">
                    <a href="/evaluations/{{ ev.id }}" class="text-indigo-600 hover:underline text-xs">View</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if total_pages > 1 %}
<div class="flex items-center justify-between mt-4 text-sm">
    <span class="text-gray-500">{{ total }} evaluation{{ 's' if total != 1 }} — page {{ page }} of {{ total_pages }}</span>
    <div class="flex gap-1">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}" class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">Prev</a>
        {% endif %}
        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
            <span class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white font-medium">{{ p }}</span>
            {% elif p == 1 or p == total_pages or (p >= page - 1 and p <= page + 1) %}
            <a href="?page={{ p }}" class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">{{ p }}</a>
            {% elif p == 2 or p == total_pages - 1 %}
            <span class="px-2 py-1.5 text-gray-400">&hellip;</span>
            {% endif %}
        {% endfor %}
        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}" class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">Next</a>
        {% endif %}
    </div>
</div>
{% endif %}

{% else %}
<div class="text-center py-12 text-gray-400 bg-white rounded-xl border border-gray-200">
    <p class="text-3xl mb-3">&#127939;</p>
    <p class="font-medium">No evaluations yet</p>
    <p class="text-sm mt-1">Use the API or CLI to run your first evaluation.</p>
</div>
{% endif %}

<!-- Run via API section -->
<div id="run-section" class="mt-8 bg-indigo-50 rounded-xl border border-indigo-100 p-5">
    <h2 class="text-sm font-semibold text-indigo-700 mb-2">Run via REST API</h2>
    <pre class="bg-white rounded-lg border border-indigo-100 p-4 text-xs text-gray-700 overflow-x-auto">curl -X POST http://localhost:8000/api/v1/evaluate \
  -H "Content-Type: application/json" \
  -d '{
    "project_id": {{ project.id }},
    "suite": "rag_qa",
    "judge_provider": "openai",
    "test_cases": [
      {"question": "...", "context": ["..."], "answer": "..."}
    ]
  }'</pre>
</div>
{% endblock %}