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

import { createGuild, fetchGuildTemplates, guildTemplatesQueryKey } from '@/api/guilds';
import { instanceQueryKey } from '@/api/instance';
import { myGuildsQueryKey } from '@/api/users';
import { ErrorNotice } from '@/components/ui/ErrorNotice';
import { Field } from '@/components/ui/Field';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/primitives';
import { useInstance } from '@/lib/hooks';
import { useSessionStore } from '@/stores/session';
import { useUiStore } from '@/stores/ui';

/**
 * Единственное модальное окно создания сервера (`POST /guilds {name}`).
 * Открывается из рейки и с пустого экрана «У вас пока нет серверов»,
 * поэтому смонтировано в `AppLayout`, а состояние — в `ui`-сторе.
 */
export function CreateGuildModal() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const instance = useInstance();

  const open = useUiStore((state) => state.guildCreateOpen);
  const close = useUiStore((state) => state.closeGuildCreate);
  const guilds = useSessionStore((state) => state.guilds);
  const upsertGuild = useSessionStore((state) => state.upsertGuild);

  const [name, setName] = useState('');
  const [templateId, setTemplateId] = useState('empty');

  // Шаблоны структуры: список небольшой и статический, кэшируется на сессию.
  const templates = useQuery({
    queryKey: guildTemplatesQueryKey,
    queryFn: ({ signal }) => fetchGuildTemplates(signal),
    enabled: open,
    staleTime: 300_000,
    retry: 0,
  });

  const create = useMutation({
    mutationFn: (guildName: string) => createGuild(guildName, templateId),
    onSuccess: (guild) => {
      close();
      setName('');
      upsertGuild(guild);
      void queryClient.invalidateQueries({ queryKey: myGuildsQueryKey });
      void queryClient.invalidateQueries({ queryKey: instanceQueryKey });
      void navigate(`/app/${guild.id}`);
    },
  });

  const limitReached =
    instance.data !== undefined && guilds.length >= instance.data.max_guilds_per_user;

  return (
    <Modal
      open={open}
      title={t('guilds.create.title')}
      onClose={close}
      footer={
        <>
          <Button variant="ghost" onClick={close}>
            {t('common.cancel')}
          </Button>
          <Button
            onClick={() => create.mutate(name.trim())}
            disabled={create.isPending || name.trim().length === 0}
          >
            {t(create.isPending ? 'common.creating' : 'guilds.create.submit')}
          </Button>
        </>
      }
    >
      <form
        className="flex flex-col gap-3"
        onSubmit={(event) => {
          event.preventDefault();
          if (name.trim() !== '') {
            create.mutate(name.trim());
          }
        }}
      >
        <Field
          label={t('guilds.create.name')}
          placeholder={t('guilds.create.namePlaceholder')}
          value={name}
          onChange={(event) => setName(event.target.value)}
          maxLength={64}
          hint={t('guilds.create.hint')}
        />
        {/* Шаблон задаёт структуру комнат и ролей (AGENT.md 7.3). */}
        <fieldset className="flex flex-col gap-2" data-testid="guild-templates">
          <legend className="text-sm font-medium">{t('guilds.create.template')}</legend>
          {(templates.data ?? []).map((template) => (
            <label
              key={template.id}
              data-testid={`guild-template-${template.id}`}
              className={`flex cursor-pointer flex-col gap-0.5 rounded-[var(--radius-md)] border px-3 py-2 transition-colors duration-[var(--duration-fast)] ${
                templateId === template.id
                  ? 'border-accent bg-accent/10'
                  : 'border-border/60 hover:bg-surface-2'
              }`}
            >
              <span className="flex items-center gap-2">
                <input
                  type="radio"
                  name="guild_template"
                  value={template.id}
                  checked={templateId === template.id}
                  onChange={() => setTemplateId(template.id)}
                />
                <span className="text-sm font-medium">{template.name}</span>
                <span className="ml-auto text-xs text-fg-muted">
                  {t('guilds.create.templateCounts', {
                    text: template.text_channels,
                    voice: template.voice_channels,
                    roles: template.roles.length,
                  })}
                </span>
              </span>
              <span className="text-xs text-fg-muted">{template.description}</span>
            </label>
          ))}
          {templates.isError ? (
            <ErrorNotice error={templates.error} onRetry={() => void templates.refetch()} />
          ) : null}
        </fieldset>
        {instance.data === undefined ? null : (
          <p className="text-xs text-fg-muted">
            {t('guilds.create.limit', { count: instance.data.max_guilds_per_user })}
          </p>
        )}
        {limitReached && !create.isError ? (
          <p className="text-xs text-warning" role="status">
            {t('guilds.create.limitReached')}
          </p>
        ) : null}
        {create.isError ? <ErrorNotice error={create.error} /> : null}
      </form>
    </Modal>
  );
}