import type { Meta, StoryObj } from "@storybook/react-vite"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Hover Card is a Radix overlay (Portal) for a richer preview than Tooltip. The representative Story shows real triggers
// (hover or focus to open); the verification Story starts one open. Radix owns the open / close delay and the hover bridge.

const longText = "긴 콘텐츠는 카드 폭에서 줄바꿈되고 카드 높이만 늘어납니다. 공백 없는 긴 문자열도 폭을 밀어내지 않습니다. ".repeat(4)

function Preview({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <HoverCard defaultOpen={defaultOpen}>
      <HoverCardTrigger asChild>
        <a href="#preview" className="text-sm font-medium text-primary underline underline-offset-4">
          한맥 프로젝트
        </a>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="grid gap-1">
          <p className="font-bold">한맥 프로젝트</p>
          <p>노선과 시설물 정보를 관리하는 프로젝트입니다.</p>
          <p className="pt-1 text-xs text-muted-foreground">담당 김한맥 · 최근 수정 2026-10-02</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

function LongContent() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#long" className="text-sm font-medium text-primary underline underline-offset-4">
          긴 콘텐츠
        </a>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="grid gap-1">
          <p className="font-bold">긴 콘텐츠</p>
          <p>{longText}</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

const meta = { title: "Components/Overlay/Hover Card", component: HoverCard, parameters: { layout: "centered" } } satisfies Meta<typeof HoverCard>
export default meta
type Story = StoryObj<typeof meta>

// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
  return (
    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
      {states.map((state) => (
        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
      ))}
    </div>
  )
}

// Representative Story: Overview and Usage are merged into one Variants section (Basic, Long Content).
export const All: Story = {
  name: "Hover Card",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Hover Card" />
      <StorySection title="Variants">
        <SpecimenGrid
          states={[
            { id: "basic", label: "Basic", children: <Preview /> },
            { id: "long-content", label: "Long Content", children: <LongContent /> },
          ]}
        />
      </StorySection>
    </StoryPage>
  ),
}

export const Open: Story = {
  tags: ["verification"],
  parameters: { layout: "fullscreen" },
  render: () => (
    <div className="flex min-h-[260px] justify-center p-8">
      <Preview defaultOpen />
    </div>
  ),
}