{% extends "base.html" %}

{% block title %}Domain{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">Domain</h1>
  <div class="text-sm text-base-content/50">Explore domain topology, event flows, and process managers</div>
</div>

<!-- Summary Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3 mb-6">
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Aggregates</div>
      <div class="stat-value text-lg" id="dv-stat-aggregates">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Commands</div>
      <div class="stat-value text-lg" id="dv-stat-commands">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Events</div>
      <div class="stat-value text-lg" id="dv-stat-events">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Handlers</div>
      <div class="stat-value text-lg" id="dv-stat-handlers">--</div>
    </div>
  </div>
  <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" id="dv-stat-process-managers">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Projections</div>
      <div class="stat-value text-lg" id="dv-stat-projections">--</div>
    </div>
  </div>
  <div class="stats shadow-sm bg-base-100">
    <div class="stat px-4 py-3">
      <div class="stat-title text-xs">Diagnostics</div>
      <div class="stat-value text-lg" id="dv-stat-diagnostics">--</div>
    </div>
  </div>
</div>

<!-- View Tabs -->
<div role="tablist" class="tabs tabs-bordered mb-6" id="dv-tabs">
  <a role="tab" class="tab tab-active" data-tab="topology">Topology</a>
  <a role="tab" class="tab" data-tab="event-flows">Event Flows</a>
  <a role="tab" class="tab" data-tab="process-managers">Process Managers</a>
</div>

<!-- Tab Panels -->
<div id="dv-panel-topology" class="dv-panel">
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body p-4">
      <div id="dv-topology-container" class="w-full" style="height: calc(100vh - 200px); min-height: 400px;">
        <div class="flex items-center justify-center h-64 text-base-content/40">
          Loading topology...
        </div>
      </div>
    </div>
  </div>
</div>

<div id="dv-panel-event-flows" class="dv-panel hidden">
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body p-4">
      <div class="flex flex-wrap items-center gap-3 mb-3 text-xs" id="dv-flow-filters">
        <div class="dv-search-wrapper relative">
          <input type="text" id="dv-flow-search" class="input input-xs input-bordered w-56"
                 placeholder="Search elements..." autocomplete="off">
          <button id="dv-flow-search-clear" class="dv-search-clear hidden" title="Clear search" aria-label="Clear search">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
          <ul id="dv-flow-search-results" class="dv-search-dropdown hidden"></ul>
        </div>
        <div class="border-l border-base-300 h-4 mx-1"></div>
        <label class="flex items-center gap-1.5 cursor-pointer">
          <input type="checkbox" checked class="checkbox checkbox-xs" data-flow-filter="command">
          <span>Commands</span>
        </label>
        <label class="flex items-center gap-1.5 cursor-pointer">
          <input type="checkbox" checked class="checkbox checkbox-xs" data-flow-filter="command_handler">
          <span>Cmd Handlers</span>
        </label>
        <label class="flex items-center gap-1.5 cursor-pointer">
          <input type="checkbox" checked class="checkbox checkbox-xs" data-flow-filter="event_handler">
          <span>Evt Handlers</span>
        </label>
        <label class="flex items-center gap-1.5 cursor-pointer">
          <input type="checkbox" checked class="checkbox checkbox-xs" data-flow-filter="process_manager">
          <span>Process Managers</span>
        </label>
        <label class="flex items-center gap-1.5 cursor-pointer">
          <input type="checkbox" checked class="checkbox checkbox-xs" data-flow-filter="projector">
          <span>Projectors</span>
        </label>
      </div>
      <div id="dv-flows-container" class="w-full" style="height: calc(100vh - 200px); min-height: 400px;">
        <div class="flex items-center justify-center h-64 text-base-content/40">
          Loading event flows...
        </div>
      </div>
    </div>
  </div>
</div>

<div id="dv-panel-process-managers" class="dv-panel hidden">
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body p-4">
      <div id="dv-pm-container" class="w-full" style="height: calc(100vh - 200px); min-height: 400px;">
        <div class="flex items-center justify-center h-64 text-base-content/40">
          Loading process managers...
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Detail Panel Backdrop -->
<div id="dv-detail-backdrop" class="dv-detail-backdrop"></div>

<!-- Aggregate Detail Panel (slide-in from right) -->
<div id="dv-detail-panel" class="dv-detail-panel">
  <div class="dv-detail-header">
    <div class="flex-1 min-w-0">
      <h2 class="text-lg font-bold truncate" id="dv-detail-title">--</h2>
      <div class="text-xs text-base-content/40 font-mono truncate" id="dv-detail-fqn"></div>
    </div>
    <button class="btn btn-sm btn-ghost btn-square" id="dv-detail-close" title="Close (Esc)" aria-label="Close detail panel">
      <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="dv-detail-body" id="dv-detail-content">
    <div class="text-base-content/40 text-sm p-4">Select an aggregate to view details.</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/domain-topology.js" defer></script>
<script src="/static/js/domain-detail.js" defer></script>
<script src="/static/js/domain-flows.js" defer></script>
<script src="/static/js/domain-processes.js" defer></script>
<script src="/static/js/domain.js" defer></script>
{% endblock %}