import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { MemoryRouter } from "react-router-dom";
import { ConfigPageContainer } from "../ConfigPageContainer";

// Mock all tab components to avoid deep render trees and API calls.
vi.mock("../JailsTab", () => ({
  JailsTab: ({ initialJail }: { initialJail?: string }) => (
    <div data-testid="jails-tab" data-initial-jail={initialJail}>
      JailsTab
    </div>
  ),
}));

vi.mock("../FiltersTab", () => ({
  FiltersTab: () => <div data-testid="filters-tab">FiltersTab</div>,
}));

vi.mock("../ActionsTab", () => ({
  ActionsTab: () => <div data-testid="actions-tab">ActionsTab</div>,
}));

vi.mock("../ServerTab", () => ({
  ServerTab: () => <div data-testid="server-tab">ServerTab</div>,
}));

vi.mock("../RegexTesterTab", () => ({
  RegexTesterTab: () => <div data-testid="regex-tab">RegexTesterTab</div>,
}));

function renderContainer() {
  return render(
    <MemoryRouter>
      <FluentProvider theme={webLightTheme}>
        <ConfigPageContainer />
      </FluentProvider>
    </MemoryRouter>,
  );
}

describe("ConfigPageContainer", () => {
  it("renders the tab list", () => {
    renderContainer();
    expect(screen.getByRole("tablist")).toBeInTheDocument();
  });

  it("renders all tab buttons", () => {
    renderContainer();
    expect(screen.getByRole("tab", { name: /jails/i })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: /filters/i })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: /actions/i })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: /server/i })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: /regex tester/i })).toBeInTheDocument();
  });

  it("shows the Jails tab by default", () => {
    renderContainer();
    expect(screen.getByTestId("jails-tab")).toBeInTheDocument();
  });

  it("switches to Filters tab when clicked", () => {
    renderContainer();
    fireEvent.click(screen.getByRole("tab", { name: /filters/i }));
    expect(screen.getByTestId("filters-tab")).toBeInTheDocument();
  });

  it("switches to Actions tab when clicked", () => {
    renderContainer();
    fireEvent.click(screen.getByRole("tab", { name: /actions/i }));
    expect(screen.getByTestId("actions-tab")).toBeInTheDocument();
  });

  it("switches to Server tab when clicked", () => {
    renderContainer();
    fireEvent.click(screen.getByRole("tab", { name: /server/i }));
    expect(screen.getByTestId("server-tab")).toBeInTheDocument();
  });

  it("switches to Regex Tester tab when clicked", () => {
    renderContainer();
    fireEvent.click(screen.getByRole("tab", { name: /regex tester/i }));
    expect(screen.getByTestId("regex-tab")).toBeInTheDocument();
  });

  it("keeps all tab panels mounted (CSS display toggling)", () => {
    renderContainer();
    fireEvent.click(screen.getByRole("tab", { name: /filters/i }));
    expect(screen.getByTestId("jails-tab")).toBeInTheDocument();
    expect(screen.getByTestId("filters-tab")).toBeInTheDocument();
  });
});
