import type { ReactNode } from "react"
import { sampleDataNotice } from "@hm-design/chart/examples"
import { StorySection } from "@/components/story-page"

// Storybook presentation only (not part of @hm-design/chart): the open Chart page layout (2026-11-12, user request).
// Charts sit directly on the Storybook content background, without the example card (background, border, padding). Each chart
// is one StorySection: H2 variant name → description (what the example shows) → thin section divider → optional toolbar → chart.
// The charts themselves are the public @hm-design/chart components on the @hm-design/chart/examples sample data, with the same
// props as the matching *Example card, so data, legend, tooltip and interaction are unchanged. No common layout change; the page
// only sets the chart's own surface token (chartPageClass).

/**
 * className of every Chart page's StoryPage. The charts sit on the Storybook content background (--hm-sem-bg-content), so the page
 * sets the chart's public surface token to it (2026-11-12): slice / segment gaps, Dot rings, label halos and the radial meter's
 * center read as background instead of white. Only the token value is set, as a consumer would; no chart internals are overridden.
 */
export const chartPageClass = "[--hm-chart-surface:var(--hm-sem-bg-content)]"

/** One sample-data notice per page, instead of a badge and a notice under every chart. */
export function ChartSampleNotice() {
  return (
    <p className="m-0 text-[length:var(--hm-label-font-size)] leading-[var(--hm-label-line-height)] text-[color:var(--hm-sem-fg-secondary)]">
      {sampleDataNotice}
    </p>
  )
}

/**
 * One chart of a Chart page. `toolbar` keeps the example card's control row (Select height, so the charts of a row start at the
 * same height); pass `null` for an empty row of that height next to charts that have one.
 */
export function ChartSpecimen({
  title,
  description,
  toolbar,
  children,
}: {
  title: string
  description?: ReactNode
  toolbar?: ReactNode
  children: ReactNode
}) {
  return (
    <StorySection title={title} description={description}>
      {toolbar !== undefined ? (
        <div
          data-slot="chart-story-toolbar"
          aria-hidden={toolbar === null ? true : undefined}
          className="mb-3 flex min-h-[34px] items-center text-sm text-muted-foreground"
        >
          {toolbar}
        </div>
      ) : null}
      {children}
    </StorySection>
  )
}

// Grid columns (className of StorySectionGrid). Widths are the preview iframe width, which already excludes the Storybook sidebar.
// A third column only from 1200px, where each column keeps about 340px (Radial needs 320px). Rows align at the top; every
// chart keeps its own height. Source order is the one-column (mobile) order. All breakpoints are px (min-[…]): Tailwind does not
// order a rem breakpoint (lg) against a px one, so `lg:grid-cols-2` would win over `min-[1200px]:grid-cols-3`.
const base = "grid-cols-1 items-start *:min-w-0"
export const chartGrid = {
  /** Wide charts (Bar): two per row from 1024px. */
  pair: `${base} min-[1024px]:grid-cols-2`,
  /** Compact round charts (Donut, Pie, Radial): two per row from 1024px, three from 1200px. */
  compact: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-cols-3`,
  /** Radar (four charts): two per row from 1024px, four in one row from 1600px. */
  quad: `${base} min-[1024px]:grid-cols-2 min-[1600px]:grid-cols-4`,
  /**
   * Plain / labelled pairs (Line, Area): two per row from 1024px (each pair in one row); from 1200px three columns that fill
   * top to bottom, so the plain styles form the first row and their Dot + Label versions the second.
   */
  pairs: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-flow-col min-[1200px]:grid-cols-3 min-[1200px]:grid-rows-2`,
} as const