{% extends "base.html" %}

{% block title %}SpecterQA — {{ run_id }}{% endblock %}

{% block content %}
<div class="breadcrumb">
    <a href="/">&larr; All Runs</a>
</div>

<!-- Run Header -->
<div class="run-header">
    <div class="run-header-top">
        <h1 class="run-title">{{ run_id }}</h1>
        {{ run.passed | status_badge }}
    </div>
    <div class="run-meta-grid">
        <div class="meta-item">
            <span class="meta-label">Product</span>
            <span class="meta-value">{{ run.product_name | default("—", true) }}</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Journey</span>
            <span class="meta-value">{{ run.scenario_name | default("—", true) }}</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Persona</span>
            <span class="meta-value">{{ run.persona_name | default("—", true) }}{% if run.persona_role %} ({{ run.persona_role }}){% endif %}</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Viewport</span>
            <span class="meta-value">
                {{ run.viewport_name | default("—", true) }}
                {% if run.viewport_size %}({{ run.viewport_size[0] }}x{{ run.viewport_size[1] }}){% endif %}
            </span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Duration</span>
            <span class="meta-value">{{ run.duration_seconds | default(0) | format_duration }}</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Cost</span>
            <span class="meta-value">{{ run.cost_usd | default(0) | format_cost }}</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Date</span>
            <span class="meta-value">{{ run._date_display }}</span>
        </div>
        {% if run.mock_level %}
        <div class="meta-item">
            <span class="meta-label">Mock Level</span>
            <span class="meta-value">{{ run.mock_level }}</span>
        </div>
        {% endif %}
    </div>
</div>

<!-- Download Links -->
<div class="actions-bar">
    {% if run._has_report %}
    <a href="/runs/{{ run_id }}/download/report.md" class="btn btn-secondary">
        Download report.md
    </a>
    {% endif %}
</div>

<!-- Steps Section -->
<section class="section">
    <h2>Steps</h2>
    {% set steps = run.step_reports | default([]) %}
    {% if steps %}
    <div class="steps-list">
        {% for step in steps %}
        <div class="step-card {% if step.passed %}step-pass{% else %}step-fail{% endif %}">
            <div class="step-header">
                <span class="step-number">
                    {% if step.passed %}
                        <span class="step-icon step-icon-pass" aria-label="Passed">&#10003;</span>
                    {% else %}
                        <span class="step-icon step-icon-fail" aria-label="Failed">&#10007;</span>
                    {% endif %}
                    Step {{ loop.index }}
                </span>
                <span class="step-id cell-mono">{{ step.step_id | default("") }}</span>
                <span class="step-mode badge badge-mode">{{ step.mode | default("browser") }}</span>
            </div>
            <div class="step-body">
                <p class="step-description">{{ step.description | default("No description") }}</p>

                {% if step.error %}
                <div class="step-error">
                    <strong>Error:</strong> {{ step.error }}
                </div>
                {% endif %}

                {% if step.notes %}
                <p class="step-notes"><em>{{ step.notes }}</em></p>
                {% endif %}

                <div class="step-stats">
                    <span>Duration: {{ step.duration_seconds | default(0) | format_duration }}</span>
                    {% if step.action_count is defined %}
                    <span>Actions: {{ step.action_count }}</span>
                    {% endif %}
                    {% if step.performance_ms is not none and step.performance_ms is defined %}
                    <span>Page load: {{ step.performance_ms | round(0) | int }}ms</span>
                    {% endif %}
                </div>

                {% if step.ux_observations is defined and step.ux_observations %}
                <div class="step-ux-observations">
                    <strong>UX Observations:</strong>
                    <ul>
                        {% for obs in step.ux_observations %}
                        <li>{{ obs }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% if step.actions_taken is defined and step.actions_taken %}
                <details class="step-actions-detail">
                    <summary>Actions taken ({{ step.actions_taken | length }})</summary>
                    <ol class="actions-list">
                        {% for action in step.actions_taken %}
                        <li class="cell-mono">{{ action | string | truncate(200) }}</li>
                        {% endfor %}
                    </ol>
                </details>
                {% endif %}

                {% if step.findings is defined and step.findings %}
                <div class="step-findings">
                    {% for finding in step.findings %}
                    <div class="finding-inline {{ finding.severity | default('low') | severity_class }}">
                        <span class="finding-severity">{{ finding.severity | default('low') | upper }}</span>
                        <span class="finding-category">{{ finding.category | default('') }}</span>
                        {{ finding.description | default('') }}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Screenshots for this step -->
                {% if step.screenshots is defined and step.screenshots %}
                <div class="step-screenshots">
                    {% for ss_path in step.screenshots %}
                    {% set ss_filename = ss_path.split('/')[-1] %}
                    {% if ss_filename in run._screenshots_available %}
                    <a href="/runs/{{ run_id }}/screenshots/{{ ss_filename }}"
                       class="screenshot-thumb"
                       target="_blank"
                       title="Click to view full screenshot">
                        <img src="/runs/{{ run_id }}/screenshots/{{ ss_filename }}"
                             alt="Screenshot for step {{ loop.index }}"
                             loading="lazy">
                    </a>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="empty-state-inline">No step data available.</p>
    {% endif %}
</section>

<!-- Findings Section -->
{% if run._findings_by_severity %}
<section class="section">
    <h2>Findings</h2>
    {% for severity, findings in run._findings_by_severity.items() %}
    <div class="findings-group">
        <h3 class="findings-severity-heading {{ severity | severity_class }}">
            {{ severity | upper }} ({{ findings | length }})
        </h3>
        {% for finding in findings %}
        <div class="finding-card {{ severity | severity_class }}">
            <div class="finding-header">
                <span class="finding-category-badge">{{ finding.category | default("general") }}</span>
                <span class="finding-step cell-mono">Step: {{ finding.step_id | default("—") }}</span>
            </div>
            <p class="finding-description">{{ finding.description | default("No description") }}</p>
            {% if finding.evidence %}
            <p class="finding-evidence cell-mono">Evidence: {{ finding.evidence }}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</section>
{% endif %}

<!-- Cost Breakdown -->
{% if run.cost_summary %}
<section class="section">
    <h2>Cost Breakdown</h2>
    <div class="cost-summary">
        <div class="cost-overview">
            <span>Total: <strong>{{ run.cost_usd | default(0) | format_cost }}</strong></span>
            {% if run.cost_summary.budget_limit_usd is defined %}
            <span>Budget: {{ run.cost_summary.budget_limit_usd | format_cost }}</span>
            {% endif %}
            {% if run.cost_summary.budget_remaining_usd is defined %}
            <span>Remaining: {{ run.cost_summary.budget_remaining_usd | format_cost }}</span>
            {% endif %}
            {% if run.cost_summary.call_count is defined %}
            <span>API Calls: {{ run.cost_summary.call_count }}</span>
            {% endif %}
        </div>

        {% set calls_by_model = run.cost_summary.get("calls_by_model", {}) %}
        {% set cost_by_model = run.cost_summary.get("cost_by_model", {}) %}
        {% if calls_by_model %}
        <table class="cost-table">
            <thead>
                <tr>
                    <th>Model</th>
                    <th>Calls</th>
                    <th>Cost</th>
                </tr>
            </thead>
            <tbody>
                {% for model, count in calls_by_model.items() %}
                <tr>
                    <td class="cell-mono">{{ model }}</td>
                    <td>{{ count }}</td>
                    <td class="cell-mono">{{ cost_by_model.get(model, 0) | format_cost }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}
    </div>
</section>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
(function() {
    // Simple lightbox for screenshots
    document.querySelectorAll('.screenshot-thumb').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var overlay = document.createElement('div');
            overlay.className = 'lightbox-overlay';
            overlay.setAttribute('role', 'dialog');
            overlay.setAttribute('aria-label', 'Screenshot preview');

            var img = document.createElement('img');
            img.src = this.href;
            img.className = 'lightbox-img';
            img.alt = this.querySelector('img').alt;

            var close = document.createElement('button');
            close.className = 'lightbox-close';
            close.textContent = '\u00D7';
            close.setAttribute('aria-label', 'Close preview');

            overlay.appendChild(close);
            overlay.appendChild(img);
            document.body.appendChild(overlay);

            function dismiss() {
                document.body.removeChild(overlay);
                document.removeEventListener('keydown', onKey);
            }
            function onKey(ev) {
                if (ev.key === 'Escape') dismiss();
            }

            overlay.addEventListener('click', function(ev) {
                if (ev.target === overlay || ev.target === close) dismiss();
            });
            document.addEventListener('keydown', onKey);
        });
    });
})();
</script>
{% endblock %}