import { LOCALES, type Locale, localeLabel, setLocale, useT } from '@app/i18n'

/**
 * Language selector used by the settings modal.
 *
 * `value` is the persisted `users.language`; an unrecognized tag (e.g. someone
 * who set `ja` for output) is kept as a locked extra option so that saving
 * the form cannot silently erase it. Choosing a shipped locale writes the
 * device choice immediately and returns it for the caller to persist.
 *
 * An empty value clears the account override and hands control back to the
 * device/browser chain, mirroring a fresh account.
 */
export function LanguagePicker({
  value,
  onChange,
  className,
}: {
  value: string
  onChange: (next: Locale | null) => void
  className: string
}) {
  const { t } = useT()
  const known = LOCALES.includes(value as Locale)
  const unknown = value && !known ? value : null

  return (
    <select
      className={className}
      value={value}
      onChange={(event) => {
        const raw = event.target.value
        if (raw === '') {
          onChange(null)
          return
        }
        const next = raw as Locale
        setLocale(next)
        onChange(next)
      }}
    >
      <option value="">{t('common.language.system')}</option>
      {LOCALES.map((locale) => (
        <option key={locale} value={locale}>
          {localeLabel(locale)}
        </option>
      ))}
      {unknown && (
        <option value={unknown}>
          {t('common.state.unknown')} · {unknown}
        </option>
      )}
    </select>
  )
}