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"
import type { getUsers as _getUsers } from "@/services/user.service"

type UserData = Awaited<ReturnType<typeof _getUsers>>["data"][number]

const mocks = vi.hoisted(() => ({
  getUsers: vi.fn(),
  getI18n: vi.fn(),
}))

vi.mock("@/i18n/server", () => ({
  getI18n: mocks.getI18n,
}))

vi.mock("@/services/user.service", () => ({
  getUsers: mocks.getUsers,
}))

vi.mock("@/components/common/pageheader", () => ({
  default: ({ title, addLabel }: { title?: string; addLabel?: string }) =>
    createElement(
      "header",
      null,
      [title, addLabel].filter(Boolean).join(" | "),
    ),
}))

vi.mock("@/components/common/pagination", () => ({
  default: ({ totalPages }: { totalPages: number }) =>
    createElement("nav", { "aria-label": "Pagination" }, totalPages),
}))

describe("user pages localization", () => {
  beforeEach(() => {
    vi.clearAllMocks()
    mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
  })

  it("renders the user list in Spanish with localized headers, status/role labels, and unchanged user data", async () => {
    const { default: UsersPage } = await import(
      "@/app/(dashboard)/admin/users/page"
    )

    mocks.getUsers.mockResolvedValue({
      data: [
        {
          id: "user-1",
          name: "Ada Lovelace",
          email: "ada@example.test",
          role: "ADMIN",
          isActive: true,
        },
        {
          id: "user-2",
          name: "Grace Hopper",
          email: "grace@example.test",
          role: "STAFF",
          isActive: false,
        },
      ],
      totalPages: 1,
    })

    const html = renderToStaticMarkup(
      await UsersPage({ searchParams: Promise.resolve({}) }),
    )

    // Title and add label
    expect(html).toContain("Usuarios")
    expect(html).toContain("Agregar usuario")

    // Table headers from dictionary
    expect(html).toContain("Nombre")
    expect(html).toContain("Correo electrónico")
    expect(html).toContain("Rol")
    expect(html).toContain("Estado")
    expect(html).toContain("Acciones")

    // Status labels from dictionary (display-only, not canonical)
    expect(html).toContain("Activo")
    expect(html).toContain("Inactivo")

    // Role labels from dictionary (display-only, not canonical)
    expect(html).toContain("Administrador")
    expect(html).toContain("Personal")

    // User data is never translated
    expect(html).toContain("Ada Lovelace")
    expect(html).toContain("ada@example.test")
    expect(html).toContain("Grace Hopper")
    expect(html).toContain("grace@example.test")

    // Canonical role values must NOT appear as display text
    expect(html).not.toContain(">ADMIN<")
    expect(html).not.toContain(">STAFF<")
  })

  it("renders the localized user empty state when no users exist", async () => {
    const { default: UsersPage } = await import(
      "@/app/(dashboard)/admin/users/page"
    )

    mocks.getUsers.mockResolvedValue({
      data: [],
      totalPages: 0,
    })

    const html = renderToStaticMarkup(
      await UsersPage({ searchParams: Promise.resolve({}) }),
    )

    expect(html).toContain("No se encontraron usuarios.")
  })

  it("renders the user list in English with English dictionary labels", async () => {
    const { default: UsersPage } = await import(
      "@/app/(dashboard)/admin/users/page"
    )

    mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
    mocks.getUsers.mockResolvedValue({
      data: [
        {
          id: "user-1",
          name: "Ada Lovelace",
          email: "ada@example.test",
          role: "MANAGER",
          isActive: true,
        },
      ],
      totalPages: 1,
    })

    const html = renderToStaticMarkup(
      await UsersPage({ searchParams: Promise.resolve({}) }),
    )

    // English dictionary labels
    expect(html).toContain("Users")
    expect(html).toContain("Add User")
    expect(html).toContain("Name")
    expect(html).toContain("Email")
    expect(html).toContain("Role")
    expect(html).toContain("Status")
    expect(html).toContain("Actions")
    expect(html).toContain("Active")
    expect(html).toContain("Manager")

    // Canonical enum value must NOT appear as display text
    expect(html).not.toContain(">MANAGER<")
  })

  it("renders unknown role via fallback when role is not in dictionary", async () => {
    const { default: UsersPage } = await import(
      "@/app/(dashboard)/admin/users/page"
    )

    mocks.getUsers.mockResolvedValue({
      data: [
        {
          id: "user-1",
          name: "Test User",
          email: "test@example.test",
          role: "UNKNOWN_ROLE",
          isActive: true,
        } as unknown as UserData,
      ],
      totalPages: 1,
    })

    const html = renderToStaticMarkup(
      await UsersPage({ searchParams: Promise.resolve({}) }),
    )

    // Unknown role should use fallback
    expect(html).toContain("Rol desconocido")
  })
})