import { fireEvent, render, screen, within } from "@testing-library/react"
import { describe, expect, it } from "vitest"

import { ComponentsPreviewPage } from "./components-preview-page"

describe("ComponentsPreviewPage", () => {
  it("previews and updates the shared select", async () => {
    render(<ComponentsPreviewPage />)

    const select = screen.getByRole("combobox", { name: "信号分类" })
    expect(select).toHaveTextContent("全部信号")

    fireEvent.click(select)
    const option = await screen.findByRole("option", { name: "超卖类" })
    fireEvent.pointerDown(option, { pointerType: "mouse" })
    fireEvent.click(option)

    expect(select).toHaveTextContent("超卖类")
    expect(screen.getByRole("status", { name: "当前选择" })).toHaveTextContent(
      "当前选择：超卖类",
    )
  })

  it("previews date picker selection and clearing", async () => {
    render(<ComponentsPreviewPage />)

    const selectedDatePicker = screen.getByRole("button", {
      name: "已选择日期",
    })
    expect(selectedDatePicker).toHaveTextContent("2026-08-07")

    fireEvent.click(selectedDatePicker)
    const popover = document.querySelector(
      '[data-slot="popover-content"]',
    ) as HTMLElement
    expect(popover).toBeInTheDocument()
    const calendar = within(popover).getByRole("grid", { name: /2026年8月/ })
    const day = within(calendar).getByRole("button", { name: /2026年8月8日/ })
    fireEvent.click(day)

    expect(selectedDatePicker).toHaveTextContent("2026-08-08")
    fireEvent.click(screen.getByRole("button", { name: "清空已选择日期" }))
    expect(selectedDatePicker).toHaveTextContent("选择日期")
  })

  it("previews popover open and close behavior", async () => {
    render(<ComponentsPreviewPage />)

    const trigger = screen.getByRole("button", { name: "打开交互说明" })
    expect(trigger).toHaveAttribute("aria-expanded", "false")

    fireEvent.click(trigger)
    const popup = await screen.findByText("弹层已打开")
    expect(popup).toBeInTheDocument()
    expect(trigger).toHaveAttribute("aria-expanded", "true")

    fireEvent.click(screen.getByRole("button", { name: "关闭弹层" }))
    expect(screen.queryByText("弹层已打开")).not.toBeInTheDocument()
    expect(trigger).toHaveAttribute("aria-expanded", "false")
  })

  it("shows disabled and loading states", () => {
    render(<ComponentsPreviewPage />)

    expect(screen.getByRole("button", { name: "禁用状态" })).toBeDisabled()
    expect(screen.getByRole("button", { name: "禁用日期" })).toBeDisabled()
    expect(
      screen.getByRole("button", { name: "清空已选择日期" }),
    ).not.toBeDisabled()
    expect(document.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(2)
  })
})