import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { ParallaxImageShowcase } from '../components/features/parallax-image-showcase';

/** Generate a placeholder screenshot SVG as a data URI */
const makePlaceholder = (label: string, bg = '#1e1e2e', fg = '#a6adc8') =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500">` +
      `<rect width="800" height="500" rx="12" fill="${bg}"/>` +
      `<rect x="16" y="16" width="768" height="40" rx="8" fill="${fg}" opacity="0.15"/>` +
      `<circle cx="36" cy="36" r="6" fill="#f38ba8"/>` +
      `<circle cx="56" cy="36" r="6" fill="#f9e2af"/>` +
      `<circle cx="76" cy="36" r="6" fill="#a6e3a1"/>` +
      `<rect x="16" y="72" width="200" height="412" rx="8" fill="${fg}" opacity="0.08"/>` +
      `<rect x="232" y="72" width="552" height="200" rx="8" fill="${fg}" opacity="0.08"/>` +
      `<rect x="232" y="288" width="268" height="196" rx="8" fill="${fg}" opacity="0.08"/>` +
      `<rect x="516" y="288" width="268" height="196" rx="8" fill="${fg}" opacity="0.08"/>` +
      `<text x="400" y="260" text-anchor="middle" fill="${fg}" font-size="20" font-family="sans-serif" opacity="0.5">${label}</text>` +
      `</svg>`,
  )}`;

const images = [
  { src: makePlaceholder('Dashboard', '#1e1e2e'), alt: 'Dashboard', position: 'left' as const },
  { src: makePlaceholder('Analytics', '#1a1b26'), alt: 'Analytics', position: 'center' as const },
  { src: makePlaceholder('Settings', '#191724'), alt: 'Settings', position: 'right' as const },
];

const meta = {
  title: 'Features/ParallaxImageShowcase',
  component: ParallaxImageShowcase,
  argTypes: {
    layout: {
      control: 'select',
      options: ['non-boxed', 'boxed', 'grid'],
    },
    intensity: {
      control: { type: 'number', min: 0, max: 10, step: 0.1 },
    },
    shadow: { control: 'boolean' },
  },
  parameters: {
    layout: 'fullscreen',
  },
  tags: ['autodocs'],
  decorators: [
    Story => (
      <div style={{ height: '200vh', paddingTop: '10vh' }}>
        <div style={{ height: '600px', maxWidth: '1200px', margin: '0 auto', position: 'relative' }}>
          <Story />
        </div>
      </div>
    ),
  ],
} satisfies Meta<typeof ParallaxImageShowcase>;

export default meta;
type Story = StoryObj<typeof meta>;

// === Layout Variants ===

/**
 * Default non-boxed layout with three overlapping layers and parallax depth.
 */
export const NonBoxed: Story = {
  args: {
    images,
    layout: 'non-boxed',
  },
};

/**
 * Boxed layout with two-row structure — logo on top, images below.
 */
export const Boxed: Story = {
  args: {
    images,
    layout: 'boxed',
    logoElement: (
      <div
        style={{
          padding: '12px 24px',
          background: '#313244',
          borderRadius: 8,
          color: '#cdd6f4',
          fontFamily: 'monospace',
          fontSize: 18,
          fontWeight: 600,
        }}
      >
        Logo
      </div>
    ),
  },
};

/**
 * Grid layout — simple 3-column grid with gentle parallax.
 */
export const Grid: Story = {
  args: {
    images,
    layout: 'grid',
  },
};

// === Intensity Variants ===

/**
 * Subtle animation — barely noticeable movement.
 */
export const SubtleIntensity: Story = {
  args: {
    images,
    layout: 'non-boxed',
    intensity: 0.3,
  },
};

/**
 * Aggressive animation — exaggerated movement.
 */
export const HighIntensity: Story = {
  args: {
    images,
    layout: 'non-boxed',
    intensity: 5,
  },
};

// === Grid Options ===

/**
 * Grid layout with shadow enabled on each image.
 */
export const GridWithShadow: Story = {
  args: {
    images,
    layout: 'grid',
    shadow: true,
  },
};

/**
 * Grid with higher intensity for more dramatic parallax.
 */
export const GridHighIntensity: Story = {
  args: {
    images,
    layout: 'grid',
    intensity: 3,
    shadow: true,
  },
};

// === Partial Images ===

/**
 * Only two images provided (left + center).
 */
export const TwoImages: Story = {
  args: {
    images: images.slice(0, 2),
    layout: 'non-boxed',
  },
};

/**
 * Single image only.
 */
export const SingleImage: Story = {
  args: {
    images: [images[0]],
    layout: 'grid',
  },
};