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(() => ({
  createPersonUser: vi.fn(),
  getI18n: vi.fn(),
  push: vi.fn(),
  toastError: vi.fn(),
  toastSuccess: vi.fn(),
}))

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

vi.mock("@/actions/person.actions", () => ({
  createPersonUserAction: mocks.createPersonUser,
}))

vi.mock("@/services/person.service", () => ({
  PersonService: {
    findById: vi.fn(),
  },
}))

vi.mock("next/navigation", () => ({
  useRouter: () => ({
    push: mocks.push,
  }),
}))

vi.mock("sonner", () => ({
  toast: {
    error: mocks.toastError,
    success: mocks.toastSuccess,
  },
}))

describe("unified creation form page", () => {
  beforeEach(() => {
    vi.clearAllMocks()
    mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
  })

  it("renders unified form with Person fields, email, password, role, and NO_USER option in Spanish", async () => {
    const { default: NewUserPage } = await import(
      "@/app/(dashboard)/admin/users/new/page"
    )

    const html = renderToStaticMarkup(await NewUserPage())

    // Person fields
    expect(html).toContain("Nombre")
    expect(html).toContain("Apellido")
    expect(html).toContain("Departamento")
    expect(html).toContain("Teléfono")

    // User fields
    expect(html).toContain("Correo electrónico")
    expect(html).toContain("Contraseña")
    expect(html).toContain("Rol")

    // NO_USER role option
    expect(html).toContain("Sin cuenta de usuario")
    expect(html).toContain('value="NO_USER"')

    // Other role options still present
    expect(html).toContain('value="ADMIN"')
    expect(html).toContain('value="MANAGER"')
    expect(html).toContain('value="STAFF"')
    expect(html).toContain('value="VIEWER"')
  })

  it("renders unified form with Person fields and NO_USER option in English", async () => {
    mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })

    const { default: NewUserPage } = await import(
      "@/app/(dashboard)/admin/users/new/page"
    )

    const html = renderToStaticMarkup(await NewUserPage())

    // Person fields
    expect(html).toContain("First Name")
    expect(html).toContain("Last Name")
    expect(html).toContain("Department")
    expect(html).toContain("Phone")

    // User fields
    expect(html).toContain("Password")
    expect(html).toContain("Email")

    // NO_USER role option
    expect(html).toContain("No user account")
    expect(html).toContain('value="NO_USER"')
  })

  it("renders Person field placeholders from the unified form dictionary", async () => {
    const { default: NewUserPage } = await import(
      "@/app/(dashboard)/admin/users/new/page"
    )

    const html = renderToStaticMarkup(await NewUserPage())

    // Person field placeholders
    expect(html).toContain('placeholder="Nombre"') // firstNamePlaceholder (es)
    expect(html).toContain('placeholder="Apellido"') // lastNamePlaceholder (es)
    expect(html).toContain("Selecciona un departamento") // departmentPlaceholder
    expect(html).toContain('placeholder="Teléfono"') // phonePlaceholder (es)
  })

  it("renders department select with all PERSON_DEPARTMENTS values", async () => {
    const { default: NewUserPage } = await import(
      "@/app/(dashboard)/admin/users/new/page"
    )

    const html = renderToStaticMarkup(await NewUserPage())

    // Department values must use canonical enum values
    expect(html).toContain('value="ADMINISTRATION"')
  })
})