{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
<div class="space-y-6">

  <div class="ui-breadcrumb">
    <a href="/opportunities">Opportunities</a>
    <span>›</span>
    <span class="ui-breadcrumb-current">{{ model_name }}</span>
  </div>

  <div class="ui-page-header">
    <p class="ui-eyebrow">Model</p>
    <h1 class="ui-page-title mt-2 font-mono">{{ model_name }}</h1>
    <p class="ui-page-subtitle mt-2">
      {{ finding_count }} {{ "finding" if finding_count == 1 else "findings" }} on this model in project
      <span class="font-semibold">{{ config.name }}</span>.
    </p>
  </div>

  {# Aggregate summary strip #}
  <div class="grid gap-4 md:grid-cols-3">
    <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
      <p class="ui-card-label">State</p>
      <p class="mt-2 text-sm text-slate-900 dark:text-slate-100">
        {% if worst_state == 'high_risk' %}High risk
        {% elif worst_state == 'failed' %}Failed
        {% elif worst_state == 'requires_review' %}Review
        {% elif worst_state == 'generating' %}Generating
        {% elif worst_state == 'upstream_fix' %}Upstream fix
        {% elif worst_state == 'safe' %}Safe
        {% elif worst_state == 'resolved' %}Resolved
        {% else %}Awaiting{% endif %}
      </p>
      <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Worst case across all findings on this model.</p>
    </div>
    <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
      <p class="ui-card-label">Total query cost</p>
      <p class="mt-2 text-sm text-slate-900 dark:text-slate-100">
        {% if total_cost is not none %}{{ total_cost | format_usd }}{% else %}—{% endif %}
      </p>
      <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Summed across {{ finding_count }} finding(s).</p>
    </div>
    <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
      <p class="ui-card-label">Total savings</p>
      <p class="mt-2 text-sm text-slate-900 dark:text-slate-100">
        {% if total_savings is not none and total_savings > 0 %}~{{ total_savings | format_usd }}{% else %}—{% endif %}
      </p>
      <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Estimated per-run savings across findings.</p>
    </div>
  </div>

  {# Findings list #}
  <div class="space-y-3">
    {% for f in findings %}
    <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
      <div class="flex items-start justify-between gap-4 flex-wrap">
        <div class="min-w-0">
          <p class="ui-card-label">{{ f.opportunity_type | replace('_', ' ') | title }}</p>
          <div class="mt-2 flex flex-wrap items-center gap-2 text-[13px] text-slate-600 dark:text-slate-300">
            <span>
              Query cost:
              <span class="font-medium text-slate-900 dark:text-slate-100">
                {% if f.current_cost_estimate is not none %}{{ f.current_cost_estimate | format_usd }}{% else %}—{% endif %}
              </span>
            </span>
            <span class="text-slate-300 dark:text-slate-600">·</span>
            <span>
              Savings:
              <span class="font-medium text-slate-900 dark:text-slate-100">
                {% if f.expected_savings is not none and f.expected_savings > 0 %}~{{ f.expected_savings | format_usd }}{% else %}—{% endif %}
              </span>
            </span>
            {% if f.last_detected_at %}
            <span class="text-slate-300 dark:text-slate-600">·</span>
            <span>Last detected: <span class="font-medium text-slate-900 dark:text-slate-100">{{ f.last_detected_at.strftime("%d/%m/%Y") }}</span></span>
            {% endif %}
          </div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
          {# State pill — same vocab as the grouped list #}
          {% if f.state_key == 'high_risk' %}
            <span class="ui-signal-chip whitespace-nowrap text-red-700 dark:text-red-300"><span class="ui-legend-dot bg-red-500"></span>High risk</span>
          {% elif f.state_key == 'failed' %}
            <span class="ui-signal-chip whitespace-nowrap text-red-700 dark:text-red-300"><span class="ui-legend-dot bg-red-500"></span>Failed</span>
          {% elif f.state_key == 'requires_review' %}
            <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300"><span class="ui-legend-dot bg-amber-500"></span>Review</span>
          {% elif f.state_key == 'generating' %}
            <span class="ui-signal-chip whitespace-nowrap text-brand-700 dark:text-brand-200"><span class="ui-legend-dot bg-brand-500 animate-pulse"></span>Generating</span>
          {% elif f.state_key == 'upstream_fix' %}
            <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300"><span class="ui-legend-dot bg-amber-500"></span>Upstream fix</span>
          {% elif f.state_key == 'safe' %}
            <span class="ui-signal-chip whitespace-nowrap text-emerald-700 dark:text-emerald-300"><span class="ui-legend-dot bg-emerald-500"></span>Safe</span>
          {% elif f.state_key == 'resolved' %}
            <span class="ui-signal-chip whitespace-nowrap text-slate-600 dark:text-slate-400"><span class="ui-legend-dot bg-slate-400"></span>Resolved</span>
          {% else %}
            <span class="ui-signal-chip whitespace-nowrap"><span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>Awaiting</span>
          {% endif %}
          <a href="{{ f.detail_url }}" class="ui-btn-secondary whitespace-nowrap">
            Open finding →
          </a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

</div>
</section>
{% endblock %}