{% extends "base.html" %}
{% block title %}minitrail — trace {{ trace_id[:16] }}{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-6 flex items-start justify-between">
  <div>
    <a href="/" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">&larr; All traces</a>
    <h1 class="text-xl font-semibold mt-2">
      Trace <span class="font-mono text-sm text-gray-500">{{ trace_id[:16] }}...</span>
    </h1>
    <div class="flex gap-4 mt-1 text-sm text-gray-500">
      <span>{{ span_count }} spans</span>
      <span>{{ trace_duration }}</span>
    </div>
  </div>

  <!-- Pretty / Raw toggle -->
  <div class="flex mt-6">
    <button id="btn-pretty" onclick="setViewMode('pretty')"
      class="px-3 py-1 text-xs font-medium rounded-l border bg-blue-600 text-white border-blue-600">
      Pretty
    </button>
    <button id="btn-raw" onclick="setViewMode('raw')"
      class="px-3 py-1 text-xs font-medium rounded-r border border-l-0 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700">
      Raw
    </button>
  </div>
</div>

<!-- Cost summary -->
{% if cost_rows %}
<div class="rounded border border-gray-200 dark:border-gray-800 p-3 text-sm">
  <div class="flex items-baseline justify-between mb-2">
    <span class="text-xs font-medium text-gray-400 uppercase tracking-wide">Trace total</span>
    <span class="text-base font-semibold text-emerald-600 dark:text-emerald-400">{{ total_cost }}</span>
  </div>
  <div class="overflow-x-auto">
    <table class="w-full text-xs">
      <thead>
        <tr class="text-left text-gray-400">
          <th class="pr-4 pb-1 font-medium">Model</th>
          <th class="pr-4 pb-1 font-medium text-right">Calls</th>
          <th class="pr-4 pb-1 font-medium text-right">Input tokens</th>
          <th class="pr-4 pb-1 font-medium text-right">Output tokens</th>
          <th class="pb-1 font-medium text-right">Cost</th>
        </tr>
      </thead>
      <tbody>
        {% for row in cost_rows %}
        <tr class="border-t border-gray-100 dark:border-gray-800/50">
          <td class="pr-4 py-1 font-mono flex items-center gap-1.5">
            {% if row.color %}
            <span class="inline-block w-2.5 h-2.5 rounded-sm shrink-0" style="background-color:{{ row.color }}"></span>
            {% endif %}
            {{ row.model }}
          </td>
          <td class="pr-4 py-1 text-right tabular-nums">{{ row.calls }}</td>
          <td class="pr-4 py-1 text-right tabular-nums">{{ row.input_tokens }}</td>
          <td class="pr-4 py-1 text-right tabular-nums">{{ row.output_tokens }}</td>
          <td class="py-1 text-right tabular-nums font-medium text-emerald-600 dark:text-emerald-400">{{ row.cost }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<!-- Span waterfall -->
<div class="space-y-px mt-4" id="waterfall">
  {% for row in span_rows %}
  <div data-span-id="{{ row.span_id }}" class="span-row">
    <!-- Row bar -->
    <div class="flex items-center gap-2 py-1.5 px-2 rounded transition-colors hover:bg-gray-50 dark:hover:bg-gray-900"
         data-row-bar="{{ row.span_id }}">
      <!-- Fold toggle + Name -->
      <div class="shrink-0 text-sm truncate flex items-center"
           style="padding-left:{{ row.depth * 20 }}px; width:340px;">
        {% if row.has_children %}
        <button onclick="toggleCollapse('{{ row.span_id }}', event)"
          class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 mr-1 shrink-0 collapse-toggle"
          data-collapse="{{ row.span_id }}">&#9660;</button>
        {% else %}
        <span class="w-4 mr-1 shrink-0"></span>
        {% endif %}
        <span class="font-medium cursor-pointer truncate {% if row.is_llm %}text-purple-600 dark:text-purple-400{% endif %}"
              onclick="toggleDetail('{{ row.span_id }}')">
          {{ row.name }}
        </span>
      </div>

      <!-- Timeline bar -->
      <div class="flex-1 h-5 relative bg-gray-100 dark:bg-gray-800 rounded overflow-hidden cursor-pointer"
           onclick="toggleDetail('{{ row.span_id }}')">
        <div class="absolute h-full rounded {% if row.is_error %}bg-red-400 dark:bg-red-600{% elif not row.bar_color %}bg-gray-400 dark:bg-gray-500{% endif %}"
             style="left:{{ row.offset_pct }}%;width:{{ row.width_pct }}%;{% if row.bar_color %}background-color:{{ row.bar_color }};{% endif %}">
        </div>
      </div>

      <!-- Duration -->
      <div class="shrink-0 w-16 text-right text-xs tabular-nums text-gray-500">
        {{ row.duration }}
      </div>

      <!-- Cost badge -->
      <div class="shrink-0 w-44 text-right text-[10px] tabular-nums text-gray-400">
        {% if row.show_tokens %}
        <span class="{% if row.is_aggregate %}font-semibold text-gray-600 dark:text-gray-300{% endif %}">
          {% if row.is_aggregate %}<span class="text-[9px] font-normal text-gray-400 mr-0.5">&Sigma;</span>{% endif %}
          {{ row.tokens_label }}
          <span class="text-emerald-600 dark:text-emerald-400">{{ row.cost_label }}</span>
        </span>
        {% endif %}
      </div>
    </div>

    <!-- Detail panel (hidden by default) -->
    <div class="hidden mb-2 mx-2 p-3 rounded border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 text-sm"
         style="margin-left:{{ row.depth * 20 + 8 }}px"
         data-detail="{{ row.span_id }}">

      <!-- PRETTY mode content -->
      <div class="pretty-content space-y-4">
        <!-- Timing -->
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Timing</div>
          <div class="grid grid-cols-2 gap-x-4 gap-y-0.5 text-xs">
            <span class="text-gray-500">Start</span>
            <span class="font-mono">{{ row.start_time }}</span>
            <span class="text-gray-500">End</span>
            <span class="font-mono">{{ row.end_time }}</span>
            <span class="text-gray-500">Status</span>
            <span>{{ row.status_code }}</span>
          </div>
        </div>

        <!-- LLM metadata pills -->
        {% if row.meta_keys %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Model</div>
          <div class="flex flex-wrap gap-2">
            {% for mk in row.meta_keys %}
            <span class="inline-flex items-baseline gap-1.5 text-xs bg-gray-100 dark:bg-gray-800 rounded px-2 py-1">
              <span class="text-gray-500">{{ mk.label }}</span>
              <span class="font-mono font-medium">{{ mk.value }}</span>
            </span>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        <!-- Prompt messages -->
        {% if row.input_messages %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Prompt</div>
          <div class="space-y-2">
            {% for msg in row.input_messages %}
            <div class="rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
              <div class="px-3 py-1 text-xs font-semibold uppercase tracking-wide
                {% if msg.role|lower == 'system' %}bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400
                {% elif msg.role|lower in ['user', 'human'] %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                {% elif msg.role|lower in ['assistant', 'ai'] %}bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400
                {% else %}bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400{% endif %}">
                {{ msg.role }}
              </div>
              <div class="px-3 py-2">
                {% if not msg.content %}<span class="text-gray-400 italic text-xs">empty</span>{% endif %}
                {% for block in msg.content %}
                  {% if block.type == "text" %}
                  <pre class="whitespace-pre-wrap text-xs font-mono mb-2 last:mb-0">{{ block.text }}</pre>
                  {% elif block.type == "image" %}
                  <img src="{{ block.url }}" class="max-w-md rounded border border-gray-200 dark:border-gray-700 mb-2 last:mb-0" alt="content block">
                  {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        <!-- Completion messages -->
        {% if row.output_messages %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Completion</div>
          <div class="space-y-2">
            {% for msg in row.output_messages %}
            <div class="rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
              <div class="px-3 py-1 text-xs font-semibold uppercase tracking-wide
                {% if msg.role|lower == 'system' %}bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400
                {% elif msg.role|lower in ['user', 'human'] %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                {% elif msg.role|lower in ['assistant', 'ai'] %}bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400
                {% else %}bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400{% endif %}">
                {{ msg.role }}
              </div>
              <div class="px-3 py-2">
                {% if not msg.content %}<span class="text-gray-400 italic text-xs">empty</span>{% endif %}
                {% for block in msg.content %}
                  {% if block.type == "text" %}
                  <pre class="whitespace-pre-wrap text-xs font-mono mb-2 last:mb-0">{{ block.text }}</pre>
                  {% elif block.type == "image" %}
                  <img src="{{ block.url }}" class="max-w-md rounded border border-gray-200 dark:border-gray-700 mb-2 last:mb-0" alt="content block">
                  {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        <!-- Input value for non-LLM spans -->
        {% if row.has_input_value %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Input</div>
          <div class="collapsible-text" data-collapsed="true">
            <button onclick="toggleCollapsibleText(this)" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
              &#9654; input.value
            </button>
            <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded mt-0.5 whitespace-pre-wrap overflow-x-auto collapsible-pre">{{ row.input_value[:200] }}{% if row.input_value|length > 200 %}...{% endif %}</pre>
            <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded mt-0.5 whitespace-pre-wrap overflow-x-auto hidden full-pre">{{ row.input_value }}</pre>
          </div>
        </div>
        {% endif %}

        <!-- Output value for non-LLM spans -->
        {% if row.has_output_value %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Output</div>
          <div class="collapsible-text" data-collapsed="true">
            <button onclick="toggleCollapsibleText(this)" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
              &#9654; output.value
            </button>
            <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded mt-0.5 whitespace-pre-wrap overflow-x-auto collapsible-pre">{{ row.output_value[:200] }}{% if row.output_value|length > 200 %}...{% endif %}</pre>
            <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded mt-0.5 whitespace-pre-wrap overflow-x-auto hidden full-pre">{{ row.output_value }}</pre>
          </div>
        </div>
        {% endif %}

        <!-- Other attributes -->
        {% if row.other_keys %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Attributes</div>
          <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 text-xs">
            {% for attr in row.other_keys %}
            <span class="text-gray-500 truncate">{{ attr.key }}</span>
            <span class="font-mono break-all">{{ attr.value }}</span>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        <!-- Events -->
        {% if row.events %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Events</div>
          <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre-wrap">{{ row.events | tojson(indent=2) }}</pre>
        </div>
        {% endif %}
      </div>

      <!-- RAW mode content -->
      <div class="raw-content hidden space-y-3">
        <!-- Timing (same as pretty) -->
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Timing</div>
          <div class="grid grid-cols-2 gap-x-4 gap-y-0.5 text-xs">
            <span class="text-gray-500">Start</span>
            <span class="font-mono">{{ row.start_time }}</span>
            <span class="text-gray-500">End</span>
            <span class="font-mono">{{ row.end_time }}</span>
            <span class="text-gray-500">Status</span>
            <span>{{ row.status_code }}</span>
          </div>
        </div>
        {% if row.raw_attrs %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Attributes</div>
          <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre-wrap">{{ row.raw_attrs | tojson(indent=2) }}</pre>
        </div>
        {% endif %}
        {% if row.events %}
        <div>
          <div class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">Events</div>
          <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto whitespace-pre-wrap">{{ row.events | tojson(indent=2) }}</pre>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/viewer.js"></script>
{% endblock %}