'use client'

/**
 * LanguageSwitcher - 賽博風語系切換器
 *
 * Nothing.tech 風格極簡設計
 * 支援 EN / 繁中 切換
 */

import { useLocale } from 'next-intl'
import { useRouter, usePathname, locales, localeShortNames, type Locale } from '@/i18n/routing'
import { cn } from '@/lib/utils'

interface LanguageSwitcherProps {
  className?: string
}

export function LanguageSwitcher({ className }: LanguageSwitcherProps) {
  const locale = useLocale() as Locale
  const router = useRouter()
  const pathname = usePathname()

  const handleSwitch = (newLocale: Locale) => {
    if (newLocale === locale) return
    router.replace(pathname, { locale: newLocale })
  }

  return (
    <div
      className={cn(
        'px-1 py-1 flex items-center gap-1 rounded-button',
        'bg-nothing-gray-100 border border-nothing-gray-200',
        className
      )}
    >
      {locales.map((loc) => {
        const isActive = loc === locale

        return (
          <button
            key={loc}
            onClick={() => handleSwitch(loc)}
            className={cn(
              'px-3 py-1.5 rounded-sm font-body text-xs transition-all duration-200',
              'focus:outline-none focus:ring-2 focus:ring-nothing-gray-400',
              isActive
                ? 'bg-nothing-gray-900 text-nothing-white'
                : 'text-nothing-gray-600 hover:text-nothing-gray-900 hover:bg-nothing-gray-200'
            )}
            aria-label={`Switch to ${localeShortNames[loc]}`}
            aria-pressed={isActive}
          >
            {localeShortNames[loc]}
          </button>
        )
      })}
    </div>
  )
}

/**
 * LanguageSwitcherCompact - 更緊湊的版本
 * 只顯示當前語系，點擊切換
 */
export function LanguageSwitcherCompact({ className }: LanguageSwitcherProps) {
  const locale = useLocale() as Locale
  const router = useRouter()
  const pathname = usePathname()

  const handleToggle = () => {
    const currentIndex = locales.indexOf(locale)
    const nextIndex = (currentIndex + 1) % locales.length
    const newLocale = locales[nextIndex]

    router.replace(pathname, { locale: newLocale })
  }

  return (
    <button
      onClick={handleToggle}
      className={cn(
        'px-3 py-1.5 rounded-button',
        'bg-nothing-gray-100 border border-nothing-gray-200',
        'font-body text-xs text-nothing-gray-600',
        'hover:text-nothing-gray-900 hover:bg-nothing-gray-200',
        'transition-all duration-200',
        'focus:outline-none focus:ring-2 focus:ring-nothing-gray-400',
        className
      )}
      aria-label="Toggle language"
    >
      <span className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-status-healthy" />
        {localeShortNames[locale]}
      </span>
    </button>
  )
}