import { Link, NavLink } from 'react-router-dom'
import MoonDot from './MoonDot.jsx'
import { useAuth } from '../contexts/AuthContext.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).
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: 'Shard', to: '/site/shard' },
  { 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()

  // Where the auth entry points: staff → admin, player → portal, else sign in.
  const account =
    user && user.role && user.role !== 'player'
      ? { label: 'Admin', to: '/admin' }
      : user
        ? { label: 'My Account', to: '/player' }
        : { 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 }}
        >
          <MoonDot />
          UOMysticmoon
        </Link>
        <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          {NAV.map((l) => (
            <NavLink key={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>
  )
}