glchat/web/src/pages/app/ChannelSidebar.tsx

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { NavLink, useNavigate } from 'react-router';

import { createChannel, fetchChannels, guildChannelsQueryKey } from '@/api/guilds';
import type { Channel } from '@/api/types';
import { ChannelBadge } from '@/components/chat/ChannelBadge';
import { useChannelUnread } from '@/components/chat/useChannelUnread';
import { ErrorNotice } from '@/components/ui/ErrorNotice';
import { Field, SelectField } from '@/components/ui/Field';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/primitives';
import { SkeletonLines } from '@/components/ui/Skeleton';
import { groupChannels } from '@/lib/channels';
import { canAdministerGuild, canManageGuild } from '@/lib/identity';
import { useCurrentUser } from '@/lib/hooks';
import { useSessionStore } from '@/stores/session';
import { useUiStore } from '@/stores/ui';

interface ChannelSidebarProps {
  guildId: string | null;
  channelId: string | null;
}

/**
 * Ссылка на комнату с бейджем непрочитанного. Отдельный компонент нужен,
 * чтобы подписка на стор сообщений жила на каждую комнату, а не на весь
 * сайдбар (иначе любое новое сообщение перерисовывало бы список целиком).
 */
function ChannelLink({
  guildId,
  channel,
  selected,
}: {
  guildId: string | null;
  channel: Channel;
  selected: boolean;
}) {
  const { t } = useTranslation();
  const { unread, mentions } = useChannelUnread(channel.id);
  const highlighted = !selected && (unread > 0 || mentions > 0);
  // aria-label ссылки перекрывает её содержимое, поэтому счётчики озвучиваем здесь.
  const label =
    mentions > 0
      ? t('channels.selectMentions', { name: channel.name, count: mentions })
      : unread > 0
        ? t('channels.selectUnread', { name: channel.name, count: unread })
        : t('channels.select', { name: channel.name });

  return (
    <NavLink
      to={`/app/${guildId ?? ''}/${channel.id}`}
      aria-current={selected ? 'page' : undefined}
      aria-label={label}
      title={channel.name}
      className={`relative flex items-center gap-2 truncate rounded-[var(--radius-sm)] px-2 py-1 text-sm transition-colors duration-[var(--duration-fast)] ${
        selected
          ? 'gl-indicator bg-surface-3 text-fg'
          : 'text-fg-muted hover:bg-surface-2 hover:text-fg'
      } ${highlighted ? 'font-semibold text-fg' : ''}`}
    >
      <span aria-hidden="true">{channel.type === 'voice' ? '🔊' : '#'}</span>
      <span className="truncate">{channel.name}</span>
      <ChannelBadge channelId={channel.id} selected={selected} />
    </NavLink>
  );
}

/** Сайдбар комнат выбранного сервера: категории, текстовые и голосовые комнаты. */
export function ChannelSidebar({ guildId, channelId }: ChannelSidebarProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const currentUser = useCurrentUser();

  const guild = useSessionStore(
    useCallback((state) => state.guilds.find((item) => item.id === guildId) ?? null, [guildId]),
  );
  const setGuildChannels = useSessionStore((state) => state.setGuildChannels);
  const upsertChannel = useSessionStore((state) => state.upsertChannel);
  const openSettings = useUiStore((state) => state.openSettings);

  const [createOpen, setCreateOpen] = useState(false);
  const [channelName, setChannelName] = useState('');
  const [channelType, setChannelType] = useState<'text' | 'voice'>('text');
  const [parentId, setParentId] = useState('');

  const channels = useMemo(() => guild?.channels ?? [], [guild]);
  const needsChannels = guildId !== null && guild !== null && channels.length === 0;

  const remoteChannels = useQuery({
    queryKey: guildChannelsQueryKey(guildId ?? ''),
    queryFn: ({ signal }) => fetchChannels(guildId ?? '', signal),
    enabled: needsChannels,
    retry: 0,
  });

  useEffect(() => {
    if (guildId === null || remoteChannels.data === undefined) {
      return;
    }
    setGuildChannels(guildId, remoteChannels.data);
  }, [guildId, remoteChannels.data, setGuildChannels]);

  const create = useMutation({
    mutationFn: () =>
      createChannel(guildId ?? '', {
        name: channelName.trim(),
        type: channelType,
        ...(parentId === '' ? {} : { parent_id: parentId }),
      }),
    onSuccess: (channel) => {
      if (guildId !== null) {
        upsertChannel(guildId, channel);
      }
      setCreateOpen(false);
      setChannelName('');
      void queryClient.invalidateQueries({ queryKey: guildChannelsQueryKey(guildId ?? '') });
      void navigate(`/app/${guildId ?? ''}/${channel.id}`);
    },
  });

  const groups = useMemo(() => groupChannels(channels), [channels]);
  const categories = useMemo(
    () => channels.filter((channel) => channel.type === 'category'),
    [channels],
  );
  const canManage =
    guild !== null &&
    canManageGuild(guild.my_permissions ?? [], guild.owner_id, currentUser.data?.id);
  // Шестерёнка настроек сервера — только владельцу и правам управления.
  const canManageSettings =
    guild !== null &&
    canAdministerGuild(
      guild.my_permissions ?? [],
      guild.owner_id,
      currentUser.data?.id,
      currentUser.data?.is_instance_admin === true,
    );
  // Каналы ещё едут по REST — показываем скелетон вместо «пусто».
  const channelsLoading = needsChannels && remoteChannels.isPending;

  if (guildId === null) {
    return <aside className="hidden min-h-0 flex-1 bg-surface-1 p-3 md:block" />;
  }

  return (
    <aside aria-label={t('channels.title')} className="flex min-h-0 flex-1 flex-col bg-surface-1">
      <header className="flex items-center justify-between gap-2 border-b border-border/40 px-3 py-3">
        <h1 className="truncate text-sm font-semibold" title={guild?.name}>
          {guild?.name ?? t('channels.notInGuild.title')}
        </h1>
        <div className="flex items-center gap-1">
          {canManageSettings ? (
            <button
              type="button"
              aria-label={t('channels.settings')}
              title={t('channels.settings')}
              className="rounded-[var(--radius-sm)] px-1 text-base leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
              onClick={() => openSettings({ section: 'server', guildId })}
            >
              ⚙
            </button>
          ) : null}
          {canManage ? (
            <button
              type="button"
              aria-label={t('channels.add')}
              title={t('channels.add')}
              className="rounded-[var(--radius-sm)] px-1 text-lg leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
              onClick={() => setCreateOpen(true)}
            >
              +
            </button>
          ) : null}
        </div>
      </header>

      <div className="min-h-0 flex-1 overflow-y-auto px-2 py-3">
        {guild === null ? (
          <p className="px-2 text-sm text-fg-muted">{t('channels.notInGuild.body')}</p>
        ) : channelsLoading ? (
          <SkeletonLines className="px-2" rows={5} />
        ) : groups.length === 0 ? (
          <p className="px-2 text-sm text-fg-muted">{t('channels.empty')}</p>
        ) : (
          <nav aria-label={t('channels.title')}>
            {groups.map((group) => (
              <section key={group.category?.id ?? 'uncategorized'} className="mb-3">
                {group.category === null ? null : (
                  <h2 className="px-2 py-1 text-xs font-semibold uppercase tracking-wide text-fg-muted">
                    {group.category.name}
                  </h2>
                )}
                <ul className="gl-stagger flex flex-col gap-0.5">
                  {group.channels.map((channel) => (
                    <li key={channel.id}>
                      <ChannelLink
                        guildId={guildId}
                        channel={channel}
                        selected={channel.id === channelId}
                      />
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </nav>
        )}

        {remoteChannels.isError ? (
          <ErrorNotice
            className="mt-2"
            error={remoteChannels.error}
            onRetry={() => void remoteChannels.refetch()}
          />
        ) : null}
      </div>

      <Modal
        open={createOpen}
        title={t('channels.create.title')}
        onClose={() => setCreateOpen(false)}
        footer={
          <>
            <Button variant="ghost" onClick={() => setCreateOpen(false)}>
              {t('common.cancel')}
            </Button>
            <Button
              onClick={() => create.mutate()}
              disabled={create.isPending || channelName.trim().length === 0}
            >
              {t(create.isPending ? 'common.creating' : 'channels.create.submit')}
            </Button>
          </>
        }
      >
        <form
          className="flex flex-col gap-3"
          onSubmit={(event) => {
            event.preventDefault();
            if (channelName.trim() !== '') {
              create.mutate();
            }
          }}
        >
          <Field
            label={t('channels.create.name')}
            placeholder={t('channels.create.namePlaceholder')}
            value={channelName}
            onChange={(event) => setChannelName(event.target.value)}
            maxLength={64}
          />
          <SelectField
            label={t('channels.create.type')}
            value={channelType}
            onChange={(value) => setChannelType(value === 'voice' ? 'voice' : 'text')}
            options={[
              { value: 'text', label: t('channels.create.typeText') },
              { value: 'voice', label: t('channels.create.typeVoice') },
            ]}
          />
          {categories.length === 0 ? null : (
            <SelectField
              label={t('channels.create.parent')}
              value={parentId}
              onChange={setParentId}
              options={[
                { value: '', label: t('channels.create.noParent') },
                ...categories.map((category) => ({
                  value: category.id,
                  label: category.name,
                })),
              ]}
            />
          )}
          {create.isError ? <ErrorNotice error={create.error} /> : null}
        </form>
      </Modal>
    </aside>
  );
}