{% extends "base.html" %}

{% block title %}Event Store{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">Event Store</h1>
  <div class="text-sm text-base-content/50">Monitor aggregate streams and outbox health</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 Aggregates</div>
    <div class="stat-value text-2xl" id="summary-total-aggregates">--</div>
  </div>
  <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
    <div class="stat-title text-xs">Event Sourced</div>
    <div class="stat-value text-2xl" id="summary-event-sourced">--</div>
  </div>
  <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
    <div class="stat-title text-xs">Total Instances</div>
    <div class="stat-value text-2xl" id="summary-total-instances">--</div>
  </div>
  <div class="stat bg-base-100 shadow-sm rounded-lg p-4">
    <div class="stat-title text-xs">Outbox Pending</div>
    <div class="stat-value text-2xl" id="summary-outbox-pending">--</div>
  </div>
</div>

<!-- Aggregate Stream Table -->
<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">
      <h2 class="card-title text-lg">Aggregate Streams</h2>
      <div class="flex items-center gap-2">
        <input type="text" id="stream-search" placeholder="Search aggregates..."
               class="input input-sm input-bordered w-48" data-search-input />
        <button class="btn btn-xs btn-ghost" id="export-csv" title="Export CSV">
          <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 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
          </svg>
          CSV
        </button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="table table-sm">
        <thead>
          <tr class="text-xs uppercase text-base-content/60">
            <th class="cursor-pointer hover:text-base-content" data-sort="name">Aggregate</th>
            <th class="text-center">ES</th>
            <th class="text-right cursor-pointer hover:text-base-content" data-sort="instances">Instances</th>
            <th class="text-right cursor-pointer hover:text-base-content" data-sort="head_position">Head Position</th>
            <th>Stream Category</th>
            <th>Domain</th>
          </tr>
        </thead>
        <tbody id="streams-tbody">
          <tr><td colspan="6" class="text-center text-base-content/50 py-8">Loading...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Outbox Status -->
<div class="card bg-base-100 shadow-sm mb-6">
  <div class="card-body p-4">
    <h2 class="card-title text-lg mb-4">Outbox Status</h2>
    <div class="overflow-x-auto">
      <table class="table table-sm">
        <thead>
          <tr class="text-xs uppercase text-base-content/60">
            <th>Domain</th>
            <th class="text-right">Pending</th>
            <th class="text-right">Processing</th>
            <th class="text-right">Published</th>
            <th class="text-right">Failed</th>
            <th class="text-right">Abandoned</th>
          </tr>
        </thead>
        <tbody id="outbox-tbody">
          <tr><td colspan="6" class="text-center text-base-content/50 py-4">Loading...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

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