import { render, screen } from "@testing-library/react";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
}

const mockGlobalAgentRoster = vi.fn();
const mockMissionControlPanel = vi.fn();
const mockQueueNotificationFeed = vi.fn();

vi.mock("@/components/mission-control/AuditLogDrawer", () => ({
  AuditLogDrawer: ({ trigger }: { trigger: ReactNode }): React.JSX.Element => (
    <div data-testid="audit-log-drawer">{trigger}</div>
  ),
}));

vi.mock("@/components/mission-control/GlobalAgentRoster", () => ({
  GlobalAgentRoster: (props: unknown): React.JSX.Element => {
    mockGlobalAgentRoster(props);
    return <div data-testid="global-agent-roster" />;
  },
}));

vi.mock("@/components/mission-control/MissionControlPanel", () => ({
  MissionControlPanel: (props: unknown): React.JSX.Element => {
    mockMissionControlPanel(props);
    return <div data-testid="mission-control-panel" />;
  },
  MAX_PANEL_COUNT: 6,
  MIN_PANEL_COUNT: 1,
}));

vi.mock("@/components/mission-control/QueueNotificationFeed", () => ({
  QueueNotificationFeed: (props: unknown): React.JSX.Element => {
    mockQueueNotificationFeed(props);
    return <div data-testid="queue-notification-feed" />;
  },
}));

vi.mock("@/components/ui/button", () => ({
  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
    <button {...props}>{children}</button>
  ),
}));

import { MissionControlLayout } from "./MissionControlLayout";

describe("MissionControlLayout", (): void => {
  beforeEach((): void => {
    vi.clearAllMocks();
    vi.stubGlobal("fetch", vi.fn());
  });

  afterEach((): void => {
    vi.unstubAllGlobals();
  });

  it("renders without crashing", (): void => {
    render(<MissionControlLayout />);

    expect(screen.getByRole("region", { name: "Mission Control" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Audit Log" })).toBeInTheDocument();
  });

  it("renders sidebar and panel grid container", (): void => {
    render(<MissionControlLayout />);

    const region = screen.getByRole("region", { name: "Mission Control" });

    expect(region.querySelector(".grid")).toBeInTheDocument();
    expect(region.querySelector("aside")).toBeInTheDocument();
    expect(region.querySelector("main")).toBeInTheDocument();
    expect(screen.getByTestId("global-agent-roster")).toBeInTheDocument();
    expect(screen.getByTestId("mission-control-panel")).toBeInTheDocument();
    expect(screen.getByTestId("queue-notification-feed")).toBeInTheDocument();
  });
});