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

/**
 * Drop shadows aligned with design tokens under `global.shadow` in the token file.
 * Use UnoCSS utilities `shadow-sm` … `shadow-xl` (not token paths like `global.shadow.xl`).
 */
export const DropShadow: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-secondary">
        <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">Drop shadows</h2>
          <p class="body-14-regular text-content-on-surface-muted">
            Token group <code class="label-12-medium">global.shadow</code>. Click a utility class to copy.
          </p>
        </div>

        <div class="flex flex-wrap gap-8 items-end">
          <div class="flex flex-col items-center gap-2">
            <div class="w-28 h-28 rounded-lg bg-background-surface-primary border border-border-surface-default shadow-sm"></div>
            <div class="text-center max-w-[8rem]">
              <span class="label-12-medium text-content-on-surface-primary block">sm</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded break-all" onclick="copyToClipboard('shadow-sm', this)">shadow-sm</code>
              <span class="label-12-regular text-content-on-surface-muted block mt-1">shadow-sm</span>
            </div>
          </div>

          <div class="flex flex-col items-center gap-2">
            <div class="w-28 h-28 rounded-lg bg-background-surface-primary border border-border-surface-default shadow-md"></div>
            <div class="text-center max-w-[8rem]">
              <span class="label-12-medium text-content-on-surface-primary block">md</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded break-all" onclick="copyToClipboard('shadow-md', this)">shadow-md</code>
              <span class="label-12-regular text-content-on-surface-muted block mt-1">shadow-md</span>
            </div>
          </div>

          <div class="flex flex-col items-center gap-2">
            <div class="w-28 h-28 rounded-lg bg-background-surface-primary border border-border-surface-default shadow-lg"></div>
            <div class="text-center max-w-[8rem]">
              <span class="label-12-medium text-content-on-surface-primary block">lg</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded break-all" onclick="copyToClipboard('shadow-lg', this)">shadow-lg</code>
              <span class="label-12-regular text-content-on-surface-muted block mt-1">shadow-lg</span>
            </div>
          </div>

          <div class="flex flex-col items-center gap-2">
            <div class="w-28 h-28 rounded-lg bg-background-surface-primary border border-border-surface-default shadow-xl"></div>
            <div class="text-center max-w-[8rem]">
              <span class="label-12-medium text-content-on-surface-primary block">xl</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded break-all" onclick="copyToClipboard('shadow-xl', this)">shadow-xl</code>
              <span class="label-12-regular text-content-on-surface-muted block mt-1">shadow-xl</span>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};
