import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';

import { Card } from '@/components/ui/primitives';
import { useSessionStore } from '@/stores/session';

/**
 * Область контента комнаты. В Фазе 1 — заглушка: сообщения, голос и видео
 * появятся в следующих фазах, но маршрутизация и выбор комнаты уже работают.
 */
export default function GuildView() {
  const { t } = useTranslation();
  const params = useParams<{ guildId?: string; channelId?: string }>();
  const guild = useSessionStore((state) =>
    params.guildId === undefined
      ? null
      : (state.guilds.find((item) => item.id === params.guildId) ?? null),
  );
  const channel = guild?.channels.find((item) => item.id === params.channelId) ?? null;

  if (params.channelId === undefined || channel === null) {
    return (
      <section id="app-content" className="flex h-full items-center justify-center p-6">
        <Card className="max-w-md text-center">
          <h2 className="text-lg font-semibold">{t('channels.noSelection.title')}</h2>
          <p className="mt-2 text-sm text-fg-muted">{t('channels.noSelection.body')}</p>
        </Card>
      </section>
    );
  }

  const isVoice = channel.type === 'voice';

  return (
    <section id="app-content" className="flex h-full flex-col">
      <header className="flex items-center gap-2 border-b border-border/40 px-4 py-3">
        <span aria-hidden="true" className="text-fg-muted">
          {isVoice ? '🔊' : '#'}
        </span>
        <h2 className="text-sm font-semibold">{channel.name}</h2>
        {channel.slowmode_seconds === undefined || channel.slowmode_seconds === 0 ? null : (
          <span className="text-xs text-fg-muted">slowmode {channel.slowmode_seconds}s</span>
        )}
      </header>
      <div className="flex flex-1 items-center justify-center p-6">
        <Card className="max-w-md text-center">
          <h3 className="text-lg font-semibold">
            {t(isVoice ? 'channels.voicePlaceholder.title' : 'channels.chatPlaceholder.title')}
          </h3>
          <p className="mt-2 text-sm text-fg-muted">
            {t(isVoice ? 'channels.voicePlaceholder.body' : 'channels.chatPlaceholder.body', {
              name: channel.name,
            })}
          </p>
        </Card>
      </div>
    </section>
  );
}