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

const sampleSlides = [
  { src: "https://picsum.photos/seed/a/600/400", alt: "A" },
  { src: "https://picsum.photos/seed/b/600/400", alt: "B" },
  { src: "https://picsum.photos/seed/c/600/400", alt: "C" },
]

describe("CarouselDisplay", () => {
  it("renders all slides", () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: sampleSlides } })
    expect(wrapper.findAll("[data-testid='carousel-slide']")).toHaveLength(3)
  })

  it("renders image slides with src and alt", () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: sampleSlides } })
    const imgs = wrapper.findAll("img")
    expect(imgs).toHaveLength(3)
    expect(imgs[0].attributes("src")).toBe(
      "https://picsum.photos/seed/a/600/400",
    )
    expect(imgs[0].attributes("alt")).toBe("A")
  })

  it("renders an html slide via v-html", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: [{ html: "<p data-testid='custom-html'>Hi</p>" }] },
    })
    expect(wrapper.find("[data-testid='custom-html']").exists()).toBe(true)
  })

  it("renders a caption-only (text) slide", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: [{ caption: "Just text" }] },
    })
    expect(wrapper.text()).toContain("Just text")
  })

  it("shows arrow buttons by default when there is more than one slide", () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: sampleSlides } })
    expect(wrapper.find("[data-testid='carousel-prev']").exists()).toBe(true)
    expect(wrapper.find("[data-testid='carousel-next']").exists()).toBe(true)
  })

  it("hides arrow buttons when showArrows is false", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: sampleSlides, showArrows: false },
    })
    expect(wrapper.find("[data-testid='carousel-prev']").exists()).toBe(false)
    expect(wrapper.find("[data-testid='carousel-next']").exists()).toBe(false)
  })

  it("renders one indicator per slide when showIndicators is true", () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: sampleSlides } })
    const dots = wrapper.findAll("[data-testid='carousel-indicator']")
    expect(dots).toHaveLength(3)
  })

  it("hides indicators when showIndicators is false", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: sampleSlides, showIndicators: false },
    })
    expect(wrapper.find("[data-testid='carousel-indicators']").exists()).toBe(
      false,
    )
  })

  it("renders an empty placeholder when slides is empty", () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: [] } })
    expect(wrapper.find("[data-testid='carousel-display-empty']").exists()).toBe(
      true,
    )
  })

  it("does not render arrows or indicators with a single slide", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: [sampleSlides[0]] },
    })
    expect(wrapper.find("[data-testid='carousel-prev']").exists()).toBe(false)
    expect(wrapper.find("[data-testid='carousel-next']").exists()).toBe(false)
    expect(wrapper.find("[data-testid='carousel-indicators']").exists()).toBe(
      false,
    )
  })

  it("clicking the next button does not throw (embla wired up)", async () => {
    const wrapper = mount(CarouselDisplay, { props: { slides: sampleSlides } })
    await wrapper.find("[data-testid='carousel-next']").trigger("click")
    await wrapper.find("[data-testid='carousel-prev']").trigger("click")
    expect(wrapper.find("[data-testid='carousel-display']").exists()).toBe(true)
  })

  it("applies classList (string)", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: sampleSlides, classList: "my-extra" },
    })
    expect(wrapper.attributes("class")).toContain("my-extra")
  })

  it("applies classList (array)", () => {
    const wrapper = mount(CarouselDisplay, {
      props: { slides: sampleSlides, classList: ["foo", "bar"] },
    })
    expect(wrapper.attributes("class")).toContain("foo")
    expect(wrapper.attributes("class")).toContain("bar")
  })

  // Skipped: autoplay relies on setInterval + DOM measurements that are
  // unreliable under jsdom. Covered visually in Storybook.
  it.skip("autoplay advances slides after the configured delay", () => {})
})
