import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  BarChartExample,
  HorizontalBarChartExample,
  SignedBarChartExample,
  StackedBarChartExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entries. All values are sample data.
// Narrow widths: use the toolbar Viewport presets (HM Mobile · 390). The chart is fluid.
const meta = {
  title: "Chart/Bar Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Bar: Story = {
  name: "Bar Chart",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Bar Chart" />
      {/* Two sections per row from 1024px (HM desktop boundary), one below. Source order is the mobile order; on desktop it reads
          row by row: Grouped | Horizontal, then Stacked | Positive / Negative. On desktop every row has the same height and each
          card fills its section, so card tops, bottoms and chart areas line up. */}
      <div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
        <StorySection title="Grouped">
          <BarChartExample />
        </StorySection>
        <StorySection title="Horizontal">
          <HorizontalBarChartExample />
        </StorySection>
        <StorySection title="Stacked">
          <StackedBarChartExample />
        </StorySection>
        <StorySection title="Positive / Negative">
          <SignedBarChartExample />
        </StorySection>
      </div>
    </StoryPage>
  ),
}