import { render, screen } from "@testing-library/react";
import { redirect } from "next/navigation";

import HomePage from "../../app/page";
import { DashboardShell } from "@/components/layout/dashboard-shell";

vi.mock("next/navigation", () => ({
  redirect: vi.fn(),
}));

test("renders reusable dashboard landmarks for rail and content", () => {
  render(<DashboardShell>content</DashboardShell>);

  expect(
    screen.getByRole("complementary", { name: "Dashboard rail" }),
  ).toBeInTheDocument();
  expect(
    screen.getByRole("main", { name: "Dashboard content" }),
  ).toBeInTheDocument();
});

test("renders its children in the main content area", () => {
  render(<DashboardShell>dashboard body</DashboardShell>);

  expect(
    screen.getByRole("main", { name: "Dashboard content" }),
  ).toHaveTextContent("dashboard body");
});

test("renders the primary navigation as shell framing with route links", () => {
  const { container } = render(<DashboardShell>content</DashboardShell>);
  const navigation = screen.getByRole("navigation", {
    name: "Primary Navigation",
  });

  expect(navigation).toContainElement(screen.getByRole("link", { name: "订单总览" }));
  expect(navigation).toContainElement(
    screen.getByRole("link", { name: "审核工作台" }),
  );
  expect(container.querySelectorAll('nav[aria-label="Primary Navigation"] a')).toHaveLength(6);
  expect(screen.getByRole("link", { name: "订单总览" })).toHaveAttribute(
    "href",
    "/orders",
  );
  expect(screen.getByRole("link", { name: "审核工作台" })).toHaveAttribute(
    "href",
    "/reviews/workbench",
  );
});

test("does not inject page-level content chrome into the main region", () => {
  render(<DashboardShell>dashboard body</DashboardShell>);

  const main = screen.getByRole("main", { name: "Dashboard content" });

  expect(main).not.toHaveTextContent("Gallery-First Warm Console");
  expect(main).not.toHaveTextContent("Shared layout frame");
});

test("locks the rail to the viewport and makes the content pane independently scrollable on desktop", () => {
  const { container } = render(<DashboardShell>dashboard body</DashboardShell>);
  const shellFrame = container.firstElementChild;
  const rail = screen.getByRole("complementary", { name: "Dashboard rail" });
  const main = screen.getByRole("main", { name: "Dashboard content" });

  expect(shellFrame).toHaveClass("md:h-screen", "md:overflow-hidden");
  expect(rail).toHaveClass("md:h-full");
  expect(main).toHaveClass("md:h-full", "md:overflow-y-auto");
});

test("uses a narrow desktop rail and removes the max-width shell cap", () => {
  const { container } = render(<DashboardShell>dashboard body</DashboardShell>);
  const shellFrame = container.firstElementChild;
  const rail = screen.getByRole("complementary", { name: "Dashboard rail" });

  expect(shellFrame).not.toHaveClass("max-w-7xl");
  expect(rail.className).toContain("md:w-[228px]");
});

test("redirects the root page to orders", () => {
  HomePage();

  expect(redirect).toHaveBeenCalledWith("/orders");
});