import type { Meta, StoryObj } from '@storybook/vue3-vite'

import { copyableClass, copyableCopiedClass, readTokens, tokenTableClass, useCopier } from '@/stories/tokenUtils'

const meta: Meta = {
  title: 'Foundations/Focus Rings',
  tags: ['!dev'],
  parameters: {
    layout: 'padded',
    controls: { disable: true },
    docs: { source: { code: null } },
  },
}

export default meta

type Story = StoryObj

const previewStyle = (tokenName: string): string =>
  `display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 8px; background: #ffffff; border: 1px solid #e9eaf6; color: #36384d; font-size: 14px; box-shadow: var(${tokenName});`

/**
 * Composite focus-ring tokens (one token per color role). Each token is a
 * multi-layered `box-shadow` that produces a consistent, accessible focus
 * outline when applied to an element.
 */
export const Composite: Story = {
  render: () => ({
    setup() {
      const composites = readTokens([/^--cp-shadow-focus-ring-[^-]+$/])
      const { copiedKey, copy } = useCopier()
      return {
        composites,
        copiedKey,
        copy,
        tableClass: tokenTableClass,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
        preview: (tokenName: string) => previewStyle(tokenName),
      }
    },
    template: `
      <table v-if="composites.length > 0" :class="tableClass">
        <thead>
          <tr>
            <th scope="col">Token</th>
            <th scope="col">Value</th>
            <th scope="col">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="token in composites" :key="token.name">
            <td>
              <span
                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
                role="button"
                tabindex="0"
                :title="'Click to copy ' + token.name"
                @click="copy(token.name)"
                @keydown.enter.prevent="copy(token.name)"
                @keydown.space.prevent="copy(token.name)"
              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
            </td>
            <td>{{ token.value }}</td>
            <td class="cp-token-table__preview">
              <span :style="preview(token.name)">Focused</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
    `,
  }),
}