import { Icon } from './Icon'
import { VIEW_MODES, useAppState, type ViewMode } from '../app'

/** `viewMode` is the template's audience preset (see src/app/appState.ts). */
const VIEW_MODE_LABELS: Record<ViewMode, string> = {
  default: 'Default',
  compact: 'Compact',
}

type TopbarProps = {
  onMenuToggle: () => void
}

export function Topbar({ onMenuToggle }: TopbarProps) {
  const { theme, toggleTheme, viewMode, setViewMode, openSearch } = useAppState()

  return (
    <header className="topbar">
      <div className="brand">
        <div className="brand-mark">
          <span />
        </div>
        <b>northstar</b>
        <span className="version">v0.8.2</span>
      </div>

      <button
        type="button"
        className="top-search"
        onClick={openSearch}
        aria-label="Search components, tokens, docs (Press ⌘K)"
      >
        <Icon name="search" size={16} />
        <span className="top-search-placeholder">Search components, tokens, docs...</span>
        <kbd>⌘ K</kbd>
      </button>

      <nav className="top-links">
        <a href="#docs">Docs</a>
        <a href="#github">GitHub ↗</a>

        {/* Audience preset held by the app state. Nothing gates on it yet — it
            is wired here so the value is reachable and persisted from the UI. */}
        <div className="segmented top-view-mode" role="group" aria-label="View mode">
          {VIEW_MODES.map(mode => (
            <button
              key={mode}
              type="button"
              className={mode === viewMode ? 'selected' : undefined}
              aria-pressed={mode === viewMode}
              title={`Switch to ${VIEW_MODE_LABELS[mode].toLowerCase()} view`}
              onClick={() => setViewMode(mode)}
            >
              {VIEW_MODE_LABELS[mode]}
            </button>
          ))}
        </div>

        <button
          type="button"
          className="icon-button"
          onClick={toggleTheme}
          aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
        >
          <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={17} />
        </button>
        <button type="button" className="avatar">MS</button>
      </nav>

      <button type="button" className="mobile-menu icon-button" onClick={onMenuToggle} aria-label="Toggle navigation">
        <Icon name="menu" />
      </button>
    </header>
  )
}