import { useEffect, useRef, useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { typographyProperties, typographyReferences } from "./reference-data"
import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"

type TypographyReference = (typeof typographyReferences)[number]

const weights = [
  { property: "--hm-input-font-weight", label: "Regular" },
  { property: "--hm-font-weight-medium", label: "Medium" },
  { property: "--hm-font-weight-bold", label: "Bold" },
]
// Left table: text styles. Right table: form controls. Together they cover every entry in typographyReferences.
const textLabels = ["Page Header · title", "Card · title", "Page Header · description", "Label"]
const textRows = typographyReferences.filter(item => textLabels.includes(item.label))
const controlRows = typographyReferences.filter(item => !textLabels.includes(item.label))

function SpecimenRow({ label, size, line, weight }: TypographyReference & { weight?: string }) {
  const ref = useRef<HTMLDivElement>(null)
  const [metrics, setMetrics] = useState({ main: "", spacing: "" })
  useEffect(() => {
    let mounted = true
    void document.fonts.ready.then(() => {
      if (!mounted || !ref.current) return
      const style = getComputedStyle(ref.current)
      setMetrics({ main: `${style.fontSize} / ${style.lineHeight} / ${style.fontWeight}`, spacing: `letter-spacing: ${style.letterSpacing}` })
    })
    return () => { mounted = false }
  }, [])
  return <tr>
    <th scope="row">{label}</th>
    <td><div ref={ref} className="hm-typo-sample" data-typography-sample={label} lang="ko" style={{ fontSize: `var(${size})`, lineHeight: `var(${line})`, fontWeight: weight ? `var(${weight})` : "normal" }}>한맥 Hanmac 0123</div></td>
    <td className="hm-typo-metrics" data-typography-metrics><span>{metrics.main}</span><small className="hm-foundation-note">{metrics.spacing}</small></td>
  </tr>
}

function SpecimenTable({ rows }: { rows: readonly TypographyReference[] }) {
  return <table className="hm-typo-table">
    <thead><tr><th scope="col">Component</th><th scope="col">Sample</th><th scope="col">Size / Line / Weight</th></tr></thead>
    <tbody>{rows.map(item => <SpecimenRow key={item.label} {...item} />)}</tbody>
  </table>
}

function TypographyReferencePage() {
  const values = useResolvedProperties(typographyProperties)
  return <ReferencePage title="폰트">
    <ReferenceSection title="Font Family">
      <p className="hm-typo-family"><span>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</span><code className="hm-foundation-note">--hm-font-family-base: {values["--hm-font-family-base"]}</code></p>
    </ReferenceSection>
    <ReferenceSection title="Font Weight">
      <div className="hm-typo-weights">{weights.map(({ property, label }) => <article className="hm-foundation-card hm-typo-weight" key={property}>
        <p className="hm-typo-weight-meta"><strong>{label}</strong> <span className="hm-foundation-note">{values[property]}</span></p>
        <p className="hm-typo-weight-preview" style={{ fontWeight: `var(${property})` }}>한맥 Hanmac 0123</p>
        <code className="hm-foundation-note">{property}</code>
      </article>)}</div>
    </ReferenceSection>
    <ReferenceSection title="Typography Specimens">
      <div className="hm-typo-tables"><SpecimenTable rows={textRows} /><SpecimenTable rows={controlRows} /></div>
    </ReferenceSection>
  </ReferencePage>
}
// The sidebar name is "폰트"; `id` keeps the existing Story ID (foundation-typography--all) stable.
const meta = { title: "Foundation/폰트", id: "foundation-typography", parameters: { layout: "fullscreen" } } satisfies Meta
export default meta
export const All: StoryObj<typeof meta> = { name: "폰트", render: () => <TypographyReferencePage /> }