{% extends "base.html" %}
{% block title %}Compare — {{ 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> /
        <a href="/projects/{{ project.id }}" class="hover:underline">{{ project.name }}</a> /
        Compare
    </p>
    <h1 class="text-2xl font-semibold">Compare Evaluations</h1>
</div>

<!-- Evaluation summary cards -->
<div class="grid gap-4 sm:grid-cols-{{ 1 + comparison.comparisons | length }} mb-6">
    <!-- Baseline card -->
    <div class="bg-white rounded-xl border-2 border-indigo-200 p-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded">BASELINE</span>
            <span class="text-sm font-medium">#{{ comparison.baseline.id }}</span>
        </div>
        {% if comparison.baseline.average_score is not none %}
            {% set pct = (comparison.baseline.average_score * 100) | int %}
            <p class="text-2xl font-bold {% if pct >= 80 %}text-green-600{% elif pct >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">{{ pct }}%</p>
        {% endif %}
        <p class="text-xs text-gray-400 mt-1">{{ comparison.baseline.suite_name }}</p>
        {% if comparison.baseline.tags %}
        <div class="flex flex-wrap gap-1 mt-2">
            {% for k, v in comparison.baseline.tags.items() %}
            <span class="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">{{ k }}: {{ v }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <!-- Comparison cards -->
    {% for comp in comparison.comparisons %}
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="text-sm font-medium">#{{ comp.id }}</span>
            {% if comp.average_score is not none and comparison.baseline.average_score is not none %}
                {% set delta = ((comp.average_score - comparison.baseline.average_score) * 100) | int %}
                {% if delta > 0 %}
                <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded">+{{ delta }}%</span>
                {% elif delta < 0 %}
                <span class="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded">{{ delta }}%</span>
                {% else %}
                <span class="text-xs font-medium text-gray-500 bg-gray-50 px-2 py-0.5 rounded">0%</span>
                {% endif %}
            {% endif %}
        </div>
        {% if comp.average_score is not none %}
            {% set pct = (comp.average_score * 100) | int %}
            <p class="text-2xl font-bold {% if pct >= 80 %}text-green-600{% elif pct >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">{{ pct }}%</p>
        {% endif %}
        <p class="text-xs text-gray-400 mt-1">{{ comp.suite_name }}</p>
        {% if comp.tags %}
        <div class="flex flex-wrap gap-1 mt-2">
            {% for k, v in comp.tags.items() %}
            <span class="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">{{ k }}: {{ v }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<!-- Summary stats -->
<div class="grid gap-4 sm:grid-cols-3 mb-6">
    <div class="bg-green-50 rounded-xl border border-green-100 p-4 text-center">
        <p class="text-2xl font-bold text-green-600">{{ comparison.summary.improved }}</p>
        <p class="text-xs text-green-700 mt-1">Improved</p>
    </div>
    <div class="bg-red-50 rounded-xl border border-red-100 p-4 text-center">
        <p class="text-2xl font-bold text-red-600">{{ comparison.summary.regressed }}</p>
        <p class="text-xs text-red-700 mt-1">Regressed</p>
    </div>
    <div class="bg-gray-50 rounded-xl border border-gray-100 p-4 text-center">
        <p class="text-2xl font-bold text-gray-500">{{ comparison.summary.unchanged }}</p>
        <p class="text-xs text-gray-600 mt-1">Unchanged</p>
    </div>
</div>

<!-- Question comparison table -->
{% if comparison.questions %}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6">
    <h2 class="text-sm font-semibold text-gray-600 px-5 py-3 border-b border-gray-100">Questions</h2>
    <div class="divide-y divide-gray-100">
        {% for q in comparison.questions %}
        <details class="group">
            <summary class="flex items-center justify-between px-5 py-3 cursor-pointer hover:bg-gray-50 list-none">
                <div class="flex items-center gap-3 min-w-0 flex-1">
                    <!-- Baseline score badge -->
                    {% set bpct = (q.baseline_result.overall_score * 100) | int %}
                    <span class="shrink-0 w-8 h-6 rounded text-xs flex items-center justify-center font-semibold
                        {% if bpct >= 80 %}bg-green-100 text-green-700
                        {% elif bpct >= 50 %}bg-yellow-100 text-yellow-700
                        {% else %}bg-red-100 text-red-700{% endif %}">
                        {{ bpct }}
                    </span>
                    <p class="text-sm truncate text-gray-700">{{ q.question }}</p>
                </div>
                <div class="flex gap-2 shrink-0 ml-4">
                    {% for cr in q.comparison_results %}
                        {% if cr %}
                            {% set delta = (cr.score_delta * 100) | int %}
                            {% if delta > 5 %}
                            <span class="text-xs px-2 py-0.5 rounded font-medium bg-green-100 text-green-700">+{{ delta }}%</span>
                            {% elif delta < -5 %}
                            <span class="text-xs px-2 py-0.5 rounded font-medium bg-red-100 text-red-700">{{ delta }}%</span>
                            {% else %}
                            <span class="text-xs px-2 py-0.5 rounded font-medium bg-gray-100 text-gray-500">{{ delta }}%</span>
                            {% endif %}
                        {% else %}
                        <span class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-400">--</span>
                        {% endif %}
                    {% endfor %}
                </div>
            </summary>

            <!-- Expanded diff view -->
            <div class="px-5 pb-4 pt-2 bg-gray-50 text-sm">
                <div class="grid gap-4 sm:grid-cols-2">
                    <!-- Baseline column -->
                    <div>
                        <p class="text-xs font-semibold text-indigo-600 mb-2">Baseline #{{ comparison.baseline.id }}</p>
                        <div class="space-y-2">
                            <div><span class="font-medium">Answer:</span> {{ q.baseline_result.answer }}</div>
                            {% if q.baseline_result.expected_answer %}
                            <div><span class="font-medium">Expected:</span> {{ q.baseline_result.expected_answer }}</div>
                            {% endif %}
                            <div class="space-y-1 mt-2">
                                {% for m in q.baseline_result.metrics %}
                                <div class="flex gap-2 items-start">
                                    <span class="text-xs px-1.5 py-0.5 rounded shrink-0 {% if m.passed %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                                        {{ "%.2f"|format(m.score) }}
                                    </span>
                                    <span class="text-xs text-gray-500"><span class="font-medium text-gray-700">{{ m.name }}:</span> {{ m.reason }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- Comparison column(s) -->
                    {% for cr in q.comparison_results %}
                    {% if cr %}
                    <div>
                        <p class="text-xs font-semibold text-gray-600 mb-2">
                            #{{ cr.evaluation_id }}
                            {% set delta = (cr.score_delta * 100) | int %}
                            {% if delta > 5 %}
                            <span class="text-green-600 ml-1">+{{ delta }}%</span>
                            {% elif delta < -5 %}
                            <span class="text-red-600 ml-1">{{ delta }}%</span>
                            {% endif %}
                        </p>
                        <div class="space-y-2">
                            <div><span class="font-medium">Answer:</span> {{ cr.answer }}</div>
                            {% if cr.expected_answer %}
                            <div><span class="font-medium">Expected:</span> {{ cr.expected_answer }}</div>
                            {% endif %}
                            <div class="space-y-1 mt-2">
                                {% for m in cr.metrics %}
                                <div class="flex gap-2 items-start">
                                    <span class="text-xs px-1.5 py-0.5 rounded shrink-0 {% if m.passed %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                                        {{ "%.2f"|format(m.score) }}
                                    </span>
                                    {% set md = (m.score_delta * 100) | int %}
                                    {% if md > 5 %}
                                    <span class="text-xs text-green-600">(+{{ md }}%)</span>
                                    {% elif md < -5 %}
                                    <span class="text-xs text-red-600">({{ md }}%)</span>
                                    {% endif %}
                                    <span class="text-xs text-gray-500"><span class="font-medium text-gray-700">{{ m.name }}:</span> {{ m.reason }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="flex items-center justify-center text-gray-400 text-sm">Not evaluated</div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </details>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- New questions (in comparison but not baseline) -->
{% if comparison.new_questions %}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <h2 class="text-sm font-semibold text-gray-600 px-5 py-3 border-b border-gray-100">New Questions (not in baseline)</h2>
    <div class="divide-y divide-gray-100">
        {% for q in comparison.new_questions %}
        <div class="px-5 py-3">
            <p class="text-sm text-gray-700">{{ q.question }}</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% endblock %}