{% extends "base.html" %}
{% block title %}Scenario #{{ index }} - Scenario Result Viewer{% endblock %}

{% block breadcrumb %}
<nav class="flex text-sm text-gray-500" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li><a href="/" class="hover:text-blue-600">Sessions</a></li>
    <li><span class="mx-1">/</span></li>
    <li><a href="/session/{{ session_type }}/{{ date }}/{{ time }}" class="hover:text-blue-600">{{ date }} {{ time }}</a></li>
    <li><span class="mx-1">/</span></li>
    <li class="text-gray-800 font-medium">#{{ index }}</li>
  </ol>
</nav>
{% endblock %}

{# Recursive macro for rendering condition tree nodes #}
{% macro render_condition(node, depth) %}
<div class="condition-node" style="margin-left: {{ depth * 1.5 }}rem;">
  <div class="condition-toggle flex items-center gap-2 py-1.5 px-2 rounded cursor-pointer hover:bg-gray-50 transition-colors">
    {# Expand arrow (only if has children) #}
    {% if node.children %}
      <svg class="toggle-arrow h-4 w-4 text-gray-400 transform rotate-90 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    {% else %}
      <span class="w-4 flex-shrink-0"></span>
    {% endif %}

    {# Status icon #}
    {% if node.satisfied %}
      <span class="flex-shrink-0 w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs font-bold">&#10003;</span>
    {% else %}
      {% if node.role == "fail" %}
        <span class="flex-shrink-0 w-5 h-5 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-xs font-bold">&#10007;</span>
      {% else %}
        <span class="flex-shrink-0 w-5 h-5 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-xs font-bold">&#10007;</span>
      {% endif %}
    {% endif %}

    {# Label and type #}
    <div class="flex-1 min-w-0">
      <span class="text-sm font-medium text-gray-800">{{ node.label }}</span>
      <span class="text-xs text-gray-400 ml-2">({{ node.condition_type }})</span>
    </div>

    {# Role badge #}
    {% if node.role %}
      {% if node.role == "pass" %}
        <span class="flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700">pass</span>
      {% elif node.role == "fail" %}
        <span class="flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-50 text-red-700">fail</span>
      {% endif %}
    {% endif %}
  </div>

  {# Message (human-readable condition status) #}
  {% if node.message %}
    <div class="ml-11 text-xs text-gray-600 mt-0.5 mb-1 break-words">
      <span class="font-medium">{{ node.message }}</span>
    </div>
  {% endif %}

  {# Details (non-structural keys) — collapsible #}
  {% if node.details %}
    <div class="ml-11 mb-1 detail-section">
      <button class="detail-toggle flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 transition-colors" type="button">
        <svg class="detail-arrow h-3 w-3 transform rotate-0 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <span>Parameters</span>
      </button>
      <div class="detail-content hidden mt-1">
        {% for k, v in node.details.items() %}
          <span class="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded mr-1 mb-0.5 font-mono">{{ k }}={{ v }}</span>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {# Children (recursive) #}
  {% if node.children %}
    <div class="condition-children border-l-2 border-gray-200 ml-4">
      {% for child in node.children %}
        {{ render_condition(child, depth + 1) }}
      {% endfor %}
    </div>
  {% endif %}
</div>
{% endmacro %}

{% block content %}

{% if result %}
<!-- Result Summary -->
<div class="mb-6">
  <div class="flex items-center gap-4">
    <h1 class="text-2xl font-bold text-gray-800">{{ scenario_name }}</h1>
    {% if result.passed is none %}
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">N/A</span>
    {% elif result.passed %}
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">PASSED</span>
    {% else %}
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">FAILED</span>
    {% endif %}
    {% if result.elapsed_seconds is not none %}
      <span class="text-sm text-gray-500 font-mono">{{ "%.2f" | format(result.elapsed_seconds) }}s</span>
    {% endif %}
    {% if result.overrides %}
    <!-- Re-run button -->
    <button
      onclick="rerunScenario()"
      class="ml-auto px-4 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium flex items-center gap-1.5"
    >
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
      </svg>
      Re-run
    </button>
    {% endif %}
  </div>
  {% if result.message %}
  <p class="mt-2 text-sm text-gray-600 bg-gray-50 p-3 rounded-lg font-mono whitespace-pre-wrap">{{ result.message }}</p>
  {% endif %}
</div>

<!-- Recording Video -->
{% if result.video_filename %}
<div class="mb-6">
  <h2 class="text-lg font-semibold text-gray-700 mb-2">Recording</h2>
  <div class="bg-white rounded-lg shadow p-4">
    <video controls preload="metadata" class="w-full rounded">
      <source src="/video/{{ session_type }}/{{ date }}/{{ time }}/{{ index }}/{{ result.video_filename }}" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</div>
{% endif %}

<!-- Overrides -->
{% if result.overrides %}
<div class="mb-6">
  <h2 class="text-lg font-semibold text-gray-700 mb-2">Overrides</h2>
  <div class="bg-white rounded-lg shadow p-4">
    <ul class="space-y-1">
      {% for override in result.overrides %}
      <li class="text-sm font-mono text-gray-600 flex items-center gap-2">
        <span class="text-blue-500">-</span>
        {{ override }}
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endif %}

<!-- Raw Terminal Log -->
{% if result.raw_log %}
<div class="mb-6">
  <button
    id="raw-log-toggle"
    onclick="toggleRawLog()"
    class="flex items-center gap-2 text-lg font-semibold text-gray-700 mb-2 hover:text-blue-600 transition-colors"
  >
    <svg id="raw-log-arrow" class="h-4 w-4 text-gray-400 transform rotate-0 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
    Raw Terminal Log
    <span class="text-xs font-normal text-gray-400">(click to expand)</span>
  </button>
  <div id="raw-log-content" class="hidden">
    <div class="bg-gray-900 text-gray-100 rounded-lg shadow p-4 overflow-x-auto max-h-[600px] overflow-y-auto">
      <pre class="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">{{ result.raw_log }}</pre>
    </div>
  </div>
</div>
{% endif %}

<!-- Condition Tree -->
{% if result.condition_statuses %}
<div class="mb-6">
  <h2 class="text-lg font-semibold text-gray-700 mb-2">Condition Tree</h2>
  <div class="bg-white rounded-lg shadow p-4 space-y-1">
    {% for cs in result.condition_statuses %}
      {{ render_condition(cs, 0) }}
    {% endfor %}
  </div>
</div>
{% endif %}

{% else %}
<div class="text-center py-12 text-gray-500">
  <p>No result data found for this scenario.</p>
</div>
{% endif %}

{% endblock %}

{% block extra_scripts %}
<script>
  // Toggle raw terminal log visibility
  function toggleRawLog() {
    const content = document.getElementById('raw-log-content');
    const arrow = document.getElementById('raw-log-arrow');
    const hint = document.querySelector('#raw-log-toggle .text-xs');
    if (content) {
      content.classList.toggle('hidden');
      if (arrow) {
        arrow.classList.toggle('rotate-90');
      }
      if (hint) {
        hint.textContent = content.classList.contains('hidden') ? '(click to expand)' : '(click to collapse)';
      }
    }
  }

  // Toggle condition children visibility
  document.querySelectorAll('.condition-toggle').forEach(el => {
    el.addEventListener('click', () => {
      const parent = el.closest('.condition-node');
      const children = parent.querySelector(':scope > .condition-children');
      if (children) {
        children.classList.toggle('hidden');
        const arrow = el.querySelector('.toggle-arrow');
        if (arrow) {
          arrow.classList.toggle('rotate-90');
          arrow.classList.toggle('rotate-0');
        }
      }
    });
  });

  // Toggle condition detail parameters visibility
  document.querySelectorAll('.detail-toggle').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      const section = btn.closest('.detail-section');
      const content = section.querySelector('.detail-content');
      const arrow = btn.querySelector('.detail-arrow');
      if (content) {
        content.classList.toggle('hidden');
        if (arrow) {
          arrow.classList.toggle('rotate-90');
          arrow.classList.toggle('rotate-0');
        }
      }
    });
  });

  {% if result and result.overrides %}
  // Re-run this scenario with its original overrides
  function rerunScenario() {
    const overrides = {{ result.overrides | tojson }};
    let scenario = '';
    const extra = [];
    overrides.forEach(ov => {
      if (ov.startsWith('scenario=')) {
        scenario = ov.substring('scenario='.length);
      } else {
        extra.push(ov);
      }
    });
    if (!scenario) return;

    executeRunWithProgress(
      { scenario: scenario, extra_overrides: extra, sweeper: '' },
      () => window.location.reload()
    );
  }
  {% endif %}
</script>
{% endblock %}