import { Link, Outlet } from '@tanstack/react-router'

const navLinks = [
  { to: '/gardens', label: 'Gardens' },
  { to: '/plants', label: 'Plants' },
] as const

// TanStack Router concatenates the base className with activeProps/inactiveProps,
// so state-specific and conflicting utilities (text-muted vs text-fg) live in the
// state props — never in the base — to avoid ambiguous overrides.
const navLinkBase = 'rounded-md px-3 py-1.5 text-sm font-medium transition-colors'
const navLinkActive = 'bg-border/60 text-fg'
const navLinkInactive = 'text-muted hover:bg-border/60 hover:text-fg'

/** Top-level chrome: a sticky nav bar plus the routed page in an <Outlet>. */
export function AppShell() {
  return (
    <div className="flex min-h-full flex-col">
      <header className="sticky top-0 z-10 border-b border-border bg-surface/90 backdrop-blur">
        <nav className="mx-auto flex max-w-5xl items-center gap-4 px-4 py-3">
          <Link to="/gardens" className="text-lg font-semibold text-accent-strong">
            🌱 pansy
          </Link>
          <div className="flex flex-1 items-center gap-1">
            {navLinks.map((l) => (
              <Link
                key={l.to}
                to={l.to}
                className={navLinkBase}
                activeProps={{ className: navLinkActive }}
                inactiveProps={{ className: navLinkInactive }}
              >
                {l.label}
              </Link>
            ))}
          </div>
          <Link
            to="/login"
            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg"
          >
            Sign in
          </Link>
        </nav>
      </header>

      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-6">
        <Outlet />
      </main>
    </div>
  )
}