import { Link, useRouterState } from '@tanstack/react-router'
import { Home, ClipboardList, Layers, Trophy, User } from 'lucide-react'
import { cn } from '@/lib/utils'

// Atelier Mobile tab bar — 5 tabs matching the mobile design.
// Labels keep the mobile design's playful brevity: Hôm nay / Luyện / Thẻ / Thành tích / Tôi
const TABS = [
  { to: '/',            label: 'Hôm nay',    icon: Home,          matchPrefix: '/',            exact: true  },
  { to: '/toeic',       label: 'Luyện',      icon: ClipboardList, matchPrefix: '/toeic',       exact: false },
  { to: '/flash-card',  label: 'Thẻ',        icon: Layers,        matchPrefix: '/flash-card',  exact: false },
  { to: '/archivement', label: 'Thành tích', icon: Trophy,        matchPrefix: '/archivement', exact: false },
  { to: '/settings',    label: 'Tôi',        icon: User,          matchPrefix: '/settings',    exact: false },
]

function isActive(pathname: string, prefix: string, exact: boolean) {
  return exact ? pathname === prefix : pathname.startsWith(prefix)
}

export function MobileNav() {
  const { location } = useRouterState()
  const pathname = location.pathname

  return (
    <nav className="m-tabbar lg:hidden" aria-label="Chuyển màn hình">
      {TABS.map((tab) => {
        const active = isActive(pathname, tab.matchPrefix, tab.exact)
        const Icon = tab.icon
        return (
          <Link
            key={tab.to}
            to={tab.to}
            className={cn('m-tab', active && 'is-active')}
            aria-current={active ? 'page' : undefined}
          >
            <Icon width={22} height={22} strokeWidth={active ? 2.25 : 1.75} />
            <span>{tab.label}</span>
          </Link>
        )
      })}
    </nav>
  )
}
