/* eslint-disable formatjs/no-literal-string-in-jsx */
import { describe, expect, it, afterEach } from "vitest"
import { render, screen, cleanup } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

import { ChipLink } from "./ChipLink"

afterEach(() => {
  cleanup()
})

describe("ChipLink", () => {
  describe("rendering", () => {
    it("renders as a link element", () => {
      render(<ChipLink href="/test">Test Link</ChipLink>)
      const link = screen.getByRole("link", { name: "Test Link" })
      expect(link).toBeTruthy()
      expect(link.tagName).toBe("A")
    })

    it("renders children content", () => {
      render(<ChipLink href="/test">Link Content</ChipLink>)
      expect(screen.getByText("Link Content")).toBeTruthy()
    })

    it("applies correct href attribute", () => {
      render(<ChipLink href="/destination">Go somewhere</ChipLink>)
      const link = screen.getByRole("link", { name: "Go somewhere" })
      expect(link.getAttribute("href")).toBe("/destination")
    })

    it("renders with multiple children", () => {
      render(
        <ChipLink href="/test">
          <span>Icon</span>
          Text
        </ChipLink>
      )
      expect(screen.getByText("Icon")).toBeTruthy()
      expect(screen.getByText("Text")).toBeTruthy()
    })
  })

  describe("props", () => {
    it("applies custom className", () => {
      render(
        <ChipLink href="/test" className="custom-class">
          Link
        </ChipLink>
      )
      const link = screen.getByRole("link", { name: "Link" })
      expect(link.className).toContain("custom-class")
    })

    it("supports target attribute", () => {
      render(
        <ChipLink href="/external" target="_blank">
          External Link
        </ChipLink>
      )
      const link = screen.getByRole("link", { name: "External Link" })
      expect(link.getAttribute("target")).toBe("_blank")
    })

    it("supports rel attribute", () => {
      render(
        <ChipLink href="/external" rel="noopener noreferrer">
          External Link
        </ChipLink>
      )
      const link = screen.getByRole("link", { name: "External Link" })
      expect(link.getAttribute("rel")).toBe("noopener noreferrer")
    })
  })

  describe("keyboard navigation", () => {
    it("is focusable via keyboard", async () => {
      const user = userEvent.setup()
      render(<ChipLink href="/test">Focusable Link</ChipLink>)

      const link = screen.getByRole("link", { name: "Focusable Link" })
      await user.tab()
      expect(document.activeElement).toBe(link)
    })
  })
})