ForbiddenStarsApp/frontend/src/pages/GroupSettingsPage.tsx

import { Trash2, UserPlus } from "lucide-react";
import { useEffect, useState } from "react";

import { ApiError } from "../api/client";
import { PlayerLink } from "../components/PlayerLink";
import { Spinner } from "../components/Spinner";
import { MAX_GROUP_SIZE } from "../domain/constants";
import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";
import { useGroup, useGroupMembers, useInviteMember, useRemoveMember, useSetGroupExpansions } from "../hooks/groups";
import { useExpansions } from "../hooks/reference";

export function GroupSettingsPage() {
  const { data: me } = useMe();
  const groupId = me?.active_group_id ?? null;
  const { data: group, isLoading } = useGroup(groupId);
  const { data: expansions } = useExpansions();
  const { data: members } = useGroupMembers(groupId);
  const setExpansions = useSetGroupExpansions(groupId ?? 0);
  const inviteMember = useInviteMember();
  const removeMember = useRemoveMember(groupId ?? 0);
  const toast = useToast();

  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [newNick, setNewNick] = useState("");

  useEffect(() => {
    if (group) setSelected(new Set(group.expansion_ids));
  }, [group]);

  if (isLoading || !group) return <Spinner />;
  // Управление группой доступно всем участникам (создатель лишь создаёт и приглашает).
  const isOwner = true;

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

  const saveExpansions = async () => {
    try {
      await setExpansions.mutateAsync([...selected]);
      toast.show("Дополнения сохранены");
    } catch (e) {
      toast.show(e instanceof ApiError ? e.message : "Ошибка");
    }
  };

  const add = async () => {
    const nick = newNick.trim();
    if (!nick) return;
    try {
      await inviteMember.mutateAsync({ groupId: group.id, nickname: nick });
      setNewNick("");
      toast.show("Приглашение отправлено");
    } catch (e) {
      toast.show(e instanceof ApiError ? e.message : "Ошибка");
    }
  };

  const remove = async (userId: number) => {
    try {
      await removeMember.mutateAsync(userId);
    } catch (e) {
      toast.show(e instanceof ApiError ? e.message : "Ошибка");
    }
  };

  return (
    <div>
      <div className="card">
        <h3>Дополнения</h3>
        <div className="stack">
          {(expansions ?? [])
            .filter((e) => !e.is_base)
            .map((e) => (
              <label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
                <span>{e.name_ru}</span>
                <span className="switch">
                  <input
                    type="checkbox"
                    disabled={!isOwner}
                    checked={selected.has(e.id)}
                    onChange={() => toggle(e.id)}
                  />
                  <span className="switch-track">
                    <span className="switch-thumb" />
                  </span>
                </span>
              </label>
            ))}
        </div>
        {isOwner && (
          <button className="btn btn-primary" style={{ marginTop: 10 }} onClick={saveExpansions}>
            Сохранить дополнения
          </button>
        )}
      </div>

      <div className="card">
        <h3>Участники ({(members ?? []).length}/{MAX_GROUP_SIZE})</h3>
        {isOwner && (members ?? []).length >= MAX_GROUP_SIZE && (
          <p className="muted small">Достигнут максимум участников ({MAX_GROUP_SIZE}).</p>
        )}
        {isOwner && (members ?? []).length < MAX_GROUP_SIZE && (
          <div className="row" style={{ marginBottom: 10 }}>
            <input
              placeholder="Ник игрока — отправить приглашение"
              value={newNick}
              onChange={(e) => setNewNick(e.target.value)}
            />
            <button className="btn btn-primary" onClick={add} disabled={inviteMember.isPending}>
              <UserPlus size={18} />
            </button>
          </div>
        )}
        <div className="stack">
          {(members ?? []).map((m) => (
            <div key={m.user_id} className="row-between">
              {/* Кликабельна вся левая часть строки, не только текст ника. */}
              <PlayerLink userId={m.user_id} style={{ flex: 1 }}>
                {m.nickname} <span className="muted small">· {m.role}</span>
              </PlayerLink>
              {isOwner && m.role !== "owner" && (
                <button className="btn btn-ghost btn-danger small" onClick={() => remove(m.user_id)}>
                  <Trash2 size={16} />
                </button>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}