import type { Meta, StoryObj } from "@storybook/react-vite"
import { layoutProperties, radiusReferences, spacingReferences } from "./reference-data"
import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"

// Compact specification page: item name, key value and preview only. PC shows every section within one screen, narrow screens stack and scroll naturally.
// Token names stay in the data (reference-data.ts) and in data-token attributes. Shortened wording (kept here for reference):
//   Desktop: "Desktop Navigation · LNB 표시 · GNB desktop menu" / Mobile: "Mobile Navigation · LNB 숨김 · GNB mobile menu"
// Only verified items are shown (checked against the token definitions, CSS usage and docs on 2026-11-09):
//   - "Mobile 20px" for Dashboard padding is not implemented: --hm-dashboard-padding is 34px in every viewport (docs/patterns/dashboard-layout.md).
//   - --hm-radius-select is declared in default.css but has no consumer (Select uses --hm-select-radius -> --hm-radius-input), so it is not listed.
const radiusLabels: Record<string, string> = {
  "--hm-radius-control-md": "Control",
  "--hm-radius-button": "Button",
  "--hm-radius-input": "Input",
  "--hm-radius-container": "Container",
}
const shownRadiusReferences = radiusReferences.filter(property => property in radiusLabels)

function Item({ name, value, note }: { name: string; value: string; note?: string }) {
  return <div><div className="hm-layout-spacing-head"><h3>{name}</h3><span className="hm-layout-value">{value}</span></div>{note ? <p className="hm-foundation-note">{note}</p> : null}</div>
}

function LayoutReferencePage() {
  const values = useResolvedProperties(layoutProperties)
  return <ReferencePage title="Layout">
    <div className="hm-layout-ref">
      <ReferenceSection title="Responsive"><div className="hm-foundation-panel hm-layout-list"><Item name="Desktop" value="≥ 1024px" note="LNB 표시" /><Item name="Mobile" value="≤ 1023px" note="LNB 숨김" /></div></ReferenceSection>
      <ReferenceSection title="Spacing"><div className="hm-layout-spacing-grid">{spacingReferences.map(([property, name]) =><article className="hm-foundation-card" key={property} data-token={property}><div className="hm-layout-spacing-head"><h3>{name}</h3><span className="hm-layout-value" data-layout-value>{values[property]}</span></div><div className="hm-layout-spacing-foot"><div className="hm-foundation-spacing" style={{ width: `var(${property})` }} aria-hidden="true" /></div></article>)}</div></ReferenceSection>
      <ReferenceSection title="Radius"><div className="hm-layout-radius-grid">{shownRadiusReferences.map(property => <article className="hm-foundation-card hm-layout-radius" key={property} data-token={property}><div className="hm-foundation-radius" style={{ borderRadius: `var(${property})` }} /><div className="hm-layout-spacing-head"><h3>{radiusLabels[property]}</h3><span className="hm-layout-value">{values[property]}</span></div></article>)}</div></ReferenceSection>
    </div>
  </ReferencePage>
}
// Hidden from the sidebar with the verification tag; the Story ID and direct URL (foundation-layout--all) stay available.
const meta = { title: "Foundation/Layout", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta
export default meta
export const All: StoryObj<typeof meta> = { name: "Layout", render: () => <LayoutReferencePage /> }