import { useState } from "react";

import { ApiError } from "../api/client";
import { useCreateGroup } from "../hooks/groups";
import { useExpansions } from "../hooks/reference";
import { Switch } from "./Switch";

export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
  const { data: expansions } = useExpansions();
  const createGroup = useCreateGroup();
  const [name, setName] = useState("");
  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [error, setError] = useState<string | null>(null);

  const toggle = (id: number) =>
    setSelected((s) => {
      const next = new Set(s);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });

  const submit = async () => {
    setError(null);
    try {
      await createGroup.mutateAsync({ name: name.trim(), expansion_ids: [...selected] });
      onCreated?.();
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "Не удалось создать группу");
    }
  };

  return (
    <div className="card">
      <h3>Новая группа</h3>
      <div className="field">
        <label className="label">Название</label>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Например: Вечер 40k" />
      </div>
      <div className="field">
        <label className="label">Дополнения группы</label>
        <div className="stack">
          {(expansions ?? []).map((e) => (
            <label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
              <span>
                {e.name_ru}
                {e.is_base && <span className="muted small"> (всегда включено)</span>}
              </span>
              <Switch
                disabled={e.is_base}
                checked={e.is_base || selected.has(e.id)}
                onChange={() => toggle(e.id)}
              />
            </label>
          ))}
        </div>
      </div>
      {error && <p className="error-text">{error}</p>}
      <button className="btn btn-primary btn-block" onClick={submit} disabled={createGroup.isPending}>
        Создать
      </button>
    </div>
  );
}