import "@testing-library/jest-dom";
import fs from "node:fs";
import path from "node:path";
import { fireEvent, render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it, vi } from "vitest";
import { resolveRepoPath } from "~/utils/testing/repoPaths";
import { MobileNav } from "./DocsMobileNav";
import { DocsSidebarNav } from "./DocsSidebarNav";

vi.mock("~/utils/data/useRootData", () => ({
  useRootData: () => ({
    appConfiguration: {
      branding: {},
    },
  }),
}));

describe("docs navigation", () => {
  it("renders parents with children as expand-only controls", () => {
    render(
      <MemoryRouter>
        <DocsSidebarNav
          items={[
            {
              title: "Settings",
              path: "/settings",
              items: [{ title: "Overview", path: "/settings" }],
            },
          ]}
        />
      </MemoryRouter>
    );

    expect(screen.getByRole("button", { name: "Settings" })).toHaveAttribute("aria-expanded", "true");
    expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute("href", "/settings");
    expect(screen.queryByRole("link", { name: "Settings" })).not.toBeInTheDocument();
  });

  it("does not render disabled docs items as links", () => {
    render(
      <MemoryRouter>
        <DocsSidebarNav
          items={[
            {
              title: "Settings",
              items: [{ title: "Disabled Plugin", path: "/settings/plugin", disabled: true }],
            },
          ]}
        />
      </MemoryRouter>
    );

    expect(screen.queryByRole("link", { name: "Disabled Plugin" })).not.toBeInTheDocument();
    expect(screen.getByText("Disabled Plugin")).toHaveAttribute("aria-disabled", "true");
  });

  it("renders an accessible mobile docs sheet title and description", () => {
    render(
      <MemoryRouter>
        <MobileNav items={[]} />
      </MemoryRouter>
    );

    fireEvent.click(screen.getByRole("button", { name: "Toggle menu" }));

    const dialog = screen.getByRole("dialog", { name: "Docs navigation" });
    const heading = screen.getByRole("heading", { name: "Docs navigation" });
    const description = screen.getByText("Displays the mobile docs navigation.");

    expect(dialog).toHaveAccessibleDescription("Displays the mobile docs navigation.");
    expect(heading.closest('[data-slot="sheet-header"]')).toHaveClass("sr-only");
    expect(description.closest('[data-slot="sheet-header"]')).toHaveClass("sr-only");
  });

  it("keeps mobile docs parents as non-link controls", () => {
    render(
      <MemoryRouter>
        <MobileNav
          items={[
            {
              title: "Settings",
              path: "/settings",
              items: [{ title: "Overview", path: "/settings" }],
            },
          ]}
        />
      </MemoryRouter>
    );

    fireEvent.click(screen.getByRole("button", { name: "Toggle menu" }));

    expect(screen.getByRole("button", { name: "Settings" })).toHaveAttribute("aria-expanded", "true");
    expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute("href", "/settings");
    expect(screen.queryByRole("link", { name: "Settings" })).not.toBeInTheDocument();
  });

  it("adds an explicit overview child for knowledge-base category paths", () => {
    const source = fs.readFileSync(resolveRepoPath(path.join("apps/web/app/modules/knowledgeBase/components/layouts/KbDocsLayout.tsx")), "utf8");

    expect(source).toContain('items: [{ title: t("shared.overview"), path: category.href }]');
  });
});