// <Shell> — page chrome every swarm-ui route mounts inside: a header
// bar (swarm branding) plus a nav row linking the app's real routes.
// Preact-native styling — `./Shell.css` imported right here, not
// wired centrally, so the component and its styles travel together
// (esbuild folds every imported `.css` reachable from `main.tsx` into
// one `main.css` companion output, see build.mjs) — deliberately not
// @hive/shared's chrome.css page-header pattern, which is the per-hive
// MPA dashboard's visual language. This package is a clean field, not
// an inheritor of that look.
//
// Route list lives here, not prop-drilled from App — one small SPA
// has exactly one place that needs to know its own nav, and this is
// it. Grows additively as real routes land (a swarm-wide agent roster
// is next); no speculative entries.
import type { ComponentChildren } from 'preact';
import { Link, useRoute } from 'wouter-preact';
import { LinksMenu } from './LinksMenu.js';
import './Shell.css';

const NAV_ITEMS: { href: string; label: string }[] = [
  { href: '/', label: 'overview' },
  { href: '/create-agent', label: 'new agent' },
  { href: '/jobs', label: 'jobs' },
  { href: '/components', label: 'components' },
];

function NavLink({ href, label }: { href: string; label: string }) {
  const [active] = useRoute(href);
  return (
    <Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}>
      {label}
    </Link>
  );
}

export function Shell({ children }: { children: ComponentChildren }) {
  return (
    <div class="shell">
      <header class="shell-header">
        <span class="shell-brand">hyperhive swarm</span>
        <nav class="shell-nav">
          {NAV_ITEMS.map((item) => (
            <NavLink key={item.href} href={item.href} label={item.label} />
          ))}
        </nav>
        <LinksMenu />
      </header>
      <div class="shell-body">{children}</div>
    </div>
  );
}