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

import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';

import {
  fetchAudit,
  fetchInstanceGuilds,
  fetchInstanceSettings,
  fetchInstanceUsers,
  instanceAuditQueryKey,
  instanceGuildsQueryKey,
  instanceSettingsQueryKey,
  instanceUsersQueryKey,
} from '@/api/instance';
import { ErrorNotice, LoadingNotice } from '@/components/ui/ErrorNotice';
import { Card } from '@/components/ui/primitives';
import { formatDateTime } from '@/lib/identity';
import { useCurrentUser } from '@/lib/hooks';

const AUDIT_LIMIT = 50;

/** Админский раздел инстанса: настройки, серверы, пользователи, аудит (read-only). */
export default function InstanceSettingsPage() {
  const { t, i18n } = useTranslation();
  const locale = i18n.resolvedLanguage ?? 'ru';
  const currentUser = useCurrentUser();
  const isAdmin = currentUser.data?.is_instance_admin === true;

  const settings = useQuery({
    queryKey: instanceSettingsQueryKey,
    queryFn: ({ signal }) => fetchInstanceSettings(signal),
    enabled: isAdmin,
    retry: 0,
  });
  const guilds = useQuery({
    queryKey: instanceGuildsQueryKey,
    queryFn: ({ signal }) => fetchInstanceGuilds(signal),
    enabled: isAdmin,
    retry: 0,
  });
  const users = useQuery({
    queryKey: instanceUsersQueryKey,
    queryFn: ({ signal }) => fetchInstanceUsers(signal),
    enabled: isAdmin,
    retry: 0,
  });
  const audit = useQuery({
    queryKey: instanceAuditQueryKey(AUDIT_LIMIT),
    queryFn: ({ signal }) => fetchAudit(AUDIT_LIMIT, signal),
    enabled: isAdmin,
    retry: 0,
  });

  if (!isAdmin) {
    return (
      <Card>
        <h2 className="text-lg font-semibold">{t('settings.instance.title')}</h2>
        <p className="mt-2 text-sm text-fg-muted">{t('settings.instance.notAdmin')}</p>
      </Card>
    );
  }

  const settingsEntries =
    settings.data === undefined ? [] : Object.entries(settings.data).slice(0, 30);

  return (
    <div className="flex flex-col gap-5">
      <header>
        <h2 className="text-lg font-semibold">{t('settings.instance.title')}</h2>
        <p className="mt-1 text-sm text-fg-muted">{t('settings.instance.description')}</p>
      </header>

      <Card>
        <h3 className="text-base font-semibold">{t('settings.instance.settings')}</h3>
        {settings.isPending ? <LoadingNotice /> : null}
        {settings.isError ? (
          <ErrorNotice
            className="mt-3"
            error={settings.error}
            onRetry={() => void settings.refetch()}
          />
        ) : null}
        {!settings.isPending && !settings.isError && settingsEntries.length === 0 ? (
          <p className="mt-2 text-sm text-fg-muted">{t('settings.instance.settingsEmpty')}</p>
        ) : null}
        {settingsEntries.length === 0 ? null : (
          <dl className="mt-3 text-sm">
            {settingsEntries.map(([key, value]) => (
              <div
                key={key}
                className="flex justify-between gap-4 border-b border-border/40 py-2 last:border-b-0"
              >
                <dt className="text-fg-muted">{key}</dt>
                <dd className="max-w-[60%] truncate text-right font-medium" title={format(value)}>
                  {format(value)}
                </dd>
              </div>
            ))}
          </dl>
        )}
      </Card>

      <Card>
        <h3 className="text-base font-semibold">
          {t('settings.instance.guilds', { count: guilds.data?.length ?? 0 })}
        </h3>
        {guilds.isPending ? <LoadingNotice /> : null}
        {guilds.isError ? (
          <ErrorNotice
            className="mt-3"
            error={guilds.error}
            onRetry={() => void guilds.refetch()}
          />
        ) : null}
        {guilds.data !== undefined && guilds.data.length === 0 ? (
          <p className="mt-2 text-sm text-fg-muted">{t('settings.instance.guildsEmpty')}</p>
        ) : null}
        {guilds.data === undefined || guilds.data.length === 0 ? null : (
          <ul className="mt-3 flex flex-col gap-1 text-sm" data-testid="instance-guilds">
            {guilds.data.map((guild) => (
              <li
                key={guild.id}
                className="flex items-center justify-between gap-3 border-b border-border/40 py-2 last:border-b-0"
              >
                <span className="truncate">{guild.name}</span>
                <span className="shrink-0 text-xs text-fg-muted">
                  {guild.is_main ? `${t('settings.instance.mainBadge')} · ` : ''}
                  {t('settings.instance.memberCount', { count: guild.member_count })}
                </span>
              </li>
            ))}
          </ul>
        )}
      </Card>

      <Card>
        <h3 className="text-base font-semibold">
          {t('settings.instance.users', { count: users.data?.length ?? 0 })}
        </h3>
        {/* ID пользователей — единственное место, где он виден: раздел открыт
            только администратору инстанса. */}
        <p className="mt-1 text-xs text-fg-muted">{t('settings.instance.usersIdHint')}</p>
        {users.isPending ? <LoadingNotice /> : null}
        {users.isError ? (
          <ErrorNotice className="mt-3" error={users.error} onRetry={() => void users.refetch()} />
        ) : null}
        {users.data !== undefined && users.data.length === 0 ? (
          <p className="mt-2 text-sm text-fg-muted">{t('settings.instance.usersEmpty')}</p>
        ) : null}
        {users.data === undefined || users.data.length === 0 ? null : (
          <ul className="mt-3 flex flex-col gap-1 text-sm" data-testid="instance-users">
            {users.data.map((user) => (
              <li
                key={user.id}
                className="flex items-center justify-between gap-3 border-b border-border/40 py-2 last:border-b-0"
              >
                <span className="min-w-0 flex-1 truncate">
                  {user.display_name} <span className="text-fg-muted">@{user.username}</span>
                </span>
                <span
                  className="shrink-0 font-mono text-xs text-fg-muted"
                  data-testid={`instance-user-id-${user.id}`}
                  title={t('settings.instance.userId')}
                >
                  {user.id}
                </span>
                {user.is_instance_admin ? (
                  <span className="shrink-0 rounded-full border border-accent/50 px-2 text-xs text-accent">
                    {t('settings.instance.adminBadge')}
                  </span>
                ) : null}
              </li>
            ))}
          </ul>
        )}
      </Card>

      <Card>
        <h3 className="text-base font-semibold">
          {t('settings.instance.audit', { count: audit.data?.length ?? 0 })}
        </h3>
        {audit.isPending ? <LoadingNotice /> : null}
        {audit.isError ? (
          <ErrorNotice className="mt-3" error={audit.error} onRetry={() => void audit.refetch()} />
        ) : null}
        {audit.data !== undefined && audit.data.length === 0 ? (
          <p className="mt-2 text-sm text-fg-muted">{t('settings.instance.auditEmpty')}</p>
        ) : null}
        {audit.data === undefined || audit.data.length === 0 ? null : (
          <ul className="mt-3 flex flex-col gap-1 text-sm" data-testid="instance-audit">
            {audit.data.map((entry) => (
              <li
                key={entry.id}
                className="flex items-center justify-between gap-3 border-b border-border/40 py-2 last:border-b-0"
              >
                <span className="truncate">
                  {entry.action}
                  {entry.target === undefined ? '' : ` → ${entry.target}`}
                </span>
                <span className="shrink-0 text-xs text-fg-muted">
                  {formatDateTime(entry.created_at, locale)}
                </span>
              </li>
            ))}
          </ul>
        )}
      </Card>
    </div>
  );
}

function format(value: unknown): string {
  if (value === null || value === undefined) {
    return '—';
  }
  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
    return String(value);
  }
  try {
    return JSON.stringify(value);
  } catch {
    return '—';
  }
}