{% extends "base.html" %}

{% block title %}Processes{% endblock %}

{% block content %}
<!-- Summary Cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Process Managers</div>
      <div class="stat-value text-lg font-mono-metric" id="summary-total">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Total Instances</div>
      <div class="stat-value text-lg font-mono-metric" id="summary-instances">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Healthy</div>
      <div class="stat-value text-lg font-mono-metric text-success" id="summary-healthy">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Lagging</div>
      <div class="stat-value text-lg font-mono-metric text-warning" id="summary-lagging">--</div>
    </div>
  </div>
</div>

<!-- Process Manager Table -->
<div class="card bg-base-100 shadow-sm mb-6">
  <div class="card-body p-4">
    <!-- Filter Bar -->
    <div class="flex flex-wrap items-center gap-3 mb-4">
      <label class="input input-sm input-bordered flex items-center gap-2 w-64">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70">
          <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
        </svg>
        <input type="text" class="grow" placeholder="Search processes..." id="process-search" data-search-input />
      </label>
      <select class="select select-sm select-bordered" id="process-status-filter">
        <option value="all">All Statuses</option>
        <option value="ok">Healthy</option>
        <option value="lagging">Lagging</option>
        <option value="unknown">Unknown</option>
      </select>
      <div class="flex-1"></div>
      <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>

    <!-- PM Table -->
    <div class="overflow-x-auto">
      <table class="table table-sm table-compact">
        <thead>
          <tr>
            <th class="w-8"></th>
            <th class="cursor-pointer hover:text-primary" data-sort="name">
              Process Manager
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="cursor-pointer hover:text-primary text-right" data-sort="instances">
              Instances
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="cursor-pointer hover:text-primary text-right" data-sort="processed">
              Processed
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="cursor-pointer hover:text-primary text-right" data-sort="errors">
              Errors
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="cursor-pointer hover:text-primary text-right" data-sort="latency">
              Avg Latency
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="cursor-pointer hover:text-primary text-right" data-sort="lag">
              Lag
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 inline-block ml-0.5 opacity-30 sort-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
              </svg>
            </th>
            <th class="text-right">DLQ</th>
            <th>Streams</th>
          </tr>
        </thead>
        <tbody id="processes-tbody">
          <tr>
            <td colspan="9" class="text-center text-base-content/50 py-8">
              <span class="loading loading-spinner loading-sm"></span>
              Loading process managers...
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Instance Explorer (hidden by default) -->
<div class="card bg-base-100 shadow-sm mb-6 hidden" id="instance-explorer">
  <div class="card-body p-4">
    <div class="flex items-center justify-between mb-3">
      <h2 class="card-title text-sm font-semibold">
        <span id="explorer-pm-name">--</span>
        <span class="text-base-content/50 font-normal">Instances</span>
      </h2>
      <button class="btn btn-sm btn-ghost" id="explorer-close" aria-label="Close">
        <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>
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="table table-xs">
        <thead>
          <tr>
            <th>Instance ID</th>
            <th class="text-right">Version</th>
            <th>Status</th>
            <th>Current State</th>
            <th>Started</th>
            <th>Last Activity</th>
            <th class="text-right">Events</th>
          </tr>
        </thead>
        <tbody id="instances-tbody">
          <tr>
            <td colspan="7" class="text-center text-base-content/50 py-4">
              <span class="loading loading-spinner loading-sm"></span>
              Loading instances...
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

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