{% extends "base.html" %}
{% block title %}Session {{ date }} {{ time }} - 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 class="text-gray-800 font-medium">{{ date }} {{ time }}</li>
  </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Summary bar -->
<div class="mb-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-gray-800">Session: {{ date }} {{ time }}</h1>
      <div class="flex items-center gap-2 mt-1">
        {% if session_type == "multirun" %}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">multirun</span>
        {% elif session_type == "batch" %}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">batch</span>
        {% else %}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">single</span>
        {% endif %}
      </div>
    </div>
    <div class="text-right">
      {% if passed_count == total_count %}
        <div class="text-3xl font-bold text-green-600">{{ passed_count }}/{{ total_count }}</div>
        <div class="text-sm text-green-600">All passed</div>
      {% else %}
        <div class="text-3xl font-bold text-red-600">{{ passed_count }}/{{ total_count }}</div>
        <div class="text-sm text-red-600">{{ total_count - passed_count }} failed</div>
      {% endif %}
    </div>
  </div>

  <!-- Pass rate bar -->
  <div class="mt-3 w-full bg-gray-200 rounded-full h-3">
    {% set pct = (passed_count / total_count * 100) if total_count > 0 else 0 %}
    <div class="h-3 rounded-full {% if passed_count == total_count %}bg-green-500{% else %}bg-green-500{% endif %}"
         style="width: {{ pct | round(1) }}%"></div>
  </div>

  <!-- Result filter -->
  <div class="mt-4 flex items-center gap-2">
    <span class="text-sm text-gray-500 mr-1">Filter:</span>
    <button type="button" data-filter="all"
            class="filter-btn inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border transition-colors bg-gray-800 text-white border-gray-800">
      All
    </button>
    <button type="button" data-filter="pass"
            class="filter-btn inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border transition-colors bg-white text-green-700 border-green-300 hover:bg-green-50">
      PASS
    </button>
    <button type="button" data-filter="fail"
            class="filter-btn inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border transition-colors bg-white text-red-700 border-red-300 hover:bg-red-50">
      FAIL
    </button>
    <button type="button" data-filter="na"
            class="filter-btn inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border transition-colors bg-white text-gray-600 border-gray-300 hover:bg-gray-50">
      N/A
    </button>
    <span id="filter-count" class="ml-2 text-xs text-gray-400"></span>
  </div>
</div>

<!-- Scenario list -->
{% if items %}
<div class="bg-white rounded-lg shadow overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16">#</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scenario</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overrides</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">Result</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">Time</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      {% for item in items %}
      <tr class="hover:bg-gray-50 cursor-pointer transition-colors {% if item.passed == false %}bg-red-50{% endif %}"
          data-result="{% if item.passed is none %}na{% elif item.passed %}pass{% else %}fail{% endif %}"
          onclick="window.location='/session/{{ session_type }}/{{ date }}/{{ time }}/{{ item.index }}'">
        <td class="px-6 py-4 whitespace-nowrap">
          <a href="/session/{{ session_type }}/{{ date }}/{{ time }}/{{ item.index }}"
             class="text-blue-600 hover:text-blue-800 font-mono font-medium">
            {{ item.index }}
          </a>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">
          {{ item.scenario_name }}
        </td>
        <td class="px-6 py-4 text-xs text-gray-500 max-w-md truncate font-mono" title="{{ item.overrides | join(', ') }}">
          {{ item.overrides | join(', ') }}
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          {% if item.passed is none %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">N/A</span>
          {% elif item.passed %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">PASS</span>
          {% else %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">FAIL</span>
          {% endif %}
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">
          {% if item.elapsed_seconds is not none %}
            {{ "%.1f" | format(item.elapsed_seconds) }}s
          {% else %}
            -
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="text-center py-12 text-gray-500">
  No scenarios found in this session.
</div>
{% endif %}

{% endblock %}

{% block extra_scripts %}
<script>
(function() {
  var buttons = document.querySelectorAll('.filter-btn');
  var countEl = document.getElementById('filter-count');

  var styles = {
    all:  { active: 'bg-gray-800 text-white border-gray-800', inactive: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' },
    pass: { active: 'bg-green-600 text-white border-green-600', inactive: 'bg-white text-green-700 border-green-300 hover:bg-green-50' },
    fail: { active: 'bg-red-600 text-white border-red-600', inactive: 'bg-white text-red-700 border-red-300 hover:bg-red-50' },
    na:   { active: 'bg-gray-600 text-white border-gray-600', inactive: 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' },
  };

  function applyFilter(filter) {
    var rows = document.querySelectorAll('tbody tr[data-result]');
    var visible = 0;
    rows.forEach(function(row) {
      var match = filter === 'all' || row.getAttribute('data-result') === filter;
      row.style.display = match ? '' : 'none';
      if (match) visible++;
    });
    countEl.textContent = filter === 'all' ? '' : visible + ' / ' + rows.length;
    buttons.forEach(function(btn) {
      var f = btn.getAttribute('data-filter');
      var s = styles[f];
      (s.active + ' ' + s.inactive).split(' ').forEach(function(c) { btn.classList.remove(c); });
      (f === filter ? s.active : s.inactive).split(' ').forEach(function(c) { btn.classList.add(c); });
    });
  }

  buttons.forEach(function(btn) {
    btn.addEventListener('click', function() { applyFilter(btn.getAttribute('data-filter')); });
  });

  applyFilter('all');
})();
</script>
{% endblock %}