{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Run Detail | Eval Admin{% endblock %}

{% block action_bar %}
<c-detail-nav
  back_url="{% url 'Eval:trace_runs' %}"
  back_label="Trace Runs"
  title="{{ detail.name }}"
  meta="{{ detail.date }} | {{ detail.tag }} | {{ detail.version }} | judge: {{ detail.judge_score }}% | threshold: {{ detail.threshold_score }}"
  prev_url="{% if prev_run %}{% url 'Eval:trace_run_detail' run_id=prev_run.id %}{% endif %}"
  next_url="{% if next_run %}{% url 'Eval:trace_run_detail' run_id=next_run.id %}{% endif %}"
/>
{% endblock %}

{% block content %}
<div x-data="runDetailData()">
  <c-card>
    {# ── Tab bar ── #}
    <style>
      .run-tab-bar { display: flex; border-bottom: 1px solid #e4e4e7; padding: 0 16px; margin: 0; }
      .run-tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #a1a1aa; background: none; border: none; cursor: pointer; position: relative; }
      .run-tab:hover { color: #71717a; }
      .run-tab.active { color: #18181b; font-weight: 600; box-shadow: inset 0 -2px 0 #18181b; }
    </style>
    <div class="run-tab-bar">
      {% for tab_id, tab_label in tab_list %}
      <div class="run-tab" :class="activeTab === '{{ tab_id }}' && 'active'" @click="activeTab = '{{ tab_id }}'">{{ tab_label }}</div>
      {% endfor %}
    </div>

    <c-card-content>
      {# ════════════════════════════════════════════════════════ #}
      {# TAB 1 — Criteria Scores + Q/A                          #}
      {# ════════════════════════════════════════════════════════ #}
      <div x-show="activeTab === 'scores'" style="padding-top: 16px;">
        <div style="display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem;">
          <!-- Left: Q/A -->
          <div class="space-y-3" style="min-width: 0;">
            <div>
              <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5">User Query</p>
              <pre class="rounded border px-3 py-2 text-xs leading-relaxed" style="white-space: pre-wrap; word-break: break-word; max-height: 250px; overflow-y: auto; margin: 0; font-family: inherit; background: rgba(0,0,0,0.02);">{{ user_input|default:"—" }}</pre>
            </div>
            <div>
              <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5">LLM Response</p>
              <pre class="rounded border px-3 py-2 text-xs leading-relaxed" style="white-space: pre-wrap; word-break: break-word; max-height: 250px; overflow-y: auto; margin: 0; font-family: inherit; background: rgba(0,0,0,0.02);">{{ final_response|default:"—" }}</pre>
            </div>
          </div>

          <!-- Right: Criteria Scores -->
          <div class="space-y-2" style="min-width: 0;">
            {% if run_breakdown.criteria_scores %}
            {% for s in run_breakdown.criteria_scores %}
            <div class="score-card score-card--{{ s.score_class }} rounded-lg border px-4 py-3">
              <div class="flex items-center justify-between mb-1.5">
                <span class="font-semibold text-sm">{{ s.key }}</span>
                <span class="font-bold text-sm score-card__value">{{ s.score }}/{{ s.max_score }}</span>
              </div>
              <div class="score-bar mb-2">
                <div class="score-bar__fill score-bar__fill--{{ s.score_class }}" style="width: {{ s.pct }}%"></div>
              </div>
              <p class="text-xs text-muted-foreground leading-relaxed">{{ s.explanation }}</p>
            </div>
            {% endfor %}
            {% else %}
            <p class="text-sm text-muted-foreground" style="font-style: italic; padding: 16px 0;">No criteria scores available.</p>
            {% endif %}
          </div>
        </div>
      </div>

      {# ════════════════════════════════════════════════════════ #}
      {# TAB 2 — Trace Context                                  #}
      {# ════════════════════════════════════════════════════════ #}
      <style>
        /* ── Trace context layout ── */
        .tc-layout { display: grid; width: 100%; box-sizing: border-box; min-height: 400px; gap: 0; }
        .tc-layout--tree-only { grid-template-columns: 1fr; }
        .tc-layout--with-viewer { grid-template-columns: 3fr 2fr; }
        .tc-tree { overflow-y: auto; overflow-x: hidden; max-height: 600px; min-width: 0; padding-right: 12px; }
        .tc-viewer { overflow-y: auto; max-height: 600px; min-width: 0; padding-left: 20px; border-left: 1px solid #e4e4e7; }
        /* ── Row grid: node | bar | latency ── */
        .tc-grid { display: grid; grid-template-columns: 600px 1fr 60px; align-items: center; }
        .tc-row { height: 28px; border-radius: 3px; transition: background 0.15s; }
        .tc-row:hover { background: rgba(0,0,0,0.03); }
        .tc-row.tc-row--selected { background: rgba(59,130,246,0.08); }
        .tc-col-node { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; min-width: 0; }
        .tc-col-bar { padding: 0 12px; }
        .tc-bar-track { width: 100%; height: 8px; border-radius: 4px; background: #e4e4e7; overflow: hidden; }
        .tc-col-latency { text-align: right; font-size: 11px; font-weight: 700; }
        .tc-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; line-height: 1; flex-shrink: 0; letter-spacing: 0.02em; }
        .tc-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
        .tc-cost { background: rgba(22,163,74,0.1); color: #16a34a; font-size: 10px; padding: 1px 6px; border-radius: 9999px; flex-shrink: 0; font-weight: 600; }
        .tc-tool-ann { color: #71717a; font-size: 10px; flex-shrink: 0; }
        .tc-connector { color: rgba(161,161,170,0.45); user-select: none; flex-shrink: 0; width: 14px; text-align: center; font-size: 11px; }
        .tc-header { height: 28px; font-size: 10px; font-weight: 600; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e4e4e7; margin-bottom: 4px; }
        .tc-font { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; }
        .tc-viewer-metric { border-radius: 8px; border: 1px solid #e4e4e7; padding: 10px 12px; }
        .tc-viewer-label { font-size: 10px; color: #a1a1aa; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; margin: 0; }
      </style>
      <div x-show="activeTab === 'trace'" style="padding-top: 16px;">
        <p class="tc-font" style="color: #a1a1aa; margin-bottom: 12px; font-size: 12px;">{{ trace_context.total_spans }} observations · total {{ trace_context.max_latency }}</p>
        {% if trace_context.tree %}
        <div class="tc-layout" :class="selectedSpan !== null ? 'tc-layout--with-viewer' : 'tc-layout--tree-only'">

          {# ── Left: observation table ── #}
          <div class="tc-tree tc-font">
            <div class="tc-grid tc-header tc-font">
              <span>Node</span>
              <span style="padding-left: 12px;">Duration</span>
              <span style="text-align: right;">Latency</span>
            </div>
            {% for node in trace_context.tree %}
            <div class="tc-grid tc-row"
                 :class="selectedSpan === {{ forloop.counter0 }} && 'tc-row--selected'"
                 style="cursor: pointer;"
                 @click="selectedSpan = (selectedSpan === {{ forloop.counter0 }} ? null : {{ forloop.counter0 }})">
              <div class="tc-col-node" style="padding-left: {{ node.indent_px }}px;">
                {% if node.depth > 0 %}<span class="tc-connector">{% if node.is_last_child %}└{% else %}├{% endif %}</span>{% endif %}
                <span class="tc-badge" style="{{ node.badge_style }}">{{ node.badge_label }}</span>
                <span class="tc-name">{{ node.name }}</span>
                {% if node.cost %}<span class="tc-cost">{{ node.cost }}</span>{% endif %}
                {% if node.tool_annotation %}<span class="tc-tool-ann">→ {{ node.tool_annotation }}</span>{% endif %}
              </div>
              <div class="tc-col-bar">
                <div class="tc-bar-track">{% if node.bar_pct > 0 %}<div style="width: {{ node.bar_pct }}%; height: 100%; border-radius: 4px; background: {{ node.bar_color }};"></div>{% endif %}</div>
              </div>
              <div class="tc-col-latency">
                {% if node.latency %}<span style="{{ node.latency_color }}">{{ node.latency }}</span>{% endif %}
              </div>
            </div>
            {% endfor %}
          </div>

          {# ── Right: detail viewer ── #}
          <div x-show="selectedSpan !== null && spanDetails[selectedSpan]" x-cloak
               class="tc-viewer">
            {# Header #}
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e4e4e7;">
              <div style="display: flex; align-items: center; gap: 8px; min-width: 0;">
                <span class="tc-badge" :style="spanDetails[selectedSpan] ? spanDetails[selectedSpan].badge_style : ''" x-text="spanDetails[selectedSpan] ? spanDetails[selectedSpan].badge_label : ''" style="font-size: 11px; padding: 3px 10px;"></span>
                <span style="font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" x-text="spanDetails[selectedSpan] ? spanDetails[selectedSpan].name : ''"></span>
                <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].model_name">
                  <span style="padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; background: rgba(59,130,246,0.08); color: #3b82f6; flex-shrink: 0;" x-text="spanDetails[selectedSpan].model_name"></span>
                </template>
              </div>
              <button @click="selectedSpan = null" style="color: #a1a1aa; padding: 4px; border-radius: 4px; border: none; background: none; cursor: pointer;" onmouseenter="this.style.color='#18181b';this.style.background='#f4f4f5'" onmouseleave="this.style.color='#a1a1aa';this.style.background='none'">
                <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>

            {# Metric cards #}
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;">
              <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].latency">
                <div class="tc-viewer-metric">
                  <p class="tc-viewer-label">Latency</p>
                  <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0;" x-text="spanDetails[selectedSpan].latency"></p>
                </div>
              </template>
              <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].cost">
                <div class="tc-viewer-metric">
                  <p class="tc-viewer-label">Cost</p>
                  <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0; color: #16a34a;" x-text="spanDetails[selectedSpan].cost"></p>
                  <template x-if="spanDetails[selectedSpan].input_cost || spanDetails[selectedSpan].output_cost">
                    <p style="font-size: 10px; color: #a1a1aa; margin: 4px 0 0;">
                      <span x-show="spanDetails[selectedSpan].input_cost">in: <span x-text="spanDetails[selectedSpan].input_cost"></span></span>
                      <span x-show="spanDetails[selectedSpan].output_cost" style="margin-left: 8px;">out: <span x-text="spanDetails[selectedSpan].output_cost"></span></span>
                    </p>
                  </template>
                </div>
              </template>
              <template x-if="spanDetails[selectedSpan] && (spanDetails[selectedSpan].tokens_in || spanDetails[selectedSpan].tokens_out)">
                <div class="tc-viewer-metric">
                  <p class="tc-viewer-label">Tokens</p>
                  <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0;" x-text="(spanDetails[selectedSpan].tokens_total || 0).toLocaleString()"></p>
                  <p style="font-size: 10px; color: #a1a1aa; margin: 4px 0 0;">
                    <span x-show="spanDetails[selectedSpan].tokens_in">in: <span x-text="(spanDetails[selectedSpan].tokens_in || 0).toLocaleString()"></span></span>
                    <span x-show="spanDetails[selectedSpan].tokens_out" style="margin-left: 8px;">out: <span x-text="(spanDetails[selectedSpan].tokens_out || 0).toLocaleString()"></span></span>
                  </p>
                </div>
              </template>
              <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].model_params && Object.keys(spanDetails[selectedSpan].model_params).length">
                <div class="tc-viewer-metric">
                  <p class="tc-viewer-label">Model Params</p>
                  <template x-for="(val, key) in spanDetails[selectedSpan].model_params" :key="key">
                    <p style="font-size: 12px; margin: 4px 0 0;"><span style="color: #a1a1aa;" x-text="key"></span>: <span style="font-weight: 500;" x-text="val"></span></p>
                  </template>
                </div>
              </template>
            </div>

            {# Tool Calls #}
            <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].tool_calls && spanDetails[selectedSpan].tool_calls.length">
              <div style="margin-bottom: 16px;">
                <p class="tc-viewer-label" style="margin: 0 0 8px;">Tool Calls</p>
                <div style="display: flex; flex-direction: column; gap: 6px;">
                  <template x-for="(tc, i) in spanDetails[selectedSpan].tool_calls" :key="i">
                    <div style="border-radius: 8px; border: 1px solid #e4e4e7; padding: 8px 12px; font-size: 12px; background: rgba(254,243,199,0.3);">
                      <span style="font-weight: 600;" x-text="tc.name"></span>
                      <template x-if="tc.args && Object.keys(tc.args).length">
                        <span style="color: #a1a1aa; margin-left: 4px;">(<template x-for="(v, k) in tc.args" :key="k"><span><span x-text="k"></span>=<span style="font-weight: 500; color: #18181b;" x-text="JSON.stringify(v)"></span> </span></template>)</span>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
            </template>

            {# Output #}
            <template x-if="spanDetails[selectedSpan] && spanDetails[selectedSpan].output">
              <div>
                <p class="tc-viewer-label" style="margin: 0 0 8px;">Output</p>
                <pre style="border-radius: 8px; background: #f9fafb; border: 1px solid #e4e4e7; padding: 12px 16px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 350px; overflow-y: auto; margin: 0; font-family: inherit;" x-text="typeof spanDetails[selectedSpan].output === 'string' ? spanDetails[selectedSpan].output : JSON.stringify(spanDetails[selectedSpan].output, null, 2)"></pre>
              </div>
            </template>

            {# Empty state #}
            <template x-if="spanDetails[selectedSpan] && !spanDetails[selectedSpan].cost && !spanDetails[selectedSpan].tokens_in && !spanDetails[selectedSpan].tool_calls && !spanDetails[selectedSpan].output">
              <p style="font-size: 14px; color: #a1a1aa; font-style: italic; padding: 8px 0; margin: 0;">Structural observation — no output data.</p>
            </template>
          </div>

        </div>
        {% else %}
        <p class="text-sm text-muted-foreground" style="font-style: italic;">No observations recorded.</p>
        {% endif %}
      </div>

      {# ════════════════════════════════════════════════════════ #}
      {# TAB 3 — Metrics                                        #}
      {# ════════════════════════════════════════════════════════ #}
      <div x-show="activeTab === 'metrics'" style="padding-top: 16px;">
        <p class="text-sm text-muted-foreground mb-4">Cost: <span class="font-semibold text-foreground">{{ run_breakdown.cost }}</span> · Tokens: <span class="font-semibold text-foreground">{{ run_breakdown.total_tokens }}</span> · Latency: <span class="font-semibold text-foreground">{{ run_breakdown.latency }}</span></p>
        <div class="flex flex-col space-y-5">
          <div>
            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide pb-1.5 mb-3 border-b border-border">Cost</p>
            <div class="grid grid-cols-3 gap-x-4">
              {% include "eval/components/_metric_static.html" with metric_label="Total Cost" metric_value=run_breakdown.cost threshold=threshold_status.cost %}
              {% include "eval/components/_metric_static.html" with metric_label="Input Token Cost" metric_value=run_breakdown.cost_input threshold=threshold_status.cost_input %}
              {% include "eval/components/_metric_static.html" with metric_label="Output Token Cost" metric_value=run_breakdown.cost_output threshold=threshold_status.cost_output %}
            </div>
          </div>
          <div>
            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide pb-1.5 mb-3 border-b border-border">Tokens</p>
            <div class="grid grid-cols-3 gap-x-4">
              {% include "eval/components/_metric_static.html" with metric_label="Input Tokens" metric_value=run_breakdown.input_tokens threshold=threshold_status.input_tokens %}
              {% include "eval/components/_metric_static.html" with metric_label="Output Tokens" metric_value=run_breakdown.output_tokens threshold=threshold_status.output_tokens %}
              {% include "eval/components/_metric_static.html" with metric_label="Total Tokens" metric_value=run_breakdown.total_tokens threshold=threshold_status.total_tokens %}
            </div>
          </div>
          <div>
            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide pb-1.5 mb-3 border-b border-border">Latency</p>
            <div class="grid grid-cols-3 gap-x-4">
              {% include "eval/components/_metric_static.html" with metric_label="Total Latency" metric_value=run_breakdown.latency threshold=threshold_status.latency %}
              {% include "eval/components/_metric_static.html" with metric_label="Agent Latency" metric_value=run_breakdown.agent_latency threshold=threshold_status.agent_latency %}
              {% include "eval/components/_metric_static.html" with metric_label="Tool Latency" metric_value=run_breakdown.tool_latency threshold=threshold_status.tool_latency %}
            </div>
          </div>
          {% if threshold_summary.total %}
          <div class="mt-auto pt-4">
            <div class="rounded-lg border px-4 py-3 {% if threshold_summary.all_met %}border-eval-score-5 bg-[color-mix(in_oklch,var(--eval-score-5)_6%,transparent)]{% else %}border-eval-score-1 bg-[color-mix(in_oklch,var(--eval-score-1)_6%,transparent)]{% endif %}">
              <p class="text-sm font-semibold {% if threshold_summary.all_met %}text-eval-score-5{% else %}text-eval-score-1{% endif %}">{% if threshold_summary.all_met %}All metrics within threshold &#10003;{% else %}{{ threshold_summary.not_met }} metric{{ threshold_summary.not_met|pluralize }} exceeding threshold &#10007;{% endif %}</p>
              <p class="text-xs text-muted-foreground mt-0.5">{{ threshold_summary.met }}/{{ threshold_summary.total }} passing</p>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </c-card-content>
  </c-card>
</div>

<style>
  [x-cloak] { display: none !important; }
</style>
<script id="run-detail-data" type="application/json">{{ detail_json|safe }}</script>
<script id="span-details-data" type="application/json">{{ span_details_json|safe }}</script>
<script src="{% static 'eval/js/eval-trace-run-detail.js' %}"></script>
{% endblock %}