import { Link } from '@tanstack/react-router'
import * as React from 'react'

const NAV_ITEMS = [
  { label: 'Home', to: '/', exact: true },
  { label: 'Our Brews', to: '/our-brews', exact: false },
  { label: 'Menu', to: '/menu', exact: false },
  { label: 'Visit / Contact', to: '/visit', exact: false },
] as const

const ACTIVE_CLASSES =
  'bg-primary-container text-on-primary-container font-bold rounded-lg px-space-md py-space-sm'
const INACTIVE_CLASSES =
  'text-label-lg text-on-surface-variant hover:text-on-surface transition-colors'

export function SiteHeader() {
  const [mobileOpen, setMobileOpen] = React.useState(false)

  return (
    <header className="fixed top-0 z-50 w-full bg-surface/80 shadow-[0_1px_8px_rgba(0,0,0,0.04)] backdrop-blur-xl">
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-grid-margin">
        <Link to="/" className="flex items-center gap-space-md" onClick={() => setMobileOpen(false)}>
          <img
            alt="The Great Bear Logo"
            className="h-8 w-auto object-contain"
            src="/images/logo.jpg"
          />
          <span className="font-headline-md text-on-surface">The Great Bear</span>
        </Link>

        <nav className="hidden items-center gap-space-lg md:flex">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.to}
              to={item.to}
              activeOptions={{ exact: item.exact }}
              className="transition-colors"
              activeProps={{ className: ACTIVE_CLASSES }}
              inactiveProps={{ className: INACTIVE_CLASSES }}
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-space-md">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary">
            <span className="material-symbols-outlined text-on-primary text-[18px]">person</span>
          </div>
          <button
            type="button"
            aria-label="Toggle navigation"
            aria-expanded={mobileOpen}
            className="flex h-10 w-10 items-center justify-center rounded-lg text-on-surface hover:bg-surface-container md:hidden"
            onClick={() => setMobileOpen((open) => !open)}
          >
            <span className="material-symbols-outlined">
              {mobileOpen ? 'close' : 'menu'}
            </span>
          </button>
        </div>
      </div>

      {mobileOpen ? (
        <nav className="flex flex-col gap-space-xs border-t border-outline-variant/20 bg-surface px-grid-margin py-space-md md:hidden">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.to}
              to={item.to}
              activeOptions={{ exact: item.exact }}
              className="rounded-lg px-space-md py-space-sm transition-colors"
              activeProps={{ className: ACTIVE_CLASSES }}
              inactiveProps={{ className: 'text-label-lg text-on-surface-variant hover:text-on-surface' }}
              onClick={() => setMobileOpen(false)}
            >
              {item.label}
            </Link>
          ))}
        </nav>
      ) : null}
    </header>
  )
}
