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

/**
 * Border radius utilities generated from `aa.corner-radius` in `tokens.json`.
 * Use `rounded-xs` … `rounded-4xl` and `rounded-full` instead of raw radius values.
 */
export const RadiusScale: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-secondary min-h-screen">
        <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 max-w-3xl">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Border radius</h2>
          <p class="body-14-regular text-content-on-surface-muted">
            Token-backed radius utilities from <code class="label-12-medium">aa.corner-radius</code>.
            Click a class name to copy.
          </p>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-none"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-none', this)">rounded-none</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-xs"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-xs', this)">rounded-xs</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-sm"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-sm', this)">rounded-sm</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded', this)">rounded</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-md"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-md', this)">rounded-md</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-lg"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-lg', this)">rounded-lg</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-xl"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-xl', this)">rounded-xl</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-2xl"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-2xl', this)">rounded-2xl</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-3xl"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-3xl', this)">rounded-3xl</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-4xl"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-4xl', this)">rounded-4xl</code>
          </div>

          <div class="text-center">
            <div class="mx-auto h-40 w-32 bg-background-accent-soft border border-border-surface-default rounded-full"></div>
            <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-3" onclick="copyToClipboard('rounded-full', this)">rounded-full</code>
          </div>
        </div>
      </div>
    `,
  }),
};
