import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { getFeaturedProjects } from "@/lib/portfolio-data";
import NotebookFallback from "./NotebookFallback";
import { selectNotebookProjects } from "./notebookProjects";

const projects = selectNotebookProjects(getFeaturedProjects(null));

describe("NotebookFallback", () => {
  it("keeps project content and controls in normal document flow", () => {
    const { container } = render(<NotebookFallback projects={projects} />);

    expect(screen.getByTestId("notebook-fallback")).toBeInTheDocument();
    expect(screen.getByRole("tablist")).toBeInTheDocument();
    expect(screen.getByRole("tabpanel")).toBeInTheDocument();
    expect(
      screen.getByRole("link", { name: /abrir projeto/i }),
    ).toBeInTheDocument();
    expect(container.querySelector("canvas")).not.toBeInTheDocument();
  });

  it("allows manual tab changes without an animated stage", async () => {
    const user = userEvent.setup();
    const { container } = render(<NotebookFallback projects={projects} />);

    await user.click(screen.getAllByRole("tab")[2]);

    expect(screen.getByRole("tabpanel")).toHaveAccessibleName(
      /SEV Moda Íntima/i,
    );
    expect(container.querySelector("canvas")).not.toBeInTheDocument();
  });

  it("respects the requested initial project", () => {
    render(<NotebookFallback initialIndex={3} projects={projects} />);

    expect(screen.getByRole("tabpanel")).toHaveAccessibleName(/AS Serviços/i);
    expect(screen.getAllByRole("tab")[3]).toHaveAttribute(
      "aria-selected",
      "true",
    );
  });
});