{% extends "base.html" %}
{% block title %}Overview · shipgate{% endblock %}
{% block content %}
    <div class="space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold tracking-tight">Overview</h1>
                {% if run %}
                    <p class="mt-1 text-sm text-muted">
                        Run <code class="font-mono text-xs">{{ run.id[:8] }}</code>
                        · {{ run.branch }}
                        · suite <code class="font-mono text-xs">{{ run.suite_id }}</code>
                        ·
                        <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {% if run.status.value == 'failed' %}bg-red-100 text-red-800 {% elif run.status.value == 'succeeded' %}bg-emerald-100 text-emerald-800 {% elif run.status.value in ('queued', 'running') %}bg-sky-100 text-sky-800 {% else %}bg-stone-200 text-stone-700{% endif %}">
                            {{ run.status.value }}
                        </span>
                    </p>
                {% endif %}
            </div>
            <a class="inline-flex rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-brand-dark"
               href="/runs/new">New run</a>
        </div>
        {% if run_missing %}
            <div class="rounded-xl border border-dashed border-line bg-surface px-6 py-10 text-center">
                <h2 class="text-lg font-semibold">Run not found</h2>
                <p class="mt-2 text-muted">No run matches this id. It may have been pruned or the link is stale.</p>
                {% if latest_run %}
                    <p class="mt-4"><a class="inline-flex rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white"
   href="/?run_id={{ latest_run.id }}">View latest run</a></p>
                {% else %}
                    <p class="mt-4"><a class="inline-flex rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white"
   href="/runs/new">Start a run</a></p>
                {% endif %}
            </div>
        {% elif not run %}
            <div class="rounded-xl border border-dashed border-line bg-surface px-6 py-10 text-center">
                <h2 class="text-lg font-semibold">No runs yet</h2>
                <p class="mt-2 text-muted">Start a suite run to see severity counts, check breakdowns, and file hotspots.</p>
                <p class="mt-4"><a class="inline-flex rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white"
   href="/runs/new">Start a run</a></p>
            </div>
        {% else %}
            {% if run.status.value == "failed" and run.error_message %}
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-800">{{ run.error_message }}</div>
            {% endif %}
            {% if run.status.value in ("queued", "running") %}
                {% include "partials/run_progress.html" %}
            {% endif %}
            {% set sev = run.summary.by_severity if run.summary else {} %}
            {% set findings_base = "/runs/" ~ run.id ~ "/findings" %}
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
                <a href="{{ findings_base }}"
                   class="block rounded-xl border border-line bg-surface p-4 no-underline hover:border-brand">
                    <div class="text-sm text-muted">Total findings</div>
                    <div class="mt-1 text-2xl font-bold">{{ run.summary.finding_count if run.summary else 0 }}</div>
                    {% if deltas %}
                        <span class="mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {% if deltas.total > 0 %}bg-red-100 text-red-800{% elif deltas.total < 0 %}bg-emerald-100 text-emerald-800{% else %}bg-stone-200 text-stone-600{% endif %}">
                            {% if deltas.total > 0 %}+{% endif %}{{ deltas.total }} vs previous
                        </span>
                    {% endif %}
                </a>
                <a href="{{ findings_base }}?severity=error"
                   class="block rounded-xl border border-line bg-surface p-4 no-underline hover:border-red-300">
                    <div class="text-sm text-muted">Errors</div>
                    <div class="mt-1 text-2xl font-bold text-red-700">{{ sev.get('error', 0) }}</div>
                    {% if deltas %}
                        <span class="mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {% if deltas.error > 0 %}bg-red-100 text-red-800{% elif deltas.error < 0 %}bg-emerald-100 text-emerald-800{% else %}bg-stone-200 text-stone-600{% endif %}">
                            {% if deltas.error > 0 %}+{% endif %}{{ deltas.error }}
                        </span>
                    {% endif %}
                </a>
                <a href="{{ findings_base }}?severity=warning"
                   class="block rounded-xl border border-line bg-surface p-4 no-underline hover:border-amber-300">
                    <div class="text-sm text-muted">Warnings</div>
                    <div class="mt-1 text-2xl font-bold text-amber-700">{{ sev.get('warning', 0) }}</div>
                    {% if deltas %}
                        <span class="mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {% if deltas.warning > 0 %}bg-red-100 text-red-800{% elif deltas.warning < 0 %}bg-emerald-100 text-emerald-800{% else %}bg-stone-200 text-stone-600{% endif %}">
                            {% if deltas.warning > 0 %}+{% endif %}{{ deltas.warning }}
                        </span>
                    {% endif %}
                </a>
                <a href="{{ findings_base }}?severity=info"
                   class="block rounded-xl border border-line bg-surface p-4 no-underline hover:border-sky-300">
                    <div class="text-sm text-muted">Info</div>
                    <div class="mt-1 text-2xl font-bold text-sky-700">{{ sev.get('info', 0) }}</div>
                    {% if deltas %}
                        <span class="mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {% if deltas.info > 0 %}bg-red-100 text-red-800{% elif deltas.info < 0 %}bg-emerald-100 text-emerald-800{% else %}bg-stone-200 text-stone-600{% endif %}">
                            {% if deltas.info > 0 %}+{% endif %}{{ deltas.info }}
                        </span>
                    {% endif %}
                </a>
                <a href="{{ findings_base }}"
                   class="block rounded-xl border border-line bg-surface p-4 no-underline hover:border-brand">
                    <div class="text-sm text-muted">Tool failures</div>
                    <div class="mt-1 text-2xl font-bold">{{ run.summary.tool_failure_count if run.summary else 0 }}</div>
                </a>
            </div>
            {% if previous %}
                <p class="text-sm text-muted">Compared to previous completed run on <code class="font-mono text-xs">{{ run.branch }}</code>.</p>
            {% endif %}
            <section class="space-y-3">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <h2 class="text-lg font-semibold">By check</h2>
                    <a class="text-sm font-medium text-brand hover:underline"
                       href="{{ findings_base }}">View findings →</a>
                </div>
                {% if by_check %}
                    <div class="overflow-x-auto rounded-xl border border-line bg-surface">
                        <table class="min-w-full text-left text-sm">
                            <thead class="bg-stone-50 text-muted">
                                <tr>
                                    <th class="px-4 py-3 font-medium">Check</th>
                                    <th class="px-4 py-3 font-medium">Findings</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-line">
                                {% for row in by_check %}
                                    <tr class="hover:bg-stone-50">
                                        <td class="px-4 py-3"><a class="font-mono text-xs text-brand hover:underline"
   href="{{ findings_base }}?check_id={{ row.check_id | urlencode }}">{{ row.check_id }}</a></td>
                                        <td class="px-4 py-3">{{ row.count }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-sm text-muted">No check summary yet.</p>
                {% endif %}
            </section>
            <section class="space-y-3">
                <h2 class="text-lg font-semibold">Tools that could not run</h2>
                {% if tool_failures %}
                    <div class="rounded-xl border border-line bg-surface overflow-hidden">
                        <table class="w-full table-fixed text-left text-sm">
                            <thead class="bg-stone-50 text-muted">
                                <tr>
                                    <th class="w-[12rem] px-4 py-3 font-medium">Check</th>
                                    <th class="w-[8rem] px-4 py-3 font-medium">Tool</th>
                                    <th class="px-4 py-3 font-medium">Message</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-line">
                                {% for finding in tool_failures %}
                                    <tr class="hover:bg-stone-50">
                                        <td class="px-4 py-3 align-top max-w-0"><a class="font-mono text-xs text-brand hover:underline break-all"
   href="{{ findings_base }}?check_id={{ finding.check_id | urlencode }}">{{ finding.check_id }}</a></td>
                                        <td class="px-4 py-3 align-top font-mono text-xs break-all">{{ finding.tool_id }}</td>
                                        <td class="px-4 py-3 align-top max-w-0">
                                            <div class="max-h-32 overflow-y-auto whitespace-pre-wrap break-all text-sm [overflow-wrap:anywhere]">{{ finding.message }}</div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-sm text-muted">All tools ran successfully for this run.</p>
                {% endif %}
            </section>
            <section class="space-y-3">
                <h2 class="text-lg font-semibold">File hotspots</h2>
                {% if hotspots %}
                    <div class="overflow-x-auto rounded-xl border border-line bg-surface">
                        <table class="min-w-full text-left text-sm">
                            <thead class="bg-stone-50 text-muted">
                                <tr>
                                    <th class="px-4 py-3 font-medium">File</th>
                                    <th class="px-4 py-3 font-medium">Findings</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-line">
                                {% for row in hotspots %}
                                    <tr class="hover:bg-stone-50">
                                        <td class="px-4 py-3"><a class="font-mono text-xs text-brand hover:underline"
   href="{{ findings_base }}?file={{ row.file | urlencode }}"><code>{{ row.file }}</code></a></td>
                                        <td class="px-4 py-3">{{ row.count }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-sm text-muted">No file hotspots for this run.</p>
                {% endif %}
            </section>
        {% endif %}
    </div>
{% endblock %}