<!-- htmlhint doctype-first:false -->
<div class="space-y-6" x-data="overviewDashboard()" x-init="init()">
  <!-- Header -->
  <div class="flex justify-between items-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center">
      <svg class="h-8 w-8 mr-3 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
      </svg>
      System Overview
    </h2>
    <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
      <span class="flex items-center">
        <svg class="h-4 w-4 mr-1 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Uptime: {% set hours = uptime_seconds // 3600 %}{% set minutes = (uptime_seconds % 3600) // 60 %}{% if hours > 0 %}{{ hours }}h {{ minutes }}m{% else %}{{ minutes }}m {{ uptime_seconds % 60 }}s{% endif %}
      </span>
      <span>v{{ version }}</span>
    </div>
  </div>

  <!-- Key Metrics Cards -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <!-- Total Executions -->
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800 shadow-sm">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-2xl font-bold text-blue-900 dark:text-blue-100">{{ "{:,}".format(total_executions|int) }}</div>
          <div class="text-sm text-blue-700 dark:text-blue-300 mt-1">Total Executions</div>
        </div>
        <div class="text-blue-500 dark:text-blue-400">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Success Rate -->
    <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-4 border border-green-200 dark:border-green-800 shadow-sm">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-2xl font-bold text-green-900 dark:text-green-100">{{ "%.1f"|format(success_rate) }}%</div>
          <div class="text-sm text-green-700 dark:text-green-300 mt-1">Success Rate</div>
        </div>
        <div class="text-green-500 dark:text-green-400">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Avg Latency -->
    <div class="bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 rounded-lg p-4 border border-amber-200 dark:border-amber-800 shadow-sm">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-2xl font-bold text-amber-900 dark:text-amber-100">{{ "%.0f"|format(avg_latency_ms) }}ms</div>
          <div class="text-sm text-amber-700 dark:text-amber-300 mt-1">Avg Latency</div>
        </div>
        <div class="text-amber-500 dark:text-amber-400">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Active Entities -->
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800 shadow-sm">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-2xl font-bold text-purple-900 dark:text-purple-100">{{ servers_active + tools_active + prompts_active + resources_active }}</div>
          <div class="text-sm text-purple-700 dark:text-purple-300 mt-1">Active Entities</div>
        </div>
        <div class="text-purple-500 dark:text-purple-400">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Architecture Flow Diagram -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-x-auto">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Architecture Flow</h3>
    <div class="min-w-[800px]">
      <svg id="overview-architecture" class="w-full" viewBox="0 0 900 440" xmlns="http://www.w3.org/2000/svg">
        <!-- Definitions for gradients and markers -->
        <defs>
          <!-- Arrow marker -->
          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" class="fill-gray-400 dark:fill-gray-500"/>
          </marker>
          <!-- Animated dash pattern -->
          <style>
            @keyframes dash {
              to { stroke-dashoffset: -20; }
            }
            .flow-line {
              stroke-dasharray: 5, 5;
              animation: dash 1s linear infinite;
            }
          </style>
        </defs>

        <!-- INPUT SECTION - Virtual Servers -->
        <g class="input-section">
          <!-- Section Label -->
          <text x="80" y="30" class="fill-gray-500 dark:fill-gray-400 text-xs font-semibold" text-anchor="middle">INPUTS</text>

          <!-- Virtual Servers Box -->
          <rect x="20" y="120" width="120" height="140" rx="8" class="fill-blue-50 dark:fill-blue-900/30 stroke-blue-300 dark:stroke-blue-700" stroke-width="2"/>
          <text x="80" y="150" class="fill-blue-700 dark:fill-blue-300 text-sm font-semibold" text-anchor="middle">Virtual Servers</text>
          <text x="80" y="175" class="fill-blue-600 dark:fill-blue-400 text-xs" text-anchor="middle">🔗</text>

          <!-- Count Badge -->
          <rect x="55" y="190" width="50" height="24" rx="12" class="fill-blue-500"/>
          <text x="80" y="207" class="fill-white text-sm font-bold" text-anchor="middle">{{ servers_active }}/{{ servers_total }}</text>
          <text x="80" y="235" class="fill-blue-600 dark:fill-blue-400 text-xs" text-anchor="middle">active</text>
        </g>

        <!-- CENTER SECTION - ContextForge -->
        <g class="center-section">
          <!-- Section Label -->
          <text x="450" y="30" class="fill-gray-500 dark:fill-gray-400 text-xs font-semibold" text-anchor="middle">GATEWAY</text>

          <!-- Main ContextForge Box -->
          <rect x="320" y="60" width="260" height="260" rx="12" class="fill-indigo-50 dark:fill-indigo-900/20 stroke-indigo-400 dark:stroke-indigo-600" stroke-width="3"/>

          <!-- ContextForge Header -->
          <rect x="320" y="60" width="260" height="50" rx="12" class="fill-indigo-500"/>
          <rect x="320" y="90" width="260" height="20" class="fill-indigo-500"/>
          <text x="450" y="92" class="fill-white text-base font-bold" text-anchor="middle">ContextForge</text>

          <!-- Plugins Section -->
          <text x="340" y="140" class="fill-indigo-700 dark:fill-indigo-300 text-sm font-semibold">Middleware (Plugins)</text>

          <!-- Plugin badges -->
          <rect x="340" y="155" width="220" height="30" rx="6" class="fill-purple-100 dark:fill-purple-900/30 stroke-purple-300 dark:stroke-purple-700" stroke-width="1"/>
          <text x="450" y="175" class="fill-purple-700 dark:fill-purple-300 text-xs" text-anchor="middle">{{ plugins_enabled }} / {{ plugins_total }} plugins enabled</text>

          <!-- Hook badges -->
          {% for hook, count in plugins_by_hook.items() %}
          {% if loop.index <= 4 %}
          <rect x="{{ 340 + ((loop.index0 % 2) * 110) }}" y="{{ 195 + ((loop.index0 // 2) * 35) }}" width="100" height="28" rx="4" class="fill-gray-100 dark:fill-gray-700 stroke-gray-300 dark:stroke-gray-600" stroke-width="1"/>
          <text x="{{ 390 + ((loop.index0 % 2) * 110) }}" y="{{ 214 + ((loop.index0 // 2) * 35) }}" class="fill-gray-600 dark:fill-gray-300 text-xs" text-anchor="middle">{{ hook[:12] }}: {{ count }}</text>
          {% endif %}
          {% endfor %}

          <!-- Features row -->
          <g transform="translate(340, 275)">
            <rect width="60" height="24" rx="4" class="fill-green-100 dark:fill-green-900/30"/>
            <text x="30" y="16" class="fill-green-700 dark:fill-green-300 text-xs" text-anchor="middle">Auth</text>
            <rect x="70" width="70" height="24" rx="4" class="fill-green-100 dark:fill-green-900/30"/>
            <text x="105" y="16" class="fill-green-700 dark:fill-green-300 text-xs" text-anchor="middle">Rate Limit</text>
            <rect x="150" width="70" height="24" rx="4" class="fill-green-100 dark:fill-green-900/30"/>
            <text x="185" y="16" class="fill-green-700 dark:fill-green-300 text-xs" text-anchor="middle">Metrics</text>
          </g>
        </g>

        <!-- INFRASTRUCTURE SECTION - Below ContextForge -->
        <g class="infrastructure-section">
          <!-- Section Label -->
          <text x="450" y="345" class="fill-gray-500 dark:fill-gray-400 text-xs font-semibold" text-anchor="middle">INFRASTRUCTURE</text>

          <!-- Database Status -->
          <rect x="335" y="355" width="110" height="45" rx="6" class="{% if db_reachable %}fill-green-50 dark:fill-green-900/30 stroke-green-300 dark:stroke-green-700{% else %}fill-red-50 dark:fill-red-900/30 stroke-red-300 dark:stroke-red-700{% endif %}" stroke-width="2"/>
          <text x="390" y="375" class="{% if db_reachable %}fill-green-700 dark:fill-green-300{% else %}fill-red-700 dark:fill-red-300{% endif %} text-xs font-semibold" text-anchor="middle">{{ db_dialect | capitalize }}</text>
          <text x="390" y="392" class="{% if db_reachable %}fill-green-600 dark:fill-green-400{% else %}fill-red-600 dark:fill-red-400{% endif %} text-xs" text-anchor="middle">{% if db_reachable %}Connected{% else %}Disconnected{% endif %}</text>

          <!-- Cache Status -->
          <rect x="455" y="355" width="110" height="45" rx="6" class="{% if cache_type == 'redis' %}{% if redis_reachable %}fill-green-50 dark:fill-green-900/30 stroke-green-300 dark:stroke-green-700{% else %}fill-red-50 dark:fill-red-900/30 stroke-red-300 dark:stroke-red-700{% endif %}{% else %}fill-gray-50 dark:fill-gray-700 stroke-gray-300 dark:stroke-gray-600{% endif %}" stroke-width="2"/>
          <text x="510" y="375" class="{% if cache_type == 'redis' %}{% if redis_reachable %}fill-green-700 dark:fill-green-300{% else %}fill-red-700 dark:fill-red-300{% endif %}{% else %}fill-gray-700 dark:fill-gray-300{% endif %} text-xs font-semibold" text-anchor="middle">{{ cache_type | capitalize }}</text>
          <text x="510" y="392" class="{% if cache_type == 'redis' %}{% if redis_reachable %}fill-green-600 dark:fill-green-400{% else %}fill-red-600 dark:fill-red-400{% endif %}{% else %}fill-gray-500 dark:fill-gray-400{% endif %} text-xs" text-anchor="middle">{% if cache_type == 'redis' %}{% if redis_reachable %}Connected{% else %}Disconnected{% endif %}{% else %}In-Memory{% endif %}</text>

          <!-- Connection line from ContextForge to Infrastructure -->
          <line x1="450" y1="320" x2="450" y2="355" class="stroke-gray-300 dark:stroke-gray-600" stroke-width="2" stroke-dasharray="4,4"/>
        </g>

        <!-- OUTPUT SECTION -->
        <g class="output-section">
          <!-- Section Label -->
          <text x="780" y="30" class="fill-gray-500 dark:fill-gray-400 text-xs font-semibold" text-anchor="middle">OUTPUTS</text>

          <!-- MCP Servers -->
          <rect x="700" y="50" width="120" height="55" rx="6" class="fill-teal-50 dark:fill-teal-900/30 stroke-teal-300 dark:stroke-teal-700" stroke-width="2"/>
          <text x="760" y="72" class="fill-teal-700 dark:fill-teal-300 text-xs font-semibold" text-anchor="middle">MCP Servers</text>
          <text x="760" y="92" class="fill-teal-600 dark:fill-teal-400 text-sm font-bold" text-anchor="middle">{{ gateways_active }}/{{ gateways_total }}</text>

          {% if a2a_enabled %}
          <!-- A2A Agents -->
          <rect x="700" y="115" width="120" height="55" rx="6" class="fill-orange-50 dark:fill-orange-900/30 stroke-orange-300 dark:stroke-orange-700" stroke-width="2"/>
          <text x="760" y="137" class="fill-orange-700 dark:fill-orange-300 text-xs font-semibold" text-anchor="middle">A2A Agents</text>
          <text x="760" y="157" class="fill-orange-600 dark:fill-orange-400 text-sm font-bold" text-anchor="middle">{{ a2a_active }}/{{ a2a_total }}</text>
          {% endif %}

          <!-- Tools -->
          <rect x="700" y="180" width="120" height="55" rx="6" class="fill-rose-50 dark:fill-rose-900/30 stroke-rose-300 dark:stroke-rose-700" stroke-width="2"/>
          <text x="760" y="202" class="fill-rose-700 dark:fill-rose-300 text-xs font-semibold" text-anchor="middle">Tools</text>
          <text x="760" y="222" class="fill-rose-600 dark:fill-rose-400 text-sm font-bold" text-anchor="middle">{{ tools_active }}/{{ tools_total }}</text>

          <!-- Prompts -->
          <rect x="700" y="245" width="120" height="55" rx="6" class="fill-cyan-50 dark:fill-cyan-900/30 stroke-cyan-300 dark:stroke-cyan-700" stroke-width="2"/>
          <text x="760" y="267" class="fill-cyan-700 dark:fill-cyan-300 text-xs font-semibold" text-anchor="middle">Prompts</text>
          <text x="760" y="287" class="fill-cyan-600 dark:fill-cyan-400 text-sm font-bold" text-anchor="middle">{{ prompts_active }}/{{ prompts_total }}</text>

          <!-- Resources -->
          <rect x="700" y="310" width="120" height="55" rx="6" class="fill-lime-50 dark:fill-lime-900/30 stroke-lime-300 dark:stroke-lime-700" stroke-width="2"/>
          <text x="760" y="332" class="fill-lime-700 dark:fill-lime-300 text-xs font-semibold" text-anchor="middle">Resources</text>
          <text x="760" y="352" class="fill-lime-600 dark:fill-lime-400 text-sm font-bold" text-anchor="middle">{{ resources_active }}/{{ resources_total }}</text>
        </g>

        <!-- CONNECTION LINES -->
        <!-- Input to Center -->
        <line x1="140" y1="190" x2="320" y2="190" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>

        <!-- Center to Outputs -->
        <line x1="580" y1="77" x2="700" y2="77" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>
        {% if a2a_enabled %}
        <line x1="580" y1="142" x2="700" y2="142" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>
        {% endif %}
        <line x1="580" y1="207" x2="700" y2="207" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>
        <line x1="580" y1="272" x2="700" y2="272" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>
        <line x1="580" y1="310" x2="640" y2="337" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2"/>
        <line x1="640" y1="337" x2="700" y2="337" class="stroke-gray-400 dark:stroke-gray-500 flow-line" stroke-width="2" marker-end="url(#arrowhead)"/>
      </svg>
    </div>
  </div>

  <!-- Quick Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Virtual Servers Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="showTab('catalog')" onkeydown="handleKeydown(event, () => showTab('catalog'))" tabindex="0" role="button" aria-label="View Virtual Servers">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg mr-3">
            <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
            </svg>
          </div>
          <div>
            <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">Virtual Servers</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">Composite MCP endpoints</p>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ servers_total }}</div>
          <div class="text-xs text-green-600 dark:text-green-400">{{ servers_active }} active</div>
        </div>
      </div>
    </div>

    <!-- Tools Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="showTab('tools')" onkeydown="handleKeydown(event, () => showTab('tools'))" tabindex="0" role="button" aria-label="View Tools">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="p-2 bg-rose-100 dark:bg-rose-900/30 rounded-lg mr-3">
            <svg class="h-6 w-6 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
          </div>
          <div>
            <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">Tools</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">Registered tool endpoints</p>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-rose-600 dark:text-rose-400">{{ tools_total }}</div>
          <div class="text-xs text-green-600 dark:text-green-400">{{ tools_active }} active</div>
        </div>
      </div>
    </div>

    <!-- Plugins Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="showTab('plugins')" onkeydown="handleKeydown(event, () => showTab('plugins'))" tabindex="0" role="button" aria-label="View Plugins">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg mr-3">
            <svg class="h-6 w-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
            </svg>
          </div>
          <div>
            <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">Plugins</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">Middleware extensions</p>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ plugins_total }}</div>
          <div class="text-xs text-green-600 dark:text-green-400">{{ plugins_enabled }} enabled</div>
        </div>
      </div>
    </div>
  </div>
</div>
