import { Link } from '@tanstack/react-router'
import { Icon } from '@/components/ui/Icon'
import { useMe } from '@/lib/auth'
import { cn } from '@/lib/cn'
import { AccountMenu } from './AccountMenu'
import { ThemeButton } from './ThemeButton'

export type NavSection = 'gardens' | 'plants' | 'settings'

/** The brand mark: sage sprout + "pansy" in the display face. */
export function Brand({ size = 19, textClassName }: { size?: number; textClassName?: string }) {
  return (
    <span className="inline-flex items-center gap-2 font-heading text-lg text-text">
      <Icon name="sprout" size={size} className="text-accent-2-600" />
      <span className={textClassName}>pansy</span>
    </span>
  )
}

/**
 * The top nav shared by the Gardens, Plants and Settings pages (and the editor
 * on desktop): brand, centered section links, and the right cluster — theme
 * toggle, the settings gear for admins, the account avatar.
 */
export function Nav({ active }: { active?: NavSection }) {
  const me = useMe()
  const user = me.data
  const link = (to: '/gardens' | '/plants', id: NavSection, label: string) => (
    <Link
      to={to}
      aria-current={active === id ? 'page' : undefined}
      className={cn('text-sm text-text no-underline hover:text-accent', active === id && 'text-accent')}
    >
      {label}
    </Link>
  )
  return (
    <nav className="flex flex-none items-center gap-[17.6px] px-[17.6px] py-[13.2px]">
      <Link to="/gardens" className="mr-auto no-underline">
        <Brand />
      </Link>
      {link('/gardens', 'gardens', 'Gardens')}
      {link('/plants', 'plants', 'Plants')}
      <span className="ml-auto flex items-center gap-2.5">
        <ThemeButton />
        {user?.isAdmin && (
          <Link
            to="/settings"
            aria-current={active === 'settings' ? 'page' : undefined}
            title="Settings"
            aria-label="Settings"
            className={cn('btn btn-icon btn-secondary', active === 'settings' && 'bg-accent-100 text-accent')}
          >
            <Icon name="settings" />
          </Link>
        )}
        {user && <AccountMenu user={user} />}
      </span>
    </nav>
  )
}