/* 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 { ChipStatic } from "./ChipStatic"

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

describe("ChipStatic accessibility", () => {
  describe("semantic HTML", () => {
    it("uses span element (non-interactive)", () => {
      render(<ChipStatic>Static Label</ChipStatic>)
      const chip = screen.getByText("Static Label")
      expect(chip.tagName).toBe("SPAN")
    })

    it("is not a button or link", () => {
      render(<ChipStatic>Not Interactive</ChipStatic>)
      expect(screen.queryByRole("button")).toBeNull()
      expect(screen.queryByRole("link")).toBeNull()
    })

    it("content is visible and readable", () => {
      render(<ChipStatic>Readable Content</ChipStatic>)
      expect(screen.getByText("Readable Content")).toBeTruthy()
    })
  })

  describe("non-interactive behavior", () => {
    it("is not focusable by default", async () => {
      const user = userEvent.setup()
      render(
        <div>
          <ChipStatic>Static Chip</ChipStatic>
          <button>Focusable Button</button>
        </div>
      )

      await user.tab()
      // Focus should skip the static chip and go directly to the button
      expect(document.activeElement).toBe(
        screen.getByRole("button", { name: "Focusable Button" })
      )
    })

    it("does not receive focus when tabbing through page", async () => {
      const user = userEvent.setup()
      render(
        <div>
          <button>First</button>
          <ChipStatic>Static</ChipStatic>
          <button>Second</button>
        </div>
      )

      const firstButton = screen.getByRole("button", { name: "First" })
      const secondButton = screen.getByRole("button", { name: "Second" })

      await user.tab()
      expect(document.activeElement).toBe(firstButton)

      await user.tab()
      expect(document.activeElement).toBe(secondButton)
    })
  })

  describe("screen reader support", () => {
    it("has visible text content", () => {
      render(<ChipStatic>Screen Reader Text</ChipStatic>)
      const chip = screen.getByText("Screen Reader Text")
      expect(chip.textContent?.trim().length).toBeGreaterThan(0)
    })

    it("text content is accessible in the DOM", () => {
      render(<ChipStatic>Status: Active</ChipStatic>)
      expect(screen.getByText("Status: Active")).toBeTruthy()
    })
  })

  describe("color contrast considerations", () => {
    it("Neutral color variant renders", () => {
      render(<ChipStatic color="Neutral">Neutral</ChipStatic>)
      expect(screen.getByText("Neutral")).toBeTruthy()
    })

    it("Subtle color variant renders", () => {
      render(<ChipStatic color="Subtle">Subtle</ChipStatic>)
      expect(screen.getByText("Subtle")).toBeTruthy()
    })

    it("Disabled color variant renders", () => {
      render(<ChipStatic color="Disabled">Disabled</ChipStatic>)
      expect(screen.getByText("Disabled")).toBeTruthy()
    })
  })

  describe("text sizing", () => {
    it("xs size renders readable text", () => {
      render(<ChipStatic size="xs">Extra Small</ChipStatic>)
      expect(screen.getByText("Extra Small")).toBeTruthy()
    })

    it("sm size renders readable text", () => {
      render(<ChipStatic size="sm">Small</ChipStatic>)
      expect(screen.getByText("Small")).toBeTruthy()
    })

    it("lg size renders readable text", () => {
      render(<ChipStatic size="lg">Large</ChipStatic>)
      expect(screen.getByText("Large")).toBeTruthy()
    })
  })
})