glchat/web/src/pages/settings/ProfileSettingsPage.tsx

import { useEffect, useState, type FormEvent } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';

import { updateProfile, currentUserQueryKey, type UpdateProfileInput } from '@/api/users';
import { ErrorNotice, LoadingNotice } from '@/components/ui/ErrorNotice';
import { Field, SelectField, TextAreaField } from '@/components/ui/Field';
import { Button, Card } from '@/components/ui/primitives';
import { supportedLanguages, type SupportedLanguage } from '@/i18n';
import { useCurrentUser } from '@/lib/hooks';
import { useSessionStore } from '@/stores/session';
import { userStatuses } from '@/api/types';

/** Профиль: отображаемое имя, «о себе», своё состояние, статус и язык. */
export default function ProfileSettingsPage() {
  const { t, i18n } = useTranslation();
  const queryClient = useQueryClient();
  const currentUser = useCurrentUser();

  const [displayName, setDisplayName] = useState('');
  const [bio, setBio] = useState('');
  const [customStatus, setCustomStatus] = useState('');
  const [customEmoji, setCustomEmoji] = useState('');
  const [status, setStatus] = useState<string>('online');
  const [locale, setLocale] = useState<SupportedLanguage>('ru');
  const [saved, setSaved] = useState(false);

  const user = currentUser.data;

  useEffect(() => {
    if (user === undefined) {
      return;
    }
    setDisplayName(user.display_name);
    setBio(user.bio);
    setCustomStatus(user.custom_status);
    setCustomEmoji(user.custom_status_emoji);
    setStatus(user.status);
    setLocale(user.locale === 'en' ? 'en' : 'ru');
  }, [user]);

  const save = useMutation({
    mutationFn: (input: UpdateProfileInput) => updateProfile(input),
    onSuccess: (updated) => {
      queryClient.setQueryData(currentUserQueryKey, updated);
      useSessionStore.getState().patchUser(updated);
      setSaved(true);
      if (updated.locale === 'en' || updated.locale === 'ru') {
        window.localStorage.setItem('glchat.language', updated.locale);
        void i18n.changeLanguage(updated.locale);
      }
    },
  });

  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    setSaved(false);
    save.mutate({
      display_name: displayName.trim(),
      bio: bio.trim(),
      custom_status: customStatus.trim(),
      custom_status_emoji: customEmoji.trim(),
      status,
      locale,
    });
  };

  if (currentUser.isPending) {
    return (
      <Card>
        <LoadingNotice />
      </Card>
    );
  }

  if (currentUser.isError || user === undefined) {
    return (
      <Card>
        <ErrorNotice error={currentUser.error} onRetry={() => void currentUser.refetch()} />
      </Card>
    );
  }

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

      <form className="mt-4 flex flex-col gap-4" onSubmit={onSubmit} noValidate>
        <Field
          label={t('settings.profile.displayName')}
          name="display_name"
          value={displayName}
          maxLength={64}
          onChange={(event) => setDisplayName(event.target.value)}
        />
        <TextAreaField
          label={t('settings.profile.bio')}
          placeholder={t('settings.profile.bioPlaceholder')}
          name="bio"
          rows={4}
          maxLength={512}
          value={bio}
          onChange={(event) => setBio(event.target.value)}
        />
        <div className="grid gap-4 sm:grid-cols-[1fr_6rem]">
          <Field
            label={t('settings.profile.customStatus')}
            placeholder={t('settings.profile.customStatusPlaceholder')}
            name="custom_status"
            maxLength={128}
            value={customStatus}
            onChange={(event) => setCustomStatus(event.target.value)}
          />
          <Field
            label={t('settings.profile.customStatusEmoji')}
            placeholder={t('settings.profile.customStatusEmojiPlaceholder')}
            name="custom_status_emoji"
            maxLength={8}
            value={customEmoji}
            onChange={(event) => setCustomEmoji(event.target.value)}
          />
        </div>
        <SelectField
          label={t('settings.profile.status')}
          value={status}
          onChange={setStatus}
          options={userStatuses.map((value) => ({
            value,
            label: t(`user.status.${value}`),
          }))}
        />
        <SelectField
          label={t('settings.profile.locale')}
          value={locale}
          onChange={(value) => setLocale(value === 'en' ? 'en' : 'ru')}
          options={supportedLanguages.map((language) => ({
            value: language,
            label: t(`language.${language}`),
          }))}
        />

        <dl className="text-sm text-fg-muted">
          <div className="flex justify-between gap-4 border-b border-border/40 py-2">
            <dt>{t('settings.profile.username')}</dt>
            <dd className="font-medium text-fg">{user.username}</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-border/40 py-2">
            <dt>{t('settings.profile.userId')}</dt>
            <dd className="font-mono text-xs text-fg">{user.id}</dd>
          </div>
          <div className="flex justify-between gap-4 py-2">
            <dt>{t('settings.profile.badges')}</dt>
            <dd className="text-fg">
              {user.badges.length === 0 ? t('settings.profile.noBadges') : user.badges.join(', ')}
            </dd>
          </div>
        </dl>

        {save.isError ? <ErrorNotice error={save.error} /> : null}
        {saved && !save.isError ? (
          <p className="text-sm text-success" role="status">
            {t('settings.profile.saved')}
          </p>
        ) : null}

        <div className="flex justify-end">
          <Button type="submit" disabled={save.isPending}>
            {t(save.isPending ? 'common.saving' : 'common.save')}
          </Button>
        </div>
      </form>
    </Card>
  );
}