import { useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, Progress } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Progress follows `value` (0..max). The representative Story shows fixed values plus one interactive value; the same specimens
// also exist as Stories tagged `verification` (hidden from the sidebar). No status colors are defined, so there is one look.

function Interactive() {
  const [value, setValue] = useState(30)
  return (
    <div className="grid gap-3">
      <Progress value={value} aria-label="진행률" />
      <p className="text-sm text-muted-foreground" data-testid="value">{`value = ${value}`}</p>
      <div className="flex gap-2">
        <Button variant="cancel" appearance="solid" size="sm" onClick={() => setValue((v) => Math.max(0, v - 25))}>
          -25
        </Button>
        <Button variant="primary" appearance="solid" size="sm" onClick={() => setValue((v) => Math.min(100, v + 25))}>
          +25
        </Button>
      </div>
    </div>
  )
}

function CustomMaximum() {
  return (
    <div className="grid gap-3">
      <Progress value={0} max={200} aria-label="0 of 200" />
      <Progress value={50} max={200} aria-label="50 of 200" />
      <Progress value={200} max={200} aria-label="200 of 200" />
      <Progress max={200} aria-label="Indeterminate" />
    </div>
  )
}

const sections = [
  { id: "zero", label: "0%", node: <Progress value={0} aria-label="0%" /> },
  { id: "middle", label: "50%", node: <Progress value={50} aria-label="50%" /> },
  { id: "full", label: "100%", node: <Progress value={100} aria-label="100%" /> },
  { id: "custom-maximum", label: "max = 200", note: "0 / 50 / 200과 값 없음: ARIA 범위와 실제 채움 비율 확인", node: <CustomMaximum /> },
  { id: "interactive", label: "Interactive value", note: "버튼으로 value를 바꾸면 indicator 폭과 aria-valuenow가 함께 변합니다", node: <Interactive /> },
]

const meta = { title: "Components/Data & Display/Progress", component: Progress, parameters: { layout: "padded" } } satisfies Meta<typeof Progress>
export default meta
type Story = StoryObj<typeof meta>

const board = (...ids: string[]) => (
  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, noteAfter: true, children: s.node }))} />
)

// Representative Story: the common Story page; the sections group the same specimens.
export const All: Story = {
  name: "Progress",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader
        kicker={STORY_KICKER.components}
        title="Progress"
        description="작업 진행률을 막대로 표시합니다. value(0..max)를 따라 채워집니다."
      />
      <StorySection title="Overview">{board("middle")}</StorySection>
      <StorySection title="States" description="value 0과 100입니다.">{board("zero", "full")}</StorySection>
      <StorySection title="Usage" description="max를 바꾼 범위와, value를 바꾸는 실제 조작입니다.">{board("custom-maximum", "interactive")}</StorySection>
    </StoryPage>
  ),
}

export const Zero: Story = { tags: ["verification"], render: () => <Progress value={0} aria-label="0%" /> }
export const Middle: Story = { tags: ["verification"], render: () => <Progress value={50} aria-label="50%" /> }
export const Full: Story = { tags: ["verification"], render: () => <Progress value={100} aria-label="100%" /> }

export const NonDefaultMax: Story = {
  tags: ["verification"],
  render: () => <CustomMaximum />,
  play: async ({ canvasElement }) => {
    const bars = canvasElement.querySelectorAll('[role="progressbar"]')
    const expected = ["translateX(-100%)", "translateX(-75%)", "translateX(0%)", "translateX(-100%)"]
    bars.forEach((bar, index) => {
      const indicator = bar.querySelector<HTMLElement>('[data-slot="progress-indicator"]')
      if (bar.getAttribute("aria-valuemax") !== "200" || indicator?.style.transform !== expected[index]) {
        throw new Error(`Progress max=200: ARIA/fill mismatch in specimen ${index}`)
      }
    })
    if (bars.length !== 4 || bars[1]?.getAttribute("aria-valuenow") !== "50" || bars[3]?.hasAttribute("aria-valuenow")) {
      throw new Error("Progress max=200: incorrect determinate/indeterminate ARIA state")
    }
  },
}