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

{% block action_bar %}
<c-detail-nav
  back_url="{% url 'Eval:traces' %}"
  back_label="Traces"
  title="{{ trace_detail.name }}"
  meta="{{ trace_detail.source_label }}"
/>
<c-button variant="default" class="h-9 px-4">Evaluate →</c-button>
<c-button variant="secondary" class="h-9 px-4" title="Re-derive spans, tool call links, execution paths from raw JSON">Re-parse</c-button>
{% endblock %}

{% block content %}
<div x-data="{ activeTab: 'overview' }">
  <!-- Tabs -->
  <div class="flex gap-1 border-b border-border mb-6">
    <button @click="activeTab = 'overview'"
            :class="activeTab === 'overview' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
            class="px-4 py-2 text-sm transition-colors">
      Overview
    </button>
    <button @click="activeTab = 'span_tree'"
            :class="activeTab === 'span_tree' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
            class="px-4 py-2 text-sm transition-colors">
      Span Tree
    </button>
    <button @click="activeTab = 'tool_call_links'"
            :class="activeTab === 'tool_call_links' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
            class="px-4 py-2 text-sm transition-colors">
      Tool Call Links
    </button>
    <button @click="activeTab = 'raw_json'"
            :class="activeTab === 'raw_json' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
            class="px-4 py-2 text-sm transition-colors">
      Raw JSON
    </button>
  </div>

  <!-- Tab content -->
  <div x-show="activeTab === 'overview'" x-transition class="space-y-4">
    <c-card>
      <c-card-header>
        <c-card-title>Overview</c-card-title>
      </c-card-header>
      <c-card-content>
        <p class="text-muted-foreground">Trace metadata: source, imported_at, prompt_type, latency, cost, tokens, user_input, final_response...</p>
      </c-card-content>
    </c-card>
  </div>

  <div x-show="activeTab === 'span_tree'" x-transition x-cloak class="space-y-4">
    <c-card>
      <c-card-header>
        <c-card-title>Span Tree</c-card-title>
      </c-card-header>
      <c-card-content>
        <p class="text-muted-foreground">[ Hierarchical view of spans — parent/child structure from parentObservationId tree ]</p>
      </c-card-content>
    </c-card>
  </div>

  <div x-show="activeTab === 'tool_call_links'" x-transition x-cloak class="space-y-4">
    <c-card>
      <c-card-header>
        <c-card-title>Tool Call Links</c-card-title>
      </c-card-header>
      <c-card-content>
        <p class="text-muted-foreground">[ tool_call_id, tool_name, request_span, response_span, status... ]</p>
      </c-card-content>
    </c-card>
  </div>

  <div x-show="activeTab === 'raw_json'" x-transition x-cloak class="space-y-4">
    <c-card>
      <c-card-header>
        <c-card-title>Raw JSON</c-card-title>
      </c-card-header>
      <c-card-content>
        <p class="text-sm text-muted-foreground mb-2">Original LangFuse payload — for parser debugging</p>
        {% if trace_detail.raw_json_sha256 %}
        <p class="text-xs text-muted-foreground mb-2 font-mono">SHA256: {{ trace_detail.raw_json_sha256 }}</p>
        {% endif %}
        <pre class="p-4 rounded-md bg-muted text-sm overflow-auto max-h-[500px] border border-border">{{ trace_detail.raw_json_sample }}</pre>
      </c-card-content>
    </c-card>
  </div>
</div>
{% endblock %}