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

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

import { fetchRoles, guildRolesQueryKey, updateRole } from '@/api/guilds';
import {
  NICK_EFFECTS,
  fetchGuildCosmetics,
  guildCosmeticsQueryKey,
  type GuildCosmetic,
  type NickEffect,
} from '@/api/cosmetics';
import { ErrorNotice } from '@/components/ui/ErrorNotice';
import { SkeletonLines } from '@/components/ui/Skeleton';
import { NICK_COLOR_PALETTE } from '@/components/profile/cosmeticsStyle';
import { roleColorHex } from '@/lib/format';
import { SettingsSection } from '@/pages/settings/SettingsSection';
import type { Role } from '@/api/types';

interface GuildRolesSectionProps {
  guildId: string;
  /** Право MANAGE_ROLES: без него оформление роли показывается только для чтения. */
  canManage?: boolean;
}

/**
 * «Роли»: список ролей и — при праве MANAGE_ROLES — оформление роли
 * (AGENT.md 7.4): рамка, иконка, цвет и эффект ника. Рамки и иконки берутся из
 * галереи сервера, поэтому она читается тем же разделом.
 */
export function GuildRolesSection({ guildId, canManage = false }: GuildRolesSectionProps) {
  const { t } = useTranslation();
  const queryClient = useQueryClient();

  const roles = useQuery({
    queryKey: guildRolesQueryKey(guildId),
    queryFn: ({ signal }) => fetchRoles(guildId, signal),
    retry: 0,
  });

  const cosmetics = useQuery({
    queryKey: guildCosmeticsQueryKey(guildId),
    queryFn: ({ signal }) => fetchGuildCosmetics(guildId, signal),
    retry: 0,
  });

  const patch = useMutation({
    mutationFn: (input: { roleId: string; body: RoleDecorationInput }) =>
      updateRole(guildId, input.roleId, input.body),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: guildRolesQueryKey(guildId) });
      // Оформление участников в ленте пересчитывается из списка участников.
      void queryClient.invalidateQueries({ queryKey: ['guilds', guildId, 'members'] });
    },
  });

  const sorted = (roles.data ?? []).slice().sort((left, right) => right.position - left.position);
  const frames = (cosmetics.data ?? []).filter((item) => item.kind === 'frame');
  const badges = (cosmetics.data ?? []).filter((item) => item.kind === 'badge');

  return (
    <SettingsSection
      title={t('settings.servers.roles.title')}
      description={t('settings.servers.roles.description')}
    >
      {roles.isPending ? (
        <SkeletonLines className="mt-4" rows={3} />
      ) : roles.isError ? (
        <ErrorNotice className="mt-4" error={roles.error} onRetry={() => void roles.refetch()} />
      ) : sorted.length === 0 ? (
        <p className="mt-4 text-sm text-fg-muted">{t('settings.servers.roles.empty')}</p>
      ) : (
        <ul className="gl-stagger mt-4 flex flex-col gap-2" data-testid="guild-roles">
          {sorted.map((role) => {
            const color = roleColorHex(role.color);
            return (
              <li
                key={role.id}
                data-testid={`role-${role.id}`}
                className="flex flex-col gap-2 rounded-[var(--radius-md)] px-2 py-1.5 transition-colors duration-[var(--duration-fast)] hover:bg-surface-2"
              >
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="h-3.5 w-3.5 shrink-0 rounded-full border border-border/60"
                    style={color === null ? undefined : { backgroundColor: color }}
                  />
                  <span className="min-w-0 flex-1 truncate text-sm">{role.name}</span>
                  {role.is_default ? (
                    <span className="text-xs text-fg-muted">
                      {t('settings.servers.roles.default')}
                    </span>
                  ) : null}
                  <span className="text-xs text-fg-muted">
                    {t('settings.servers.roles.position', { position: role.position })}
                  </span>
                </div>

                {canManage ? (
                  <RoleDecoration
                    role={role}
                    frames={frames}
                    badges={badges}
                    disabled={patch.isPending}
                    onChange={(body) => patch.mutate({ roleId: role.id, body })}
                  />
                ) : null}
              </li>
            );
          })}
        </ul>
      )}
      {patch.isError ? <ErrorNotice className="mt-3" error={patch.error} /> : null}
      {patch.isSuccess ? (
        <p className="mt-3 text-sm text-success" role="status">
          {t('settings.servers.roles.decorationSaved')}
        </p>
      ) : null}
    </SettingsSection>
  );
}

/** Тело запроса правки роли: только оформление. */
export interface RoleDecorationInput {
  cosmetic_frame_id?: string;
  cosmetic_badge_id?: string;
  nick_color?: number;
  nick_effect?: NickEffect;
}

interface RoleDecorationProps {
  role: Role;
  frames: GuildCosmetic[];
  badges: GuildCosmetic[];
  disabled: boolean;
  onChange: (body: RoleDecorationInput) => void;
}

/** Оформление роли: рамка, иконка, цвет и эффект ника. */
function RoleDecoration({ role, frames, badges, disabled, onChange }: RoleDecorationProps) {
  const { t } = useTranslation();
  return (
    <div
      className="flex flex-wrap items-center gap-2 pl-6"
      data-testid={`role-decoration-${role.id}`}
    >
      <DecorationSelect
        label={t('settings.servers.roles.frame')}
        testId={`role-frame-${role.id}`}
        value={role.cosmetic_frame_id ?? ''}
        disabled={disabled}
        options={frames.map((item) => ({ id: item.id, label: item.name }))}
        emptyLabel={t('settings.profile.style.none')}
        onChange={(value) => onChange({ cosmetic_frame_id: value })}
      />
      <DecorationSelect
        label={t('settings.servers.roles.badge')}
        testId={`role-badge-${role.id}`}
        value={role.cosmetic_badge_id ?? ''}
        disabled={disabled}
        options={badges.map((item) => ({ id: item.id, label: item.name }))}
        emptyLabel={t('settings.profile.style.none')}
        onChange={(value) => onChange({ cosmetic_badge_id: value })}
      />
      <label className="flex items-center gap-1 text-xs">
        <span className="text-fg-muted">{t('settings.servers.roles.nickColor')}</span>
        <span
          aria-hidden="true"
          data-testid={`role-color-preview-${role.id}`}
          className="h-4 w-4 rounded-full border border-border/60"
          style={
            role.nick_color === undefined
              ? undefined
              : { backgroundColor: roleColorHex(role.nick_color) ?? undefined }
          }
        />
        <select
          value={role.nick_color === undefined ? '' : String(role.nick_color)}
          disabled={disabled}
          aria-label={t('settings.servers.roles.nickColor')}
          data-testid={`role-color-${role.id}`}
          className="rounded-[var(--radius-sm)] border border-border/60 bg-surface-2 px-1 py-0.5 text-fg"
          onChange={(event) =>
            onChange(
              event.target.value === ''
                ? { nick_color: 0xffffff }
                : { nick_color: Number(event.target.value) },
            )
          }
        >
          <option value="">{t('settings.profile.style.colorDefault')}</option>
          {NICK_COLOR_PALETTE.map((color) => (
            <option key={color} value={String(color)}>
              {roleColorHex(color) ?? ''}
            </option>
          ))}
        </select>
      </label>
      <DecorationSelect
        label={t('settings.servers.roles.nickEffect')}
        testId={`role-effect-${role.id}`}
        value={role.nick_effect ?? 'none'}
        disabled={disabled}
        options={NICK_EFFECTS.map((effect) => ({
          id: effect,
          label: t(`settings.profile.style.effects.${effect}`),
        }))}
        onChange={(value) => onChange({ nick_effect: value as NickEffect })}
      />
    </div>
  );
}

interface DecorationSelectProps {
  label: string;
  testId: string;
  value: string;
  disabled: boolean;
  options: { id: string; label: string }[];
  emptyLabel?: string;
  onChange: (value: string) => void;
}

function DecorationSelect({
  label,
  testId,
  value,
  disabled,
  options,
  emptyLabel,
  onChange,
}: DecorationSelectProps) {
  return (
    <label className="flex items-center gap-1 text-xs">
      <span className="text-fg-muted">{label}</span>
      <select
        value={value}
        disabled={disabled}
        aria-label={label}
        data-testid={testId}
        className="rounded-[var(--radius-sm)] border border-border/60 bg-surface-2 px-1 py-0.5 text-fg"
        onChange={(event) => onChange(event.target.value)}
      >
        {emptyLabel === undefined ? null : <option value="">{emptyLabel}</option>}
        {options.map((option) => (
          <option key={option.id} value={option.id}>
            {option.label}
          </option>
        ))}
      </select>
    </label>
  );
}