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

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: (): React.JSX.Element => <div data-testid="global-agent-roster" />,
}));

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

describe("Mission Control Phase 2 Gate", () => {
  it("Phase 2 gate: MissionControlLayout renders with all components present", () => {
    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation((..._args) => undefined);

    render(<MissionControlLayout />);

    expect(screen.getByTestId("global-agent-roster")).toBeInTheDocument();
    expect(screen.getByTestId("mission-control-panel")).toBeInTheDocument();
    expect(consoleErrorSpy).not.toHaveBeenCalled();

    consoleErrorSpy.mockRestore();
  });
});