// @vitest-environment jsdom

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

const statsSpy = vi.fn();
const createPlayerSectionSpy = vi.fn();
const playerListSpy = vi.fn();

vi.mock("@/components/players-admin-stats", () => ({
  PlayersAdminStats: (props: unknown) => {
    statsSpy(props);
    return <div data-testid="players-admin-stats" />;
  },
}));

vi.mock("@/components/players-admin-create-player-section", () => ({
  PlayersAdminCreatePlayerSection: (props: unknown) => {
    createPlayerSectionSpy(props);
    return <div data-testid="players-admin-create-player-section" />;
  },
}));

vi.mock("@/components/players-admin-player-list", () => ({
  PlayersAdminPlayerList: (props: unknown) => {
    playerListSpy(props);
    return <div data-testid="players-admin-player-list" />;
  },
}));

const players: BallboxStoreAdminPlayer[] = [
  {
    id: "player_1",
    name: "Player One",
    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 },
];

function renderShell(overrides?: Partial<ComponentProps<typeof PlayersAdminShell>>) {
  return render(
    <PlayersAdminShell
      players={players}
      setPlayers={vi.fn()}
      busy={false}
      message="Player created"
      playerForm={{ name: "Player One", whatsappPhone: "", telegramHandle: "" }}
      setPlayerForm={vi.fn()}
      clubs={clubs}
      membershipClubIds={{ player_1: "club_1" }}
      setMembershipClubIds={vi.fn()}
      runMutation={vi.fn()}
      {...overrides}
    />,
  );
}

describe("PlayersAdminShell", () => {
  afterEach(() => {
    cleanup();
    statsSpy.mockReset();
    createPlayerSectionSpy.mockReset();
    playerListSpy.mockReset();
  });

  it("owns the layout classes and forwards the wired child props", () => {
    const setPlayers = vi.fn();
    const setPlayerForm = vi.fn();
    const setMembershipClubIds = vi.fn();
    const runMutation = vi.fn();

    renderShell({
      setPlayers,
      message: null,
      playerForm: { name: "Player Two", whatsappPhone: "", telegramHandle: "" },
      setPlayerForm,
      membershipClubIds: { player_1: "club_9" },
      setMembershipClubIds,
      runMutation,
    });

    expect(screen.getByTestId("players-admin-stats")).toBeTruthy();
    expect(screen.getByTestId("players-admin-create-player-section")).toBeTruthy();
    expect(screen.getByTestId("players-admin-player-list")).toBeTruthy();

    expect(statsSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        players,
        clubs,
        cardClassName: playersAdminShellStyles.statCard,
      }),
    );

    expect(createPlayerSectionSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        busy: false,
        message: null,
        playerForm: { name: "Player Two", whatsappPhone: "", telegramHandle: "" },
        setPlayerForm,
        cardClassName: playersAdminShellStyles.sectionCard,
        runMutation,
      }),
    );

    expect(playerListSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        players,
        setPlayers,
        busy: false,
        clubs,
        membershipClubIds: { player_1: "club_9" },
        setMembershipClubIds,
        articleCardClassName: playersAdminShellStyles.articleCard,
        insetPanelClassName: playersAdminShellStyles.insetPanel,
        wellClassName: playersAdminShellStyles.well,
        selectClassName: playersAdminShellStyles.select,
        runMutation,
      }),
    );
  });
});