import { describe, it, expect } from "vitest"
import { mount } from "@vue/test-utils"
import { Alert, AlertDescription, AlertTitle } from "."

describe("Alert", () => {
  describe("Alert root", () => {
    it("renders slot content with base classes", () => {
      const wrapper = mount(Alert, { slots: { default: "Heads up" } })
      expect(wrapper.text()).toBe("Heads up")
      expect(wrapper.classes()).toContain("relative")
      expect(wrapper.classes()).toContain("w-full")
      expect(wrapper.classes()).toContain("rounded-lg")
      expect(wrapper.classes()).toContain("border")
      expect(wrapper.classes()).toContain("p-4")
    })

    it("has role=alert for a11y", () => {
      const wrapper = mount(Alert)
      expect(wrapper.attributes("role")).toBe("alert")
    })

    it("renders as a div element", () => {
      const wrapper = mount(Alert)
      expect(wrapper.element.tagName).toBe("DIV")
    })

    it.each([
      ["default", ["bg-background", "text-foreground"]],
      ["destructive", ["text-destructive"]],
      ["success", ["text-success"]],
      ["warning", ["text-warning"]],
      ["info", ["text-info"]],
    ] as const)("renders %s variant with expected classes", (variant, expected) => {
      const wrapper = mount(Alert, { props: { variant } })
      for (const cls of expected) {
        expect(wrapper.classes()).toContain(cls)
      }
    })

    it("accepts custom class", () => {
      const wrapper = mount(Alert, { props: { class: "custom-alert" } })
      expect(wrapper.classes()).toContain("custom-alert")
      expect(wrapper.classes()).toContain("rounded-lg")
    })

    it("allows overriding rounded via custom class", () => {
      const wrapper = mount(Alert, { props: { class: "rounded-none" } })
      expect(wrapper.classes()).toContain("rounded-none")
      expect(wrapper.classes()).not.toContain("rounded-lg")
    })
  })

  describe("AlertTitle", () => {
    it("renders as h5 with correct classes", () => {
      const wrapper = mount(AlertTitle, { slots: { default: "Title" } })
      expect(wrapper.text()).toBe("Title")
      expect(wrapper.element.tagName).toBe("H5")
      expect(wrapper.classes()).toContain("mb-1")
      expect(wrapper.classes()).toContain("font-medium")
      expect(wrapper.classes()).toContain("leading-none")
      expect(wrapper.classes()).toContain("tracking-tight")
    })

    it("accepts custom class", () => {
      const wrapper = mount(AlertTitle, {
        props: { class: "custom-title" },
        slots: { default: "Title" },
      })
      expect(wrapper.classes()).toContain("custom-title")
    })
  })

  describe("AlertDescription", () => {
    it("renders as div with correct classes", () => {
      const wrapper = mount(AlertDescription, { slots: { default: "Description" } })
      expect(wrapper.text()).toBe("Description")
      expect(wrapper.element.tagName).toBe("DIV")
      expect(wrapper.classes()).toContain("text-sm")
    })

    it("accepts custom class", () => {
      const wrapper = mount(AlertDescription, {
        props: { class: "custom-desc" },
        slots: { default: "Desc" },
      })
      expect(wrapper.classes()).toContain("custom-desc")
      expect(wrapper.classes()).toContain("text-sm")
    })
  })

  describe("composition", () => {
    it("renders Alert with Title and Description composed together", () => {
      const wrapper = mount({
        components: { Alert, AlertTitle, AlertDescription },
        template: `
          <Alert variant="info">
            <AlertTitle>Heads up</AlertTitle>
            <AlertDescription>You can read more.</AlertDescription>
          </Alert>
        `,
      })
      expect(wrapper.find("h5").text()).toBe("Heads up")
      expect(wrapper.text()).toContain("You can read more.")
    })
  })
})
