import { UserPlus } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

import { ApiError } from "../api/client";
import { CreateGroupForm } from "../components/CreateGroupForm";
import { GroupInvitations } from "../components/GroupInvitations";
import { GroupSwitcher } from "../components/GroupSwitcher";
import { Leaderboard } from "../components/Leaderboard";
import { MatchListView } from "../components/MatchList";
import { Spinner } from "../components/Spinner";
import { MAX_GROUP_SIZE } from "../domain/constants";
import { formatDate } from "../domain/format";
import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";
import {
  useGroup,
  useGroupMatches,
  useGroupMembers,
  useGroupStats,
  useInviteMember,
} from "../hooks/groups";

export function GroupPage() {
  const { data: me, isLoading } = useMe();
  const navigate = useNavigate();
  const groupId = me?.active_group_id ?? null;

  const { data: group } = useGroup(groupId);
  const { data: stats } = useGroupStats(groupId);
  const { data: matches } = useGroupMatches(groupId);
  const { data: members } = useGroupMembers(groupId);
  const inviteMember = useInviteMember();
  const toast = useToast();
  const [newNick, setNewNick] = useState("");

  if (isLoading) return <Spinner />;

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

  if (!groupId) {
    return (
      <div>
        <div className="card">
          <h3>Активная группа не выбрана</h3>
          <p className="muted small">
            Создайте группу, выберите существующую или примите приглашение, чтобы вести учёт партий.
          </p>
        </div>
        <GroupInvitations />
        <GroupSwitcher />
        <CreateGroupForm />
      </div>
    );
  }

  return (
    <div>
      <div className="card">
        <div className="row-between">
          <h2 style={{ margin: 0 }}>{group?.name ?? "Группа"}</h2>
          {group && (
            <button className="btn btn-ghost small" onClick={() => navigate("/group/settings")}>
              Настройки
            </button>
          )}
        </div>
        <p className="muted small">
          Партий: {stats?.total_matches ?? 0}
          {stats?.last_match_at ? ` · последняя: ${formatDate(stats.last_match_at)}` : ""}
        </p>
      </div>

      <GroupInvitations />

      <div className="card">
        <h3>Список игроков</h3>
        {stats && (
          <Leaderboard
            entries={stats.leaderboard}
            provisional={stats.provisional}
            inactive={stats.inactive}
          />
        )}
        {/* Приглашение нового игрока — здесь, рядом со списком (не в настройках). */}
        {(members ?? []).length >= MAX_GROUP_SIZE ? (
          <p className="muted small" style={{ margin: "10px 0 0" }}>
            Достигнут максимум участников ({MAX_GROUP_SIZE}).
          </p>
        ) : (
          <div className="row" style={{ marginTop: 10 }}>
            <input
              placeholder="Ник игрока — отправить приглашение"
              value={newNick}
              onChange={(e) => setNewNick(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") invite();
              }}
            />
            <button className="btn btn-primary" onClick={invite} disabled={inviteMember.isPending}>
              <UserPlus size={18} />
            </button>
          </div>
        )}
      </div>

      <GroupSwitcher />

      <h3 style={{ marginTop: 8 }}>Партии</h3>
      {matches && <MatchListView items={matches.items} />}
    </div>
  );
}