{% extends "dashboard/base.html" %}

{% block title %}Execution {{ detail.record.id[:8] }} — {{ dashboard_title }}{% endblock %}
{% block page_heading %}<span class="text-slate-500 font-medium">Executions</span> <span class="material-symbols-outlined text-slate-600 text-sm mx-1">chevron_right</span> <span class="font-mono text-white">#{{ detail.record.id[:8] }}</span>{% endblock %}

{% block extra_head %}
  <!-- Prism.js for JSON syntax highlighting -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" />
  <style>
    /* Premium Detail Overrides */
    .execution-title {
      font-family: 'Inter', sans-serif;
      letter-spacing: -0.04em;
    }
  </style>
{% endblock %}

{% block topbar_right_actions %}
<div class="flex items-center gap-3">
  <button class="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-xs font-bold text-slate-300 hover:bg-white/10 hover:text-white transition-all">
    <span class="material-symbols-outlined text-lg">download</span>
    Download Trace
  </button>
  {% if current_user and current_user.is_admin %}
  <form method="POST" action="{{ base_path }}/dashboard/executions/{{ detail.record.id }}/retry">
    <button type="submit" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary text-white text-xs font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20">
      <span class="material-symbols-outlined text-lg">refresh</span>
      Retry
    </button>
  </form>
  {% endif %}
</div>
{% endblock %}

{% block content %}
<div class="p-8 lg:p-12">
  <div class="max-w-6xl mx-auto space-y-10">
    
    <!-- Title & Primary Actions -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
      <div class="space-y-3">
        <h2 class="text-4xl font-black text-white execution-title">Execution: {{ detail.agent_display_name }}</h2>
        <div class="flex items-center gap-4">
          {% if detail.record.status == 'completed' %}
            <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
              <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
              <span class="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Completed Successfully</span>
            </div>
          {% elif detail.record.status == 'running' %}
            <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20">
              <div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></div>
              <span class="text-[10px] font-black text-primary uppercase tracking-widest">Running Trace</span>
            </div>
          {% elif detail.record.status == 'failed' %}
            <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-500/20">
              <div class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
              <span class="text-[10px] font-black text-rose-500 uppercase tracking-widest">Execution Failed</span>
            </div>
          {% else %}
            <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-500/10 border border-slate-500/20">
              <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ detail.record.status }}</span>
            </div>
          {% endif %}
          <span class="text-xs text-slate-500 font-mono">ID: {{ detail.record.id }}</span>
          {% if detail.record.parent_execution_id or child_executions %}
            <span class="px-2 py-0.5 text-[10px] font-bold bg-amber-500/10 text-amber-500 rounded-full border border-amber-500/20">Workflow</span>
          {% endif %}
        </div>
      </div>
      <div>
        <button class="text-xs font-bold text-slate-400 bg-white/5 border border-white/5 px-5 py-2.5 rounded-xl hover:bg-white/10 hover:text-white transition-all uppercase tracking-widest">View Raw Logs</button>
      </div>
    </div>

    <!-- Error Callout -->
    {% if detail.record.status == 'failed' and detail.record.error %}
    <div class="p-5 bg-rose-500/5 border border-rose-500/20 rounded-2xl flex items-start gap-4 backdrop-blur-md">
      <div class="w-10 h-10 rounded-xl bg-rose-500/10 flex items-center justify-center text-rose-500 shrink-0">
        <span class="material-symbols-outlined">error</span>
      </div>
      <div>
        <h4 class="text-sm font-bold text-rose-500">Execution Error Encountered</h4>
        <p class="text-xs text-rose-400/80 mt-1 font-mono leading-relaxed max-w-2xl">{{ detail.record.error }}</p>
      </div>
    </div>
    {% endif %}

    <!-- Metric Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="glass-card p-6 rounded-2xl border-l-[6px] border-l-primary shadow-xl shadow-black/20">
        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Duration</p>
        <h3 class="text-2xl font-black text-white">{{ format_duration(detail.duration_ms) }}</h3>
      </div>
      <div class="glass-card p-6 rounded-2xl border-l-[6px] border-l-amber-500 shadow-xl shadow-black/20">
        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Total Cost</p>
        <h3 class="text-2xl font-black text-white">{{ format_cost(detail.total_cost_usd) }}</h3>
      </div>
      <div class="glass-card p-6 rounded-2xl border-l-[6px] border-l-purple-500 shadow-xl shadow-black/20">
        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Tokens (In / Out)</p>
        <h3 class="text-2xl font-black text-white">
          {% if detail.total_input_tokens is not none %}
            {{ detail.total_input_tokens }} <span class="text-slate-600 text-lg">/</span> {{ detail.total_output_tokens or 0 }}
          {% else %}—{% endif %}
        </h3>
      </div>
      <div class="glass-card p-6 rounded-2xl border-l-[6px] border-l-emerald-500 shadow-xl shadow-black/20">
        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Models Used</p>
        <h3 class="text-base font-black text-white truncate">
          {{ detail.models_used | join(', ') if detail.models_used else '—' }}
        </h3>
      </div>
    </div>

    <!-- Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
      
      <!-- Primary Column: Trace -->
      <div class="lg:col-span-2 space-y-8">
        <div class="flex items-center justify-between">
          <h3 class="text-xl font-bold text-white">Execution Trace</h3>
          <div class="flex items-center gap-2 px-3 py-1 rounded-lg bg-white/5 border border-white/10">
            <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{{ detail.steps | length }} Steps Captured</span>
          </div>
        </div>

        {% if detail.record.status == 'running' %}
        <div id="trace-steps" hx-get="{{ base_path }}/dashboard/executions/{{ detail.record.id }}" hx-trigger="every 3s" hx-swap="outerHTML" hx-target="#trace-steps">
          {% include "dashboard/_trace_steps.html" %}
        </div>
        {% else %}
        <div id="trace-steps">
          {% include "dashboard/_trace_steps.html" %}
        </div>
        {% endif %}

        {% if detail.record.status == 'completed' and detail.record.result_text %}
        <div class="pt-10">
          <div class="glass-card rounded-3xl p-8 bg-primary/5 border-primary/20 relative overflow-hidden group">
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-primary/20"></div>
            <div class="relative">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-2xl bg-primary/20 flex items-center justify-center text-primary border border-primary/30">
                  <span class="material-symbols-outlined text-2xl">auto_awesome</span>
                </div>
                <div>
                  <h3 class="text-xl font-black text-white">Final Output</h3>
                  <p class="text-[10px] font-bold text-primary uppercase tracking-widest px-1">Successful Completion</p>
                </div>
              </div>
              <div class="prose prose-invert max-w-none text-base leading-relaxed text-slate-300 font-medium">
                {{ detail.record.result_text | safe }}
              </div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>

      <!-- Secondary Column: Sidebar -->
      <div class="space-y-8 lg:sticky lg:top-8">
        
        <!-- Input Payload -->
        <div class="glass-card rounded-3xl p-8">
          <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-6">Input Context</h4>
          <div class="p-6 bg-black/40 rounded-2xl border border-white/5 text-sm text-slate-400 font-medium leading-relaxed whitespace-pre-wrap">
            {{ detail.record.message or 'No direct input message recorded for this execution.' }}
          </div>
        </div>

        <!-- Session Intelligence (if available) -->
        {% if conversation %}
        <div class="glass-card rounded-3xl p-8 bg-gradient-to-br from-white/5 to-transparent">
          <div class="flex items-center justify-between mb-8">
            <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Session Stats</h4>
            <a href="{{ base_path }}/dashboard/conversations/{{ conversation.session_id }}" class="flex items-center gap-1 text-[10px] font-bold text-primary hover:text-white transition-colors">
              VIEW HISTORY
              <span class="material-symbols-outlined text-sm">arrow_forward</span>
            </a>
          </div>
          <div class="space-y-6">
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-medium">Session ID</span>
              <span class="text-xs font-mono font-bold text-slate-300">#{{ conversation.session_id[:8] }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-medium">Total Turns</span>
              <span class="text-xs font-bold text-white">{{ conversation.execution_count }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-medium">Session Cost</span>
              <span class="text-xs font-bold text-primary text-lg">{{ format_cost(conversation.total_cost_usd) }}</span>
            </div>
          </div>
        </div>
        {% endif %}

        <!-- Delegation Context -->
        {% if parent_execution or child_executions %}
        <div class="glass-card rounded-3xl p-8 bg-gradient-to-br from-amber-500/5 to-transparent">
          <div class="flex items-center gap-3 mb-6">
            <div class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center text-amber-500">
              <span class="material-symbols-outlined text-lg">account_tree</span>
            </div>
            <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Delegation Workflow</h4>
          </div>

          {% if detail.record.delegation_depth > 0 %}
          <div class="flex items-center gap-2 mb-4">
            <span class="px-2 py-0.5 text-[10px] font-bold bg-amber-500/10 text-amber-500 rounded-full border border-amber-500/20">Depth {{ detail.record.delegation_depth }}</span>
          </div>
          {% endif %}

          {% if parent_execution %}
          <div class="mb-4">
            <p class="text-[10px] text-slate-500 uppercase tracking-widest mb-2">Delegated By</p>
            <a href="{{ base_path }}/dashboard/executions/{{ parent_execution.id }}" class="flex items-center gap-2 p-3 bg-black/20 rounded-xl border border-white/5 hover:bg-white/5 transition-all">
              <span class="material-symbols-outlined text-sm text-slate-400">arrow_upward</span>
              <span class="text-xs font-mono text-slate-300">{{ parent_execution.agent_id }}</span>
              <span class="text-[10px] text-slate-500 font-mono">#{{ parent_execution.id[:8] }}</span>
            </a>
          </div>
          {% endif %}

          {% if child_executions %}
          <div>
            <p class="text-[10px] text-slate-500 uppercase tracking-widest mb-2">Delegated To ({{ child_executions | length }})</p>
            <div class="space-y-2">
              {% for child in child_executions %}
              <a href="{{ base_path }}/dashboard/executions/{{ child.id }}" class="flex items-center justify-between p-3 bg-black/20 rounded-xl border border-white/5 hover:bg-white/5 transition-all">
                <div class="flex items-center gap-2">
                  <span class="material-symbols-outlined text-sm text-slate-400">arrow_downward</span>
                  <span class="text-xs font-mono text-slate-300">{{ child.agent_id }}</span>
                </div>
                <div class="flex items-center gap-2">
                  {% if child.status == 'completed' %}
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
                  {% elif child.status == 'failed' %}
                    <div class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
                  {% else %}
                    <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>
                  {% endif %}
                  <span class="text-[10px] text-slate-500 font-mono">#{{ child.id[:8] }}</span>
                </div>
              </a>
              {% endfor %}
            </div>
          </div>
          {% endif %}

          {% if workflow_cost is not none %}
          <div class="mt-4 pt-4 border-t border-white/5">
            <div class="flex items-center justify-between">
              <span class="text-xs text-slate-500 font-medium">Total Workflow Cost</span>
              <span class="text-sm font-bold text-amber-500">{{ format_cost(workflow_cost) }}</span>
            </div>
          </div>
          {% endif %}
        </div>
        {% endif %}

        <!-- Meta Information -->
        <div class="glass-card rounded-3xl p-8">
          <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-6">Discovery Meta</h4>
          <div class="space-y-6">
            <div>
              <p class="text-[10px] text-slate-500 uppercase tracking-widest mb-2 opacity-50">Execution Timestamp</p>
              <div class="flex items-center gap-2 text-slate-300">
                <span class="material-symbols-outlined text-base text-slate-500">calendar_today</span>
                <p class="text-sm font-bold">{{ format_datetime(detail.record.created_at) }}</p>
              </div>
            </div>
            <div>
              <p class="text-[10px] text-slate-500 uppercase tracking-widest mb-2 opacity-50">Full Trace Pointer</p>
              <div class="p-4 bg-black/40 rounded-xl border border-white/5 font-mono text-[10px] break-all leading-relaxed text-slate-500">
                {{ detail.record.id }}
              </div>
            </div>
          </div>
        </div>

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

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js" defer></script>
{% endblock %}