{% extends "base.html" %}

{% block title %}understudy - Report{% endblock %}

{% block content %}
<h1 class="mb-3">Evaluation Report</h1>

<!-- Overview Section -->
<div class="section-header">Overview</div>
<div class="metrics-grid">
    <div class="metric-card">
        <div class="metric-value">{{ summary.total_runs }}</div>
        <div class="metric-label">Total Runs</div>
    </div>
    <div class="metric-card">
        <div class="metric-value" style="color: {% if summary.pass_rate >= 0.8 %}var(--success){% elif summary.pass_rate >= 0.5 %}var(--warning){% else %}var(--danger){% endif %}">
            {{ "%.1f"|format(summary.pass_rate * 100) }}%
        </div>
        <div class="metric-label">Pass Rate</div>
    </div>
    <div class="metric-card">
        <div class="metric-value">{{ failed_runs|length }}</div>
        <div class="metric-label">Failed Runs</div>
    </div>
</div>

<!-- Efficiency Metrics Section -->
<div class="section-header">Efficiency Metrics</div>
<div class="metrics-grid">
    <div class="metric-card">
        <div class="metric-value">{{ "%.1f"|format(summary.avg_turns) }}</div>
        <div class="metric-label">Avg Turns/Run</div>
    </div>
    <div class="metric-card">
        <div class="metric-value">{{ "%.0f"|format(summary.avg_latency_per_turn_ms) }}ms</div>
        <div class="metric-label">Avg Latency/Turn</div>
    </div>
    <div class="metric-card">
        <div class="metric-value">{{ "%.1f"|format(summary.total_latency_ms / 1000) }}s</div>
        <div class="metric-label">Total Agent Time</div>
    </div>
</div>
<div class="metrics-grid">
    <div class="metric-card">
        <div class="metric-value">{{ "%.0f"|format(summary.avg_input_tokens_per_turn) }}</div>
        <div class="metric-label">Avg Input Tokens/Turn</div>
    </div>
    <div class="metric-card">
        <div class="metric-value">{{ "%.0f"|format(summary.avg_output_tokens_per_turn) }}</div>
        <div class="metric-label">Avg Output Tokens/Turn</div>
    </div>
    <div class="metric-card">
        <div class="metric-value">{{ "%.0f"|format(summary.avg_thinking_tokens_per_turn) }}</div>
        <div class="metric-label">Avg Thinking Tokens/Turn</div>
    </div>
</div>

<!-- Quality Metrics Section (Judge Results) -->
{% if summary.judge_stats %}
<div class="section-header">Quality Metrics (LLM Judges)</div>
<div class="card">
    <table>
        <thead>
            <tr>
                <th>Rubric</th>
                <th>Pass Rate</th>
                <th>Avg Agreement</th>
                <th>Evaluated</th>
            </tr>
        </thead>
        <tbody>
            {% for rubric, stats in summary.judge_stats.items() %}
            <tr>
                <td>{{ rubric }}</td>
                <td>
                    <span class="badge {% if stats.pass_rate >= 0.8 %}badge-success{% elif stats.pass_rate >= 0.5 %}badge-warning{% else %}badge-danger{% endif %}">
                        {{ "%.0f"|format(stats.pass_rate * 100) }}%
                    </span>
                </td>
                <td>{{ "%.0f"|format(stats.avg_agreement * 100) }}%</td>
                <td>{{ stats.count }} runs</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Failed Runs Section -->
{% if failed_runs %}
<div class="section-header" style="color: var(--danger);">Failed Runs</div>
{% for run in failed_runs %}
<div class="card failure-card">
    <div class="card-header">
        <a href="{% if static_mode %}runs/{{ run.run_id }}.html{% else %}/run/{{ run.run_id }}{% endif %}">{{ run.scene_id }}</a>
        <span class="badge badge-danger">FAIL</span>
    </div>
    <div class="failure-meta">
        <span><strong>Checks failed:</strong> {{ run.failed_checks|join(", ") }}</span>
        <span class="text-muted">{{ run.turn_count }} turns · {{ run.terminal_state or "none" }}</span>
    </div>
    {% if run.analysis %}
    <div class="failure-analysis">
        <strong>Analysis:</strong> {{ run.analysis }}
    </div>
    {% endif %}
</div>
{% endfor %}
{% endif %}

<!-- Tool Usage & Terminal States -->
<div class="two-column-grid">
    {% if summary.tool_usage %}
    <div class="card">
        <div class="card-header">Tool Usage</div>
        <table>
            <thead>
                <tr>
                    <th>Tool</th>
                    <th>Total</th>
                    <th>Avg/Run</th>
                </tr>
            </thead>
            <tbody>
                {% for tool, count in summary.tool_usage.items() %}
                <tr>
                    <td><code>{{ tool }}</code></td>
                    <td>{{ count }}</td>
                    <td>{{ "%.1f"|format(count / summary.total_runs) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    {% if summary.terminal_states %}
    <div class="card">
        <div class="card-header">Terminal States</div>
        <table>
            <thead>
                <tr>
                    <th>State</th>
                    <th>Count</th>
                    <th>%</th>
                </tr>
            </thead>
            <tbody>
                {% for state, count in summary.terminal_states.items() %}
                <tr>
                    <td><span class="badge badge-info">{{ state }}</span></td>
                    <td>{{ count }}</td>
                    <td>{{ "%.0f"|format(count / summary.total_runs * 100) }}%</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

{% if summary.agents %}
<div class="card">
    <div class="card-header">Agent Invocations</div>
    <table>
        <thead>
            <tr>
                <th>Agent</th>
                <th>Invocations</th>
            </tr>
        </thead>
        <tbody>
            {% for agent, count in summary.agents.items() %}
            <tr>
                <td><code>{{ agent }}</code></td>
                <td>{{ count }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- All Runs Section -->
<div class="card">
    <div class="card-header" style="cursor: pointer;" onclick="document.getElementById('runs-table').classList.toggle('collapsed');">
        All Runs <span style="float: right;">▼</span>
    </div>
    <div id="runs-table">
        <table>
            <thead>
                <tr>
                    <th>Scene</th>
                    <th>Status</th>
                    <th>Terminal State</th>
                    <th>Turns</th>
                    <th>Tools</th>
                    <th>Tags</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody>
                {% for run in runs %}
                <tr>
                    <td>
                        <a href="{% if static_mode %}runs/{{ run.run_id }}.html{% else %}/run/{{ run.run_id }}{% endif %}">{{ run.scene_id }}</a>
                    </td>
                    <td>
                        {% if run.passed %}
                        <span class="badge badge-success">PASS</span>
                        {% else %}
                        <span class="badge badge-danger">FAIL</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge badge-info">{{ run.terminal_state or "none" }}</span>
                    </td>
                    <td>{{ run.turn_count }}</td>
                    <td>{{ run.tools_called|length }}</td>
                    <td>
                        {% for key, value in run.tags.items() %}
                        <span class="badge" style="background: #e2e3e5; color: #383d41;">{{ key }}={{ value }}</span>
                        {% endfor %}
                    </td>
                    <td class="text-muted">{{ run.timestamp }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="text-muted">No runs found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .section-header {
        font-size: 1.2rem;
        font-weight: 600;
        margin: 25px 0 15px 0;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 8px;
    }
    .failure-card {
        border-left: 4px solid var(--danger);
    }
    .failure-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }
    .failure-analysis {
        background: var(--bg-primary);
        padding: 12px;
        border-radius: 4px;
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .two-column-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 20px;
    }
    #runs-table.collapsed {
        display: none;
    }
</style>
{% endblock %}