import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Tooltip is a Radix overlay (Portal) with short, non-interactive text. The representative Story shows real triggers
// (hover or focus to open); the verification Story starts one open. Interactive content belongs in Popover / Hover Card.

const longText = "긴 설명은 최대 폭에서 줄바꿈됩니다. 이 정도 길이가 Tooltip의 한계이며, 더 긴 내용은 Popover나 Hover Card를 사용합니다."

function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <Tooltip defaultOpen={defaultOpen}>
      <TooltipTrigger asChild>
        <Button variant="primary" appearance="outline">
          기본
        </Button>
      </TooltipTrigger>
      <TooltipContent>저장하지 않은 변경 사항이 있습니다</TooltipContent>
    </Tooltip>
  )
}

function Placement({ side }: { side: "top" | "right" | "bottom" | "left" }) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="primary" appearance="outline" size="sm">
          {side}
        </Button>
      </TooltipTrigger>
      <TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
    </Tooltip>
  )
}

function LongText() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="primary" appearance="outline">
          긴 텍스트
        </Button>
      </TooltipTrigger>
      <TooltipContent>{longText}</TooltipContent>
    </Tooltip>
  )
}

function Disabled() {
  // A disabled button gets no pointer events, so the trigger is a wrapper element.
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span tabIndex={0} className="inline-block">
          <Button variant="primary" appearance="solid" disabled>
            비활성
          </Button>
        </span>
      </TooltipTrigger>
      <TooltipContent>권한이 없어 사용할 수 없습니다</TooltipContent>
    </Tooltip>
  )
}

const meta = { title: "Components/Overlay/Tooltip", component: Tooltip, parameters: { layout: "centered" } } satisfies Meta<typeof Tooltip>
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 is merged into Variants (Basic is its first item, then the four sides): 5 columns on PC.
export const All: Story = {
  name: "Tooltip",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <TooltipProvider>
      <StoryPage>
        <StoryPageHeader title="Tooltip" />
        <StorySection title="Variants">
          <SpecimenGrid
            columns={5}
            states={[
              { id: "basic", label: "Basic", children: <Basic /> },
              { id: "top", label: "Top", children: <Placement side="top" /> },
              { id: "right", label: "Right", children: <Placement side="right" /> },
              { id: "bottom", label: "Bottom", children: <Placement side="bottom" /> },
              { id: "left", label: "Left", children: <Placement side="left" /> },
            ]}
          />
        </StorySection>
        <StorySection title="Usage">
          <SpecimenGrid
            columns={5}
            states={[
              { id: "long-text", label: "Long Text", children: <LongText /> },
              { id: "disabled", label: "Disabled", children: <Disabled /> },
            ]}
          />
        </StorySection>
      </StoryPage>
    </TooltipProvider>
  ),
}

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