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/Extended',
  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);
    });
  }
`;

/**
 * Extended color 1 for charts, data visualizations, and non-semantic color needs.
 * Use for the first data series in charts or categorical distinctions.
 */
export const Extended1: Story = {
  name: '1',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended-1</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-col items-start gap-1.5">
          <div class="w-16 h-16 rounded-md bg-extended-extended-1 border border-border-surface-default"></div>
          <div class="text-left">
            <span class="label-12-medium text-content-on-surface-primary block">extended-1</span>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-1', this)">bg-extended-extended-1</code>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Extended color 2 for charts, data visualizations, and non-semantic color needs.
 * Use for the second data series in charts or categorical distinctions.
 */
export const Extended2: Story = {
  name: '2',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended-2</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-col items-start gap-1.5">
          <div class="w-16 h-16 rounded-md bg-extended-extended-2 border border-border-surface-default"></div>
          <div class="text-left">
            <span class="label-12-medium text-content-on-surface-primary block">extended-2</span>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-2', this)">bg-extended-extended-2</code>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Extended color 3 for charts, data visualizations, and non-semantic color needs.
 * Use for the third data series in charts or categorical distinctions.
 */
export const Extended3: Story = {
  name: '3',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended-3</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-col items-start gap-1.5">
          <div class="w-16 h-16 rounded-md bg-extended-extended-3 border border-border-surface-default"></div>
          <div class="text-left">
            <span class="label-12-medium text-content-on-surface-primary block">extended-3</span>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-3', this)">bg-extended-extended-3</code>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Extended color 4 for charts, data visualizations, and non-semantic color needs.
 * Use for the fourth data series in charts or categorical distinctions.
 */
export const Extended4: Story = {
  name: '4',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended-4</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-col items-start gap-1.5">
          <div class="w-16 h-16 rounded-md bg-extended-extended-4 border border-border-surface-default"></div>
          <div class="text-left">
            <span class="label-12-medium text-content-on-surface-primary block">extended-4</span>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-4', this)">bg-extended-extended-4</code>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Extended color 5 for charts, data visualizations, and non-semantic color needs.
 * Use for the fifth data series in charts or categorical distinctions.
 */
export const Extended5: Story = {
  name: '5',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended-5</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-col items-start gap-1.5">
          <div class="w-16 h-16 rounded-md bg-extended-extended-5 border border-border-surface-default"></div>
          <div class="text-left">
            <span class="label-12-medium text-content-on-surface-primary block">extended-5</span>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-5', this)">bg-extended-extended-5</code>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * All extended colors displayed together for comparison.
 * Use this palette for multi-series charts or when you need several distinct non-semantic colors.
 */
export const AllExtended: Story = {
  name: 'All',
  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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">extended</h2>
          <p class="body-14-regular text-content-on-surface-muted">Extended colors are used for charts and other non-semantic visualizations. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-wrap gap-6">
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-extended-extended-1 border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">extended-1</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-1', this)">bg-extended-extended-1</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-extended-extended-2 border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">extended-2</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-2', this)">bg-extended-extended-2</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-extended-extended-3 border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">extended-3</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-3', this)">bg-extended-extended-3</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-extended-extended-4 border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">extended-4</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-4', this)">bg-extended-extended-4</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-extended-extended-5 border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">extended-5</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-5', this)">bg-extended-extended-5</code>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};
