import { html, useState, useEffect } from '../lib/preact.js';

export function Header({ sessions }) {
  const [clock, setClock] = useState(() => new Date());

  useEffect(() => {
    const timer = setInterval(() => setClock(new Date()), 30000);
    return () => clearInterval(timer);
  }, []);

  const counts = {
    attention: sessions.filter(s => s.status === 'needs_attention').length,
    active: sessions.filter(s => s.status === 'active').length,
    starting: sessions.filter(s => s.status === 'starting').length,
    done: sessions.filter(s => s.status === 'done').length,
  };
  const total = sessions.length;

  return html`
    <header class="sticky top-0 z-50 px-4 pt-4 sm:px-6 sm:pt-6">
      <div class="glass-panel rounded-2xl px-4 py-4 sm:px-6">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="min-w-0">
            <div class="inline-flex items-center gap-2 rounded-full border border-starting/40 bg-starting/10 px-3 py-1 text-micro font-medium uppercase tracking-[0.24em] text-starting">
              <span class="h-1.5 w-1.5 rounded-full bg-starting animate-float"></span>
              Control Plane
            </div>
            <h1 class="mt-3 truncate font-display text-xl font-semibold text-bright sm:text-2xl">
              Agent Mission Control
            </h1>
            <p class="mt-1 text-sm text-dim">
              ${total} live session${total === 1 ? '' : 's'} • Updated ${clock.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
            </p>
          </div>

          <div class="grid grid-cols-2 gap-2 text-xs sm:grid-cols-4 sm:gap-3">
            <div class="rounded-xl border border-attention/40 bg-attention/12 px-3 py-2 text-attention">
              <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.attention}</div>
              <div class="text-micro uppercase tracking-[0.16em]">Attention</div>
            </div>
            <div class="rounded-xl border border-active/40 bg-active/12 px-3 py-2 text-active">
              <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.active}</div>
              <div class="text-micro uppercase tracking-[0.16em]">Active</div>
            </div>
            <div class="rounded-xl border border-starting/40 bg-starting/12 px-3 py-2 text-starting">
              <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.starting}</div>
              <div class="text-micro uppercase tracking-[0.16em]">Starting</div>
            </div>
            <div class="rounded-xl border border-done/40 bg-done/12 px-3 py-2 text-done">
              <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.done}</div>
              <div class="text-micro uppercase tracking-[0.16em]">Done</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  `;
}