{% extends "base.html" %}

{% block title %}Timeline{% endblock %}

{% block content %}
<!-- ===== Tab Bar ===== -->
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">Timeline</h1>
  <div role="tablist" class="tabs tabs-boxed">
    <button role="tab" class="tab tab-active" id="tab-events" data-view="events">Events</button>
    <button role="tab" class="tab" id="tab-traces" data-view="traces">Traces</button>
  </div>
</div>

<!-- ===== Events View ===== -->
<div id="timeline-list-view">
  <div class="flex items-center justify-between mb-4">
    <div class="text-sm text-base-content/50">Browse domain events and commands chronologically</div>
  </div>

  <!-- Summary Cards -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Total Events</div>
      <div class="stat-value text-2xl font-mono-metric" id="stats-total-events">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Active Streams</div>
      <div class="stat-value text-2xl font-mono-metric" id="stats-active-streams">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Events / min</div>
      <div class="stat-value text-2xl font-mono-metric" id="stats-events-per-min">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Last Event</div>
      <div class="stat-value text-sm font-mono-metric" id="stats-last-event">--</div>
    </div>
  </div>

  <!-- Filter Bar -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <div class="flex flex-wrap items-center gap-3">
        <!-- Stream category dropdown -->
        <select id="filter-stream" class="select select-sm select-bordered w-48">
          <option value="">All Streams</option>
        </select>

        <!-- Event type input -->
        <input type="text" id="filter-event-type" placeholder="Event type..."
               class="input input-sm input-bordered w-48" />

        <!-- Aggregate ID input -->
        <input type="text" id="filter-aggregate-id" placeholder="Aggregate ID..."
               class="input input-sm input-bordered w-48" data-search-input />

        <!-- Kind selector -->
        <select id="filter-kind" class="select select-sm select-bordered w-32">
          <option value="">All Kinds</option>
          <option value="EVENT">EVENT</option>
          <option value="COMMAND">COMMAND</option>
        </select>

        <!-- Order toggle -->
        <div class="join">
          <button class="join-item btn btn-xs btn-ghost" id="btn-order-asc" title="Oldest first">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25 0H21m-3-3v9m0 0-3-3m3 3 3-3" />
            </svg>
          </button>
          <button class="join-item btn btn-xs btn-primary" id="btn-order-desc" title="Newest first">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0-3.75-3.75M17.25 21l3.75-3.75" />
            </svg>
          </button>
        </div>

        <!-- Clear filters -->
        <button class="btn btn-xs btn-ghost" id="btn-clear-filters" title="Clear all filters">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
          Clear
        </button>
      </div>
    </div>
  </div>

  <!-- SSE new-event toast -->
  <button type="button" id="sse-toast"
          class="hidden fixed top-16 left-1/2 -translate-x-1/2 z-50 cursor-pointer
                 alert alert-info shadow-lg px-5 py-2 text-sm animate-bounce-in"
          role="status" aria-live="polite" aria-label="New events arrived, click to scroll to top">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         stroke-width="1.5" stroke="currentColor" class="w-4 h-4 flex-shrink-0">
      <path stroke-linecap="round" stroke-linejoin="round"
            d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
    </svg>
    <span class="toast-label">New events</span>
  </button>

  <!-- Event List -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <div class="overflow-x-auto">
        <table class="table table-sm table-zebra">
          <thead>
            <tr class="text-xs uppercase text-base-content/60">
              <th>Time</th>
              <th>Kind</th>
              <th>Stream</th>
              <th>Message Type</th>
              <th class="text-right">Position</th>
            </tr>
          </thead>
          <tbody id="events-tbody">
            <tr><td colspan="5" class="text-center text-base-content/50 py-8">Loading...</td></tr>
          </tbody>
        </table>
      </div>
      <div id="events-empty" class="text-center py-8 text-base-content/40 hidden">
        No events match the current filters
      </div>
      <!-- Load More / Infinite Scroll Sentinel -->
      <div id="load-more" class="text-center py-4 hidden">
        <button class="btn btn-sm btn-ghost" id="btn-load-more">Load more events</button>
      </div>
      <div id="loading-more" class="text-center py-4 hidden">
        <span class="loading loading-spinner loading-sm"></span>
      </div>
    </div>
  </div>
</div>

<!-- ===== Traces View ===== -->
<div id="traces-view" class="hidden">
  <div class="flex items-center justify-between mb-4">
    <div class="text-sm text-base-content/50">Search and browse correlation chains</div>
  </div>

  <!-- Search Bar -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <div class="flex flex-wrap items-center gap-3">
        <input type="text" id="trace-search-aggregate-id" placeholder="Aggregate ID..."
               class="input input-sm input-bordered w-48" />
        <input type="text" id="trace-search-event-type" placeholder="Event type..."
               class="input input-sm input-bordered w-48" />
        <input type="text" id="trace-search-command-type" placeholder="Command type..."
               class="input input-sm input-bordered w-48" />
        <input type="text" id="trace-search-stream-category" placeholder="Stream category..."
               class="input input-sm input-bordered w-48" />
        <button class="btn btn-xs btn-ghost" id="btn-clear-trace-search" title="Clear search">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
          Clear
        </button>
      </div>
    </div>
  </div>

  <!-- Traces Table -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <div class="overflow-x-auto">
        <table class="table table-sm table-zebra">
          <thead>
            <tr class="text-xs uppercase text-base-content/60">
              <th>Root Type</th>
              <th class="text-right">Event Count</th>
              <th>Streams</th>
              <th>Started At</th>
            </tr>
          </thead>
          <tbody id="traces-tbody">
            <tr><td colspan="4" class="text-center text-base-content/50 py-8">Loading...</td></tr>
          </tbody>
        </table>
      </div>
      <div id="traces-empty" class="text-center py-8 text-base-content/40 hidden">
        No traces found
      </div>
    </div>
  </div>
</div>

<!-- ===== Correlation Chain View ===== -->
<div id="correlation-view" class="hidden">
  <div class="flex items-center gap-3 mb-6">
    <button class="btn btn-sm btn-ghost" id="btn-back-from-correlation" title="Back to timeline">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
      </svg>
      Back
    </button>
    <div>
      <div class="flex items-center gap-2">
        <h1 class="text-2xl font-bold">Correlation Chain</h1>
        <span id="correlation-live-badge" class="badge badge-sm badge-success gap-1 hidden animate-pulse" aria-live="polite">
          <span class="status status-xs status-success animate-ping"></span>
          Live
        </span>
      </div>
      <div class="text-sm text-base-content/50 font-mono" id="correlation-id-display"></div>
    </div>
  </div>

  <!-- Correlation summary -->
  <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Events in Chain</div>
      <div class="stat-value text-2xl font-mono-metric" id="correlation-event-count">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Root Event</div>
      <div class="stat-value text-sm" id="correlation-root-type">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Chain Depth</div>
      <div class="stat-value text-2xl font-mono-metric" id="correlation-depth">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">End-to-End Duration</div>
      <div class="stat-value text-2xl font-mono-metric" id="correlation-total-duration">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Streams Touched</div>
      <div class="stat-value text-2xl font-mono-metric" id="correlation-streams-touched">--</div>
    </div>
  </div>

  <!-- Causation visualization (tree or graph) -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold text-sm">Causation Tree</h3>
        <div class="join" id="causation-view-toggle">
          <button class="join-item btn btn-xs btn-primary" id="btn-tree-view" title="Vertical tree layout">
            Tree View
          </button>
          <button class="join-item btn btn-xs btn-ghost" id="btn-graph-view" title="Interactive D3 graph layout">
            Graph View
          </button>
        </div>
      </div>
      <div id="correlation-tree" class="correlation-tree"></div>
      <div id="causation-graph-container" class="causation-graph-container hidden"></div>
      <div class="text-xs text-base-content/40 mt-2 hidden" id="graph-help-text">
        Shift+click to collapse/expand subtrees. Scroll to zoom. Drag to pan. Swimlanes group nodes by stream category.
      </div>
    </div>
  </div>

  <!-- Flat event list for the correlation chain -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <h3 class="font-semibold text-sm mb-4">All Events (chronological)</h3>
      <div class="overflow-x-auto">
        <table class="table table-sm table-zebra">
          <thead>
            <tr class="text-xs uppercase text-base-content/60">
              <th>Time</th>
              <th>Kind</th>
              <th>Stream</th>
              <th>Message Type</th>
              <th class="text-right">Position</th>
            </tr>
          </thead>
          <tbody id="correlation-events-tbody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- ===== Aggregate History View ===== -->
<div id="aggregate-view" class="hidden">
  <div class="flex items-center gap-3 mb-6">
    <button class="btn btn-sm btn-ghost" id="btn-back-from-aggregate" title="Back to timeline">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
      </svg>
      Back
    </button>
    <div>
      <h1 class="text-2xl font-bold">Aggregate History</h1>
      <div class="text-sm text-base-content/50">
        <span id="aggregate-stream-display" class="font-mono"></span>
      </div>
    </div>
  </div>

  <!-- Aggregate summary -->
  <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Stream Category</div>
      <div class="stat-value text-sm font-mono" id="aggregate-category">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Aggregate ID</div>
      <div class="stat-value text-xs font-mono truncate" id="aggregate-id-display">--</div>
    </div>
    <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
      <div class="stat-title text-xs">Current Version</div>
      <div class="stat-value text-2xl font-mono-metric" id="aggregate-version">--</div>
    </div>
  </div>

  <!-- Aggregate event history (vertical timeline) -->
  <div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body p-4">
      <h3 class="font-semibold text-sm mb-4">Event History</h3>
      <div id="aggregate-timeline" class="aggregate-timeline"></div>
      <div id="aggregate-empty" class="text-center py-8 text-base-content/40 hidden">
        No events found for this aggregate
      </div>
    </div>
  </div>
</div>

<!-- Event Detail Slide-out Panel -->
<dialog id="event-detail-modal" class="modal modal-bottom sm:modal-middle">
  <div class="modal-box max-w-3xl">
    <h3 class="font-bold text-lg mb-4">Event Detail</h3>
    <div id="event-detail-content">
      <!-- Metadata grid -->
      <div class="grid grid-cols-2 gap-2 text-sm mb-4" id="event-detail-meta"></div>

      <!-- Payload -->
      <h4 class="font-semibold text-sm mb-2">Payload</h4>
      <div class="bg-base-200 rounded-lg p-3 text-xs max-h-96 overflow-auto font-mono whitespace-pre-wrap" id="event-detail-payload"></div>

      <!-- Full Metadata -->
      <h4 class="font-semibold text-sm mb-2 mt-4">Metadata</h4>
      <div class="bg-base-200 rounded-lg p-3 text-xs max-h-48 overflow-auto font-mono whitespace-pre-wrap" id="event-detail-metadata"></div>
    </div>
    <div class="modal-action">
      <form method="dialog"><button class="btn btn-sm">Close</button></form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/static/js/causation-graph.js" defer></script>
<script src="/static/js/timeline.js" defer></script>
{% endblock %}