// @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 { NetworkAdminClubList } from "@/components/network-admin-club-list";
import type { BallboxStoreClubDetail } from "@/lib/ballbox-store";

const clubCardSpy = vi.fn();

vi.mock("@/components/network-admin-club-card", () => ({
  NetworkAdminClubCard: (props: unknown) => {
    clubCardSpy(props);
    return <div data-testid="club-card" />;
  },
}));

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

function renderClubList(overrides?: Partial<ComponentProps<typeof NetworkAdminClubList>>) {
  return render(
    <NetworkAdminClubList
      clubs={clubs}
      busy={false}
      setClubs={vi.fn()}
      venueForms={{ club_2: { name: "Venue Two", slug: "venue-two", status: "inactive" } }}
      setVenueForms={vi.fn()}
      emptyVenueForm={{ name: "", slug: "", status: "active" }}
      machineForms={{}}
      setMachineForms={vi.fn()}
      emptyMachineForm={{ label: "", active: true }}
      venueStatusOptions={["active", "inactive"]}
      selectClassName="select"
      articleCardClassName="article"
      mutedPanelClassName="muted"
      insetPanelClassName="inset"
      wellClassName="well"
      runMutation={vi.fn()}
      {...overrides}
    />,
  );
}

describe("NetworkAdminClubList", () => {
  afterEach(() => {
    cleanup();
    clubCardSpy.mockReset();
  });

  it("falls back to the empty venue form per club", () => {
    const emptyVenueForm = { name: "", slug: "", status: "active" as const };
    renderClubList({ emptyVenueForm });

    const firstCall = clubCardSpy.mock.calls[0]?.[0] as { venueForm: typeof emptyVenueForm } | undefined;
    const secondCall = clubCardSpy.mock.calls[1]?.[0] as { venueForm: { name: string; slug: string; status: string } } | undefined;

    expect(screen.getAllByTestId("club-card")).toHaveLength(2);
    expect(firstCall?.venueForm).toBe(emptyVenueForm);
    expect(secondCall?.venueForm).toEqual({ name: "Venue Two", slug: "venue-two", status: "inactive" });
  });
});