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

const VHoverDemo = defineComponent({
  name: 'VHoverDemo',
  directives: { hover: vHover },
  methods: {
    copyVHover(variant: 'subtle' | 'default' | 'strong', e: MouseEvent) {
      const el = e.currentTarget as HTMLElement;
      const snippet = `v-hover="'${variant}'"`;
      navigator.clipboard
        .writeText(snippet)
        .then(() => {
          el.classList.add('copied');
          setTimeout(() => el.classList.remove('copied'), 1500);
        })
        .catch(() => {
          /* clipboard unavailable (e.g. some test / non-secure contexts) */
        });
    },
  },
  template: `
    <div class="p-8 bg-white dark:bg-background">
      <style>
        .copy-btn { cursor: pointer; transition: all 0.15s; }
        .copy-btn:focus-visible { outline: 2px solid oklch(var(--border-surface-focus-ring)); outline-offset: 2px; }
        .copy-btn:hover { background: rgba(0,0,0,0.05); }
        .copy-btn.copied { background: #22c55e22; }
        .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
      </style>

      <div class="mb-6">
        <h2 class="heading-s text-content-on-surface-primary mb-1">v-hover</h2>
        <p class="body-14-regular text-content-on-surface-muted max-w-2xl">
          Registers as <code class="label-12-medium">v-hover</code> when using
          <code class="label-12-medium">app.directive('hover', vHover)</code> from the library install.
          Injects a single overlay layer; visible on <code class="label-12-medium">:hover</code> when
          <code class="label-12-medium">@media (hover: hover)</code> and on <code class="label-12-medium">:focus-visible</code>.
          Variants map to
          <code class="label-12-medium">--overlay-hover-subtle</code>,
          <code class="label-12-medium">--overlay-hover-default</code>, and
          <code class="label-12-medium">--overlay-hover-strong</code>.
          Hover or Tab+focus each tile to compare intensity.
        </p>
      </div>

      <div class="flex flex-wrap gap-8">
        <div class="flex flex-col items-center gap-2">
          <button
            type="button"
            v-hover="'subtle'"
            class="h-24 w-40 rounded-md bg-background-surface-secondary body-14-medium text-content-on-surface-primary flex items-center justify-center border border-border-surface-default shadow-xs"
          >
            subtle
          </button>
          <div class="text-center">
            <span class="label-12-medium text-content-on-surface-primary block">subtle</span>
            <button
              type="button"
              class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded border-0 bg-transparent"
              @click="copyVHover('subtle', $event)"
            ><code>v-hover="'subtle'"</code></button>
          </div>
        </div>

        <div class="flex flex-col items-center gap-2">
          <button
            type="button"
            v-hover="'default'"
            class="h-24 w-40 rounded-md bg-background-surface-secondary body-14-medium text-content-on-surface-primary flex items-center justify-center border border-border-surface-default shadow-xs"
          >
            default
          </button>
          <div class="text-center">
            <span class="label-12-medium text-content-on-surface-primary block">default</span>
            <button
              type="button"
              class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded border-0 bg-transparent"
              @click="copyVHover('default', $event)"
            ><code>v-hover="'default'"</code></button>
          </div>
        </div>

        <div class="flex flex-col items-center gap-2">
          <button
            type="button"
            v-hover="'strong'"
            class="h-24 w-40 rounded-md bg-background-surface-secondary body-14-medium text-content-on-surface-primary flex items-center justify-center border border-border-surface-default shadow-xs"
          >
            strong
          </button>
          <div class="text-center">
            <span class="label-12-medium text-content-on-surface-primary block">strong</span>
            <button
              type="button"
              class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded border-0 bg-transparent"
              @click="copyVHover('strong', $event)"
            ><code>v-hover="'strong'"</code></button>
          </div>
        </div>
      </div>
    </div>
  `,
});

const meta: Meta<typeof VHoverDemo> = {
  title: 'Directives/v-hover',
  component: VHoverDemo,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'Overlay hover directive: `false` disables; string `subtle` | `default` | `strong` or `{ variant }`. Used by Button and Badge.',
      },
    },
  },
};

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

/**
 * Three overlay intensities on the same button fill so you can compare subtle, default, and strong.
 */
export const Variants: Story = {
  render: () => ({
    components: { VHoverDemo },
    template: '<VHoverDemo />',
  }),
};
