import type { Meta, StoryObj } from '@storybook/react'

import { Section } from '@/components/ui/section'
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card'

const meta = {
  title: 'Composition/Section',
  component: Section,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'highlighted', 'accent'],
    },
    width: {
      control: 'select',
      options: ['narrow', 'default', 'wide', 'full'],
    },
  },
} satisfies Meta<typeof Section>

export default meta
type Story = StoryObj<typeof meta>

const sampleCards = (
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    {['Design', 'Develop', 'Deploy'].map((title) => (
      <Card key={title}>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
          <CardDescription>Description for the {title.toLowerCase()} phase.</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Content explaining the {title.toLowerCase()} process in detail.
          </p>
        </CardContent>
      </Card>
    ))}
  </div>
)

export const Default: Story = {
  args: {
    title: 'Our Process',
    description: 'How we build great products from concept to delivery.',
    children: sampleCards,
  },
}

export const Highlighted: Story = {
  args: {
    variant: 'highlighted',
    title: 'Featured Section',
    description: 'This section uses a highlighted background to stand out.',
    children: sampleCards,
  },
}

export const Accent: Story = {
  args: {
    variant: 'accent',
    title: 'Accent Section',
    description: 'A subtle accent background to differentiate this area.',
    children: sampleCards,
  },
}

export const Narrow: Story = {
  args: {
    width: 'narrow',
    title: 'Narrow Section',
    description: 'Constrained width for focused reading.',
    children: (
      <p className="text-muted-foreground">
        This is a narrow section with max-w-3xl. Useful for text-heavy content that
        benefits from shorter line lengths for readability.
      </p>
    ),
  },
}

export const Wide: Story = {
  args: {
    width: 'wide',
    title: 'Wide Section',
    description: 'Extended width for content-rich layouts.',
    children: sampleCards,
  },
}

export const Full: Story = {
  args: {
    width: 'full',
    variant: 'highlighted',
    title: 'Full Width Section',
    description: 'Spans the full width of the viewport.',
    children: sampleCards,
  },
}

export const NoHeader: Story = {
  args: {
    children: sampleCards,
  },
}

export const AllCombinations: Story = {
  render: () => (
    <div>
      {(['default', 'highlighted', 'accent'] as const).map((variant) =>
        (['narrow', 'default', 'wide'] as const).map((width) => (
          <Section
            key={`${variant}-${width}`}
            variant={variant}
            width={width}
            title={`${variant} / ${width}`}
            description={`Section with variant="${variant}" and width="${width}".`}
          >
            <div className="h-20 rounded-lg border-2 border-dashed border-muted-foreground/25 flex items-center justify-center text-sm text-muted-foreground">
              Content area
            </div>
          </Section>
        )),
      )}
    </div>
  ),
}