import type { ReactElement, ReactNode } from "react";
import type { TeamRecord } from "@/lib/api/teams";

import { render, screen } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { fetchTeams } from "@/lib/api/teams";

import TeamsSettingsPage from "./page";

vi.mock("next/link", () => ({
  default: function LinkMock({
    children,
    href,
  }: {
    children: ReactNode;
    href: string;
  }): ReactElement {
    return <a href={href}>{children}</a>;
  },
}));

vi.mock("@/lib/api/teams", () => ({
  fetchTeams: vi.fn(),
  createTeam: vi.fn(),
}));

const fetchTeamsMock = vi.mocked(fetchTeams);

const baseTeam: TeamRecord = {
  id: "team-1",
  workspaceId: "workspace-1",
  name: "Platform Team",
  description: "Owns platform services",
  metadata: {},
  createdAt: "2026-02-01T00:00:00.000Z",
  updatedAt: "2026-02-01T00:00:00.000Z",
  _count: {
    members: 3,
  },
};

describe("TeamsSettingsPage", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("loads and renders teams from the API", async () => {
    fetchTeamsMock.mockResolvedValue([baseTeam]);

    render(<TeamsSettingsPage />);

    expect(screen.getByText("Loading teams...")).toBeInTheDocument();

    expect(await screen.findByText("Your Teams (1)")).toBeInTheDocument();
    expect(screen.getByText("Platform Team")).toBeInTheDocument();
    expect(fetchTeamsMock).toHaveBeenCalledTimes(1);
  });

  it("shows empty state when the API returns no teams", async () => {
    fetchTeamsMock.mockResolvedValue([]);

    render(<TeamsSettingsPage />);

    expect(await screen.findByText("Your Teams (0)")).toBeInTheDocument();
    expect(screen.getByText("No teams yet")).toBeInTheDocument();
  });

  it("shows error state and does not show empty state", async () => {
    fetchTeamsMock.mockRejectedValue(new Error("Unable to load teams"));

    render(<TeamsSettingsPage />);

    expect(await screen.findByText("Unable to load teams")).toBeInTheDocument();
    expect(screen.queryByText("No teams yet")).not.toBeInTheDocument();
  });
});