import { useState, type ReactNode } from "react"
import { ChevronDownIcon } from "lucide-react"
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StorySection } from "@/components/story-page"

// Shared Collapsible specimens (Storybook only). Used by the Collapsible Stories (verification) and by the Accordion
// representative page, which shows Accordion and Collapsible under one sidebar item ("접기·펼치기").
// One independent disclosure per state with real, clickable triggers. Collapsible is a single disclosure: no divider system
// and no animation.

const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)

const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>

function Frame({ label, defaultOpen, disabled, children }: { label: string; defaultOpen?: boolean; disabled?: boolean; children: ReactNode }) {
  return narrow(
    <Collapsible defaultOpen={defaultOpen} disabled={disabled}>
      <CollapsibleTrigger>
        {label}
        <ChevronDownIcon aria-hidden />
      </CollapsibleTrigger>
      <CollapsibleContent>{children}</CollapsibleContent>
    </Collapsible>
  )
}

export const ClosedSpecimen = () => <Frame label="고급 설정 보기">추가 옵션이 여기에 표시됩니다.</Frame>
export const OpenSpecimen = () => (
  <Frame label="고급 설정 보기" defaultOpen>
    처음부터 열려 있는 영역입니다.
  </Frame>
)
export const DisabledSpecimen = () => (
  <Frame label="비활성 영역" disabled>
    열 수 없습니다.
  </Frame>
)
export const LongSpecimen = () => (
  <Frame label="긴 콘텐츠" defaultOpen>
    <p>{longText}</p>
    <p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
  </Frame>
)

// Controlled: the parent owns `open`; an HM Button is the trigger through asChild and keeps its style.
export function ControlledSpecimen() {
  const [open, setOpen] = useState(false)
  return narrow(
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger asChild>
        <Button variant="primary" appearance="outline">
          {open ? "접기" : "펼치기"}
        </Button>
      </CollapsibleTrigger>
      {/* 2026-11-13: sample content instead of the former `controlled: open = …` debug text; the trigger label shows the state. */}
      <CollapsibleContent>펼친 영역의 내용입니다.</CollapsibleContent>
    </Collapsible>
  )
}

const sections = [
  { id: "closed", label: "Closed", node: <ClosedSpecimen /> },
  { id: "open", label: "Open", node: <OpenSpecimen /> },
  { id: "disabled", label: "Disabled", node: <DisabledSpecimen /> },
  { id: "long", label: "Long Content", node: <LongSpecimen /> },
  { id: "controlled", label: "Button trigger", node: <ControlledSpecimen /> },
]

// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title and
// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
  return (
    <div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
      {states.map((state) => (
        <StateBoard key={state.id} min={10000} states={[state]} />
      ))}
    </div>
  )
}

// The Collapsible sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix`
// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components.
export function CollapsibleSections({ titlePrefix, idPrefix = "" }: { titlePrefix?: string; idPrefix?: string }) {
  const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name)
  const board = (cols: 2 | 3, ...ids: string[]) => (
    <StateGrid cols={cols} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: `${idPrefix}${s.id}`, label: s.label, children: s.node }))} />
  )
  return (
    <>
      <StorySection title={title("States")}>{board(3, "closed", "open", "disabled")}</StorySection>
      <StorySection title={title("Usage")}>{board(3, "long", "controlled")}</StorySection>
    </>
  )
}