import React from 'react'
import { useRouterState, useNavigate } from '@tanstack/react-router'

interface TopBarProps {
  onPaletteOpen: () => void
}

const tabs = [
  { id: 'home',     label: 'Recent',   path: '/',          match: ['/', '/search'] },
  { id: 'projects', label: 'Projects', path: '/projects',  match: ['/projects'] },
  { id: 'stats',    label: 'Stats',    path: '/stats',     match: ['/stats'] },
  { id: 'health',   label: 'Health',   path: '/health',    match: ['/health'] },
  { id: 'settings', label: 'Settings', path: '/settings',  match: ['/settings'] },
]

export function TopBar({ onPaletteOpen }: TopBarProps): React.JSX.Element {
  const pathname = useRouterState({ select: s => s.location.pathname })
  const navigate = useNavigate()

  function isActive(tab: typeof tabs[number]): boolean {
    return tab.match.includes(pathname)
  }

  return (
    <div className="topbar">
      <span className="brand" onClick={() => void navigate({ to: '/' })}>
        assistant-log
      </span>
      <span className="brand-sep">/</span>
      <span className="brand-host">lethe</span>

      <div className="search" onClick={onPaletteOpen} role="button" aria-label="Open command palette">
        <span className="ghost">search turns, sessions, paths…</span>
        <span className="kbd">⌘K</span>
      </div>

      <nav>
        {tabs.map(tab => (
          <span
            key={tab.id}
            className={'tab' + (isActive(tab) ? ' active' : '')}
            onClick={() => void navigate({ to: tab.path })}
          >
            {tab.label}
          </span>
        ))}
      </nav>
    </div>
  )
}