import { createElement } from "react"
import { renderToStaticMarkup } from "react-dom/server"
import { beforeEach, describe, expect, it, vi } from "vitest"

import { en } from "@/i18n/dictionaries/en"
import { es } from "@/i18n/dictionaries/es"

const mocks = vi.hoisted(() => ({
  usePathname: vi.fn(() => "/people"),
  Link: ({ href, children }: { href: string; children: React.ReactNode }) =>
    createElement("a", { href }, children),
}))

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

vi.mock("next/link", () => ({
  default: mocks.Link,
}))

vi.mock("@/components/ui/sidebar", () => {
  const Pass = ({ children }: { children: React.ReactNode }) => children
  return {
    Sidebar: Pass,
    SidebarContent: Pass,
    SidebarGroup: Pass,
    SidebarGroupContent: Pass,
    SidebarHeader: Pass,
    SidebarMenu: Pass,
    SidebarMenuButton: ({
      children: buttonChildren,
    }: {
      children: React.ReactNode
    }) => buttonChildren,
    SidebarMenuItem: ({
      children: itemChildren,
    }: {
      children: React.ReactNode
    }) => createElement("li", null, itemChildren),
  }
})

vi.mock("@/components/layout/sidebar/sidebarSection", () => ({
  SidebarSection: ({
    title,
    items,
  }: {
    title: string
    items: { title: string; url: string }[]
  }) =>
    createElement(
      "section",
      null,
      title,
      ...items.map((sub) =>
        createElement("a", { key: sub.url, href: sub.url }, sub.title),
      ),
    ),
}))

describe("app sidebar (consolidated people management)", () => {
  beforeEach(() => {
    vi.clearAllMocks()
    mocks.usePathname.mockReturnValue("/people")
  })

  it("does NOT render a 'users' link in the sidebar (consolidated under /people)", async () => {
    const { default: AppSidebar } = await import("@/components/layout/sidebar")

    const html = renderToStaticMarkup(
      createElement(AppSidebar, { copy: en.layout.sidebar }),
    )

    // No /admin/users link must exist anywhere
    expect(html).not.toContain("/admin/users")
    expect(html).not.toContain(">Users<")
  })

  it("renders 'People' (not 'Users') in English", async () => {
    const { default: AppSidebar } = await import("@/components/layout/sidebar")

    const html = renderToStaticMarkup(
      createElement(AppSidebar, { copy: en.layout.sidebar }),
    )

    expect(html).toContain("People")
    expect(html).toContain("/people")
  })

  it("renders 'Personas' (not 'Usuarios') in Spanish", async () => {
    const { default: AppSidebar } = await import("@/components/layout/sidebar")

    const html = renderToStaticMarkup(
      createElement(AppSidebar, { copy: es.layout.sidebar }),
    )

    expect(html).toContain("Personas")
    expect(html).toContain("/people")
    expect(html).not.toContain("Usuarios")
  })

  it("marks the /people entry as active when pathname starts with /people", async () => {
    const { default: AppSidebar } = await import("@/components/layout/sidebar")

    mocks.usePathname.mockReturnValue("/people/person-1/edit")

    const html = renderToStaticMarkup(
      createElement(AppSidebar, { copy: en.layout.sidebar }),
    )

    // The /people link must still be present and reachable
    expect(html).toContain("/people")
  })
})