import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { defineComponent, h } from 'vue';

const ThemePlaceholder = defineComponent({
  name: 'ThemePlaceholder',
  render() {
    return h('div');
  },
});

const meta: Meta<typeof ThemePlaceholder> = {
  title: 'CSS utility/Flex',
  component: ThemePlaceholder,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
};

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

const copyScript = `
  function copyToClipboard(text, el) {
    navigator.clipboard.writeText(text).then(() => {
      el.classList.add('copied');
      setTimeout(() => el.classList.remove('copied'), 1500);
    });
  }
`;

/**
 * Flex direction utilities for controlling the main axis of flex containers.
 * Row for horizontal layouts, column for vertical stacking.
 */
export const Direction: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <style>
          .copy-btn { cursor: pointer; transition: all 0.15s; }
          .copy-btn:hover { background: rgba(0,0,0,0.05); }
          .copy-btn.copied { background: #22c55e22; }
          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
        </style>
        <script>${copyScript}</script>
        
        <div class="mb-8">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Direction</h2>
          <p class="body-14-regular text-content-on-surface-muted">Control the direction of flex items. Click class name to copy.</p>
        </div>
        
        <div class="gap-y-8">
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex flex-row', this)">flex flex-row</code>
            <div class="flex flex-row gap-2 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex flex-col', this)">flex flex-col</code>
            <div class="flex flex-col gap-2 p-4 bg-background-surface-muted rounded-md w-fit">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex flex-row-reverse', this)">flex flex-row-reverse</code>
            <div class="flex flex-row-reverse gap-2 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Justify content utilities for distributing space along the main axis.
 * Controls horizontal alignment in row direction, vertical in column direction.
 */
export const JustifyContent: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <style>
          .copy-btn { cursor: pointer; transition: all 0.15s; }
          .copy-btn:hover { background: rgba(0,0,0,0.05); }
          .copy-btn.copied { background: #22c55e22; }
          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
        </style>
        <script>${copyScript}</script>
        
        <div class="mb-8">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Justify Content</h2>
          <p class="body-14-regular text-content-on-surface-muted">Control how items are distributed along the main axis. Click class name to copy.</p>
        </div>
        
        <div class="gap-y-8">
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex justify-start', this)">flex justify-start</code>
            <div class="flex justify-start gap-2 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex justify-center', this)">flex justify-center</code>
            <div class="flex justify-center gap-2 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex justify-end', this)">flex justify-end</code>
            <div class="flex justify-end gap-2 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex justify-between', this)">flex justify-between</code>
            <div class="flex justify-between p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Align items utilities for positioning items along the cross axis.
 * Controls vertical alignment in row direction, horizontal in column direction.
 */
export const AlignItems: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <style>
          .copy-btn { cursor: pointer; transition: all 0.15s; }
          .copy-btn:hover { background: rgba(0,0,0,0.05); }
          .copy-btn.copied { background: #22c55e22; }
          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
        </style>
        <script>${copyScript}</script>
        
        <div class="mb-8">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Align Items</h2>
          <p class="body-14-regular text-content-on-surface-muted">Control how items are aligned along the cross axis. Click class name to copy.</p>
        </div>
        
        <div class="gap-y-8">
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex items-start', this)">flex items-start</code>
            <div class="flex items-start gap-2 p-4 bg-background-surface-muted rounded-md h-32">
              <div class="w-16 h-8 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex items-center', this)">flex items-center</code>
            <div class="flex items-center gap-2 p-4 bg-background-surface-muted rounded-md h-32">
              <div class="w-16 h-8 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex items-end', this)">flex items-end</code>
            <div class="flex items-end gap-2 p-4 bg-background-surface-muted rounded-md h-32">
              <div class="w-16 h-8 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex items-stretch', this)">flex items-stretch</code>
            <div class="flex items-stretch gap-2 p-4 bg-background-surface-muted rounded-md h-32">
              <div class="w-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Gap utilities for controlling spacing between flex items.
 * Use gap instead of margins for consistent spacing in flex containers.
 */
export const Gap: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <style>
          .copy-btn { cursor: pointer; transition: all 0.15s; }
          .copy-btn:hover { background: rgba(0,0,0,0.05); }
          .copy-btn.copied { background: #22c55e22; }
          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
        </style>
        <script>${copyScript}</script>
        
        <div class="mb-8">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Gap</h2>
          <p class="body-14-regular text-content-on-surface-muted">Control spacing between flex items. Click class name to copy.</p>
        </div>
        
        <div class="gap-y-8">
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex gap-1', this)">flex gap-1</code>
            <div class="flex gap-1 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex gap-4', this)">flex gap-4</code>
            <div class="flex gap-4 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex gap-8', this)">flex gap-8</code>
            <div class="flex gap-8 p-4 bg-background-surface-muted rounded-md">
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-16 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Flex wrap utilities for controlling how items wrap to new lines.
 * Wrap allows items to flow onto multiple lines when space is limited.
 */
export const Wrap: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <style>
          .copy-btn { cursor: pointer; transition: all 0.15s; }
          .copy-btn:hover { background: rgba(0,0,0,0.05); }
          .copy-btn.copied { background: #22c55e22; }
          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
        </style>
        <script>${copyScript}</script>
        
        <div class="mb-8">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Wrap</h2>
          <p class="body-14-regular text-content-on-surface-muted">Control how flex items wrap. Click class name to copy.</p>
        </div>
        
        <div class="gap-y-8">
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex flex-nowrap', this)">flex flex-nowrap</code>
            <div class="flex flex-nowrap gap-2 p-4 bg-background-surface-muted rounded-md overflow-x-auto max-w-md" tabindex="0" aria-label="No-wrap flex example">
              <div class="w-24 h-16 flex-shrink-0 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-24 h-16 flex-shrink-0 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-24 h-16 flex-shrink-0 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
              <div class="w-24 h-16 flex-shrink-0 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
              <div class="w-24 h-16 flex-shrink-0 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
            </div>
          </div>
          
          <div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('flex flex-wrap', this)">flex flex-wrap</code>
            <div class="flex flex-wrap gap-2 p-4 bg-background-surface-muted rounded-md max-w-md">
              <div class="w-24 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
              <div class="w-24 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
              <div class="w-24 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
              <div class="w-24 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
              <div class="w-24 h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};
