import type { ComponentType } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { TunnelFacility } from "@hm-design/center-graphic"
import {
  BridgeReferenceDemo,
  IntersectionReferenceDemo,
  InterchangeReferenceDemo,
  JunctionReferenceDemo,
  LinkedFacilityReferenceDemo,
  RoadsideReferenceDemo,
  TunnelReferenceDemo,
} from "@hm-design/center-graphic/reference"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { withRepresentation } from "./center-shared"

// Owners: ui-viz docs/visualization/facility.md and facility-assets.md (128 approved SVG references, shipped unchanged).
// The display scale (Q2b) is HOLD and Facility has no Selected / Hover state.
const meta = {
  title: "노선도/시설물",
  id: "center-graphic-facility",
  component: TunnelFacility,
  parameters: { layout: "padded" },
} satisfies Meta<typeof TunnelFacility>
export default meta
type Story = StoryObj<typeof meta>

// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
const page = (name: string, Demo: ComponentType): Story => ({
  name,
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title={name} />
      <StorySection title="개요">
        {withRepresentation(() => <Demo />)}
      </StorySection>
    </StoryPage>
  ),
})

// `name` is repeated as a literal because Storybook's static indexer cannot read it through page(); it drives the sidebar label.
export const Tunnel: Story = { ...page("터널", TunnelReferenceDemo), name: "터널" }
export const Bridge: Story = { ...page("교량", BridgeReferenceDemo), name: "교량" }
export const Intersection: Story = { ...page("교차로", IntersectionReferenceDemo), name: "교차로" }
export const Junction: Story = { ...page("분기점", JunctionReferenceDemo), name: "분기점" }
export const Interchange: Story = { ...page("나들목", InterchangeReferenceDemo), name: "나들목" }
export const Roadside: Story = { ...page("휴게소 · 졸음쉼터", RoadsideReferenceDemo), name: "휴게소 · 졸음쉼터" }
// Linked facilities are a standalone section heading followed by item cards.
// Keep the reference data/artwork and road-class grouping owned by the package.
export const Linked: Story = {
  ...page("연계 시설물", LinkedFacilityReferenceDemo),
  name: "연계 시설물",
  render: () => (
    <StoryPage className="sb-center-linked-page">
      <StoryPageHeader title="연계 시설물" />
      {withRepresentation(() => <LinkedFacilityReferenceDemo />)}
    </StoryPage>
  ),
}

export const TunnelPlayground: Story = {
  tags: ["verification"],
  name: "직접 테스트 (터널)",
  decorators: [withRepresentation],
  args: { name: "대산2터널", secondaryText: "L=750m", variant: "positionMap", separated: false },
  argTypes: { variant: { control: "inline-radio", options: ["positionMap", "actualDetail"] } },
}