import { useTranslation } from 'react-i18next';

import { SelectField } from '@/components/ui/Field';
import { Card } from '@/components/ui/primitives';
import { supportedLanguages, type SupportedLanguage } from '@/i18n';
import { useUiStore } from '@/stores/ui';

/** Внешний вид: тема и язык. Хранятся локально, без запросов к серверу. */
export default function AppearanceSettingsPage() {
  const { t, i18n } = useTranslation();
  const theme = useUiStore((state) => state.theme);
  const setTheme = useUiStore((state) => state.setTheme);
  const locale = i18n.resolvedLanguage === 'en' ? 'en' : 'ru';

  const changeLanguage = (language: SupportedLanguage): void => {
    window.localStorage.setItem('glchat.language', language);
    void i18n.changeLanguage(language);
  };

  return (
    <Card>
      <h2 className="text-lg font-semibold">{t('settings.appearance.title')}</h2>
      <p className="mt-1 text-sm text-fg-muted">{t('settings.appearance.description')}</p>

      <div className="mt-4 flex flex-col gap-4">
        <SelectField
          label={t('settings.appearance.theme')}
          hint={t('settings.appearance.themeHint')}
          value={theme}
          onChange={(value) => setTheme(value === 'light' ? 'light' : 'dark')}
          options={[
            { value: 'dark', label: t('theme.dark') },
            { value: 'light', label: t('theme.light') },
          ]}
        />
        <SelectField
          label={t('settings.appearance.language')}
          hint={t('settings.appearance.languageHint')}
          value={locale}
          onChange={(value) => changeLanguage(value === 'en' ? 'en' : 'ru')}
          options={supportedLanguages.map((language) => ({
            value: language,
            label: t(`language.${language}`),
          }))}
        />
      </div>
    </Card>
  );
}