website/client/src/components/SiteHeader.jsx

import { useMemo } from 'react'
import { Link, NavLink } from 'react-router-dom'
import MoonDot from './MoonDot.jsx'
import BrandLogo from './BrandLogo.jsx'
import { useAuth } from '../contexts/AuthContext.jsx'
import { useSite } from '../contexts/SiteContext.jsx'
import NavDropdown from './NavDropdown.jsx'
import { buildPublicNav, pruneNav } from '../lib/navOverrides.js'
import { parseJsonSetting } from '../lib/settingsJson.js'
import { withModuleNav } from '../modules/nav.js'
import { useFeatureGate } from '../modules/features.jsx'

// One consistent top nav for the whole public site. Every page gets the same
// main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
//
// A row may carry a `feature`, naming a surface an installed module can disable
// or gate to a higher audience; it is hidden when this viewer cannot reach it,
// so we never render a link that would 403. No CORE row carries one today — the
// nine that did were UO and left with the client half in slice 3 — but the gate
// is not dead code: a module's rows join this list and bring their own flags,
// resolved by the module that registered them (modules/featureGate.js).
//
// Exported because Admin -> Navigation edits this list. It stays declared here,
// with this component as its owner: the editor may only relabel, reorder and
// hide what it finds, and `to`/`feature` are never its to change (§7). An
// installed module's rows join it in `withModuleNav` below — before the override
// merge, so an admin can edit those rows exactly as they edit these.
export const NAV = [
  { label: 'Home', to: '/', end: true },
  { label: 'News', to: '/site/news' },
  { label: 'Screenshots', to: '/site/screenshots' },
  { label: 'Five on Friday', to: '/site/five-on-friday' },
  { label: 'Newsletter', to: '/site/newsletter' },
  { label: 'Wiki', to: '/wiki' },
  { label: 'About', to: '/site/about' },
]

const linkStyle = ({ isActive }) => ({
  background: isActive ? 'var(--accent)' : undefined,
  color: isActive ? 'var(--bg-deep)' : undefined,
  borderColor: isActive ? 'var(--accent)' : undefined,
})

export default function SiteHeader() {
  const { user, loading } = useAuth()
  const { siteTitle, settings } = useSite()
  const isVisible = useFeatureGate()

  // Core's rows plus every installed module's. Computed once: the registry is
  // fixed before the first render and there is no unregistering, so this cannot
  // change during a session (modules/nav.js).
  const baseNav = useMemo(() => withModuleNav(NAV, 'public'), [])

  // An admin may relabel, reorder and hide these entries from Admin →
  // Navigation, and may group them into dropdown sections alongside links of
  // their own (THEMING_AND_NAV.md §7). Two things about the order here:
  //
  //   • the override merge runs FIRST and the feature filter after it, so the
  //     filter stays the boundary — an override cannot un-hide a surface this
  //     viewer may not see, whatever it says. `pruneNav` applies the same
  //     check inside a section and drops one it leaves empty, so a dropdown
  //     never opens onto nothing;
  //   • with no stored row this is the coded NAV, in code order, so an
  //     untouched instance renders exactly what it renders today.
  const nav = useMemo(() => {
    const tree = buildPublicNav(baseNav, parseJsonSetting(settings.nav_public))
    return pruneNav(tree, isVisible)
  }, [baseNav, settings.nav_public, isVisible])

  // Where the auth entry points: staff → admin, player → portal, else sign in.
  let account
  if (user && user.role && user.role !== 'player') account = { label: 'Admin', to: '/admin' }
  else if (user) account = { label: 'My Account', to: '/player' }
  else account = { label: 'Sign in', to: '/account/login' }

  return (
    <header
      style={{
        borderBottom: '1px solid var(--line)',
        background: 'rgba(9,13,18,0.86)',
        backdropFilter: 'blur(8px)',
        position: 'sticky',
        top: 0,
        zIndex: 30,
      }}
    >
      <div
        className="shell"
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '14px 0', flexWrap: 'wrap' }}
      >
        <Link
          to="/"
          className="display"
          style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
        >
          <BrandLogo height={22} />
          <MoonDot />
          {siteTitle}
        </Link>
        <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          {nav.map((l) =>
            l.kind === 'section' ? (
              <NavDropdown key={l.id} label={l.label} items={l.items} linkStyle={linkStyle} />
            ) : (
              <NavLink key={l.kind === 'link' ? l.id : l.to} to={l.to} end={l.end} className="pill" style={linkStyle}>
                {l.label}
              </NavLink>
            ),
          )}
          {!loading && (
            <NavLink
              to={account.to}
              className="pill"
              style={{ marginLeft: 6, borderColor: 'var(--accent)', color: 'var(--accent-bright)' }}
            >
              {account.label}
            </NavLink>
          )}
        </nav>
      </div>
    </header>
  )
}