<div class="hud-wrapper" cdkDrag>

  <!-- Toggle button — always visible, also a drag handle when panel is collapsed -->
  <button class="hud-toggle" cdkDragHandle (click)="toggle()" [title]="collapsed() ? 'Expand HUD' : 'Collapse HUD'">
    <span class="hud-toggle-icon">{{ collapsed() ? '📊' : '✕' }}</span>
    <span class="hud-status-dot" [class.connected]="surveillance.connected()"></span>
  </button>

  <!-- Expanded panel -->
  @if (!collapsed()) {
    <div class="hud-panel">
      <div class="hud-header" cdkDragHandle>
        <span class="hud-drag-grip">⠿</span>
        <span class="hud-title">SYSTEM MONITOR</span>
        <!-- Status LEDs — Nest + n8n always visible in the header -->
        <div class="hud-header-leds">
          <span class="hud-led-group" title="NestJS Socket: {{ surveillance.connected() ? 'Connected' : 'Offline' }}">
            <span class="hud-led-dot"
                  [class.led-green]="surveillance.connected()"
                  [class.led-red]="!surveillance.connected()">
            </span>
            <span class="hud-led-label">Nest</span>
          </span>
          <span class="hud-led-group" title="n8n Agent: {{ surveillance.n8nStatus() }}">
            <span class="hud-led-dot"
                  [class.led-green]="surveillance.n8nStatus() === 'ready'"
                  [class.led-yellow]="surveillance.n8nStatus() === 'checking'"
                  [class.led-red]="surveillance.n8nStatus() === 'not-ready'">
            </span>
            <span class="hud-led-label">n8n</span>
          </span>
        </div>
      </div>

      @if (!surveillance.connected()) {
        <div class="hud-waiting hud-offline">
          <span class="hud-offline-icon">⚠</span>
          <span>Backend Offline</span>
        </div>
      } @else if (surveillance.metrics().length === 0) {
        <div class="hud-waiting">
          <div class="hud-spinner"></div>
          <span>Connecting to backend...</span>
        </div>
      }

      @for (metric of surveillance.metrics(); track trackByService($index, metric)) {
        <div class="hud-row">
          <div class="hud-service-name">{{ metric.service }}</div>

          <div class="hud-metric-block">
            <div class="hud-metric-label">CPU</div>
            <div class="hud-bar-track">
              <div
                class="hud-bar-fill"
                [style.width]="cpuBarWidth(metric.cpu)"
                [style.background]="cpuColor(metric.cpu)">
              </div>
            </div>
            <div class="hud-metric-value">{{ metric.cpu.toFixed(1) }}%</div>
          </div>

          <div class="hud-metric-block">
            <div class="hud-metric-label">RAM</div>
            <div class="hud-ram-value">{{ formatBytes(metric.memory) }}</div>
          </div>
        </div>
      }

      <!-- Service status indicators -->
      <div class="hud-service-status">
        <div class="hud-svc-row">
          <span class="hud-svc-label">NestJS</span>
          <span class="hud-svc-dot"
                [class.dot-green]="surveillance.connected()"
                [class.dot-red]="!surveillance.connected()">
          </span>
          <span class="hud-svc-state"
                [class.state-online]="surveillance.connected()"
                [class.state-offline]="!surveillance.connected()">
            {{ surveillance.connected() ? 'Connected' : 'Offline — Socket features disabled' }}
          </span>
        </div>
        <div class="hud-svc-row">
          <span class="hud-svc-label">n8n</span>
          <span class="hud-svc-dot"
                [class.dot-green]="surveillance.n8nStatus() === 'ready'"
                [class.dot-yellow]="surveillance.n8nStatus() === 'checking'"
                [class.dot-red]="surveillance.n8nStatus() === 'not-ready'">
          </span>
          <span class="hud-svc-state"
                [class.state-online]="surveillance.n8nStatus() === 'ready'"
                [class.state-warn]="surveillance.n8nStatus() === 'checking'"
                [class.state-offline]="surveillance.n8nStatus() === 'not-ready'">
            {{ surveillance.n8nStatus() === 'ready' ? 'Agent Ready'
             : surveillance.n8nStatus() === 'not-ready' ? 'Agent Not Ready'
             : 'Checking...' }}
          </span>
        </div>
      </div>

      <div class="hud-footer">PID polling @ 500ms · Lego 09</div>
    </div>
  }

</div>
