import { useTranslation } from 'react-i18next'
import { useTheme, type ThemePreference } from '@/stores/ThemeProvider'
import { cn } from '@/lib/utils'

/**
 * Theme switch per redesign prototype — 2-button segmented control с text
 * labels "Earth | Dark". Filled accent-bg на active.
 *
 * <p>Прошлый tri-state (Light/Dark/System icons) был noise — "system" preference
 * редко используется явно, мало кто понимает Monitor icon. Простой 2-button
 * `Earth / Dark` toggle — точно повторяет prototype и улучшает discoverability.
 *
 * <p>Internally "Earth" maps на `light` preference (Earthy palette default).
 * "System" preference больше не выставляется через UI; localStorage value
 * остаётся валидным (ThemeProvider может read), но новые users получают
 * explicit light/dark choice.
 */
export function ThemeSwitch() {
  const { t } = useTranslation()
  const { preference, setPreference } = useTheme()

  // Treat 'system' как 'light' для UI — переключение всё равно flatten'ит
  // preference на explicit choice.
  const activeId: Exclude<ThemePreference, 'system'> =
    preference === 'dark' ? 'dark' : 'light'

  const items: { id: Exclude<ThemePreference, 'system'>; label: string }[] = [
    { id: 'light', label: t('theme.earth', { defaultValue: 'Earth' }) },
    { id: 'dark', label: t('theme.dark', { defaultValue: 'Dark' }) },
  ]

  return (
    <div
      role="radiogroup"
      aria-label={t('theme.label')}
      className="inline-flex items-center rounded-md border border-line bg-surface overflow-hidden"
    >
      {items.map((item) => {
        const active = activeId === item.id
        return (
          <button
            key={item.id}
            type="button"
            role="radio"
            aria-checked={active}
            aria-label={item.label}
            onClick={() => setPreference(item.id)}
            className={cn(
              'h-8 px-3 text-cap font-semibold tracking-[0.14em] transition-colors',
              active
                ? 'bg-accent text-on-accent'
                : 'text-ink-2 hover:text-ink hover:bg-surface-2',
            )}
          >
            {item.label}
          </button>
        )
      })}
    </div>
  )
}