// @vitest-environment jsdom

import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import type { ComponentProps } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { PlayersAdminPlayerCard } from "@/components/players-admin-player-card";
import type { BallboxStoreAdminPlayer, BallboxStoreClubListItem } from "@/lib/ballbox-store";

const players: BallboxStoreAdminPlayer[] = [
  {
    id: "player_1",
    name: "Player One",
    whatsappPhone: null,
    telegramHandle: null,
    gender: null,
    birthYear: null,
    coachCategory: null,
    memberships: [{ id: "membership_1", clubId: "club_1", clubName: "Club One" }],
  },
  {
    id: "player_2",
    name: "Player Two",
    whatsappPhone: null,
    telegramHandle: null,
    gender: null,
    birthYear: null,
    coachCategory: null,
    memberships: [],
  },
];

const clubs: BallboxStoreClubListItem[] = [
  { id: "club_1", atcSportclubId: "106", name: "Club One", locationName: null, venues: 1, machines: 1, screens: 1 },
  { id: "club_2", atcSportclubId: "107", name: "Club Two", locationName: null, venues: 1, machines: 1, screens: 1 },
];

function renderPlayerCard(overrides?: Partial<ComponentProps<typeof PlayersAdminPlayerCard>>) {
  return render(
    <PlayersAdminPlayerCard
      player={players[0]}
      setPlayers={vi.fn()}
      busy={false}
      clubs={clubs}
      membershipClubIds={{}}
      setMembershipClubIds={vi.fn()}
      articleCardClassName="article"
      insetPanelClassName="inset"
      wellClassName="well"
      selectClassName="select"
      runMutation={vi.fn()}
      {...overrides}
    />,
  );
}

describe("PlayersAdminPlayerCard", () => {
  afterEach(() => {
    cleanup();
  });

  it("updates the targeted player name through setPlayers", () => {
    const setPlayers = vi.fn();
    renderPlayerCard({ setPlayers });

    fireEvent.change(screen.getByDisplayValue("Player One"), { target: { value: "Player Renamed" } });

    const update = setPlayers.mock.calls[0]?.[0] as ((value: BallboxStoreAdminPlayer[]) => BallboxStoreAdminPlayer[]) | undefined;
    expect(update).toBeTypeOf("function");

    const nextPlayers = update?.(players);
    expect(nextPlayers?.[0].name).toBe("Player Renamed");
    expect(nextPlayers?.[1].name).toBe("Player Two");
  });

  it("renders the empty memberships state for a player without memberships", () => {
    renderPlayerCard({ player: players[1] });

    expect(screen.getByText("No memberships yet.")).toBeTruthy();
    expect(screen.getByRole("button", { name: "Add membership" })).toHaveProperty("disabled", false);
  });
});