import { useRouterState } from '@tanstack/react-router'
import { useTestStore } from '@/store/test-store'
import { UserMenu } from '@/components/UserMenu'

const ROUTE_TITLES: Record<string, string> = {
  '/': 'Trang chủ',
  '/writing': 'AI Chấm Writing',
  '/vocab': 'Từ vựng TOEIC',
  '/toeic': 'Luyện đề TOEIC',
  '/toeic/session': '',   // dynamic — filled below
  '/toeic/result': 'Kết quả bài thi',
}

export function AppHeader() {
  const { location } = useRouterState()
  const { partId, partName, answers, questions } = useTestStore()
  const pathname = location.pathname

  let title = ROUTE_TITLES[pathname] ?? 'EnglishAI'

  if (pathname === '/toeic/session') {
    const answered = answers.filter((a) => a !== null).length
    title = `Part ${partId} — ${partName} · ${answered}/${questions.length} câu`
  }

  return (
    <header className="fixed top-0 right-0 left-0 lg:left-60 h-16 bg-white/90 backdrop-blur-md border-b border-slate-200 z-40 flex items-center justify-between px-6">
      <span className="text-sm font-semibold text-slate-700">{title}</span>
      <UserMenu />
    </header>
  )
}
