import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiButton from './UiButton.vue';
import { UiIcon } from '../UiIcon';

const ChevronLeftIcon = {
  components: { UiIcon },
  template: '<UiIcon name="chevron-left" :size="16" />',
};

const ChevronRightIcon = {
  components: { UiIcon },
  template: '<UiIcon name="chevron-right" :size="16" />',
};

const MailIcon = {
  components: { UiIcon },
  template: '<UiIcon name="mail" :size="16" />',
};

const designStoryLink = '/?path=/docs/components-uibutton--design-notes';
const accessibilityStoryLink =
  '/?path=/docs/components-uibutton--accessibility';

/**
 * Buttons are used to initiate actions within an application. Their labels clearly describe the action they trigger.
 */
const meta: Meta<typeof UiButton> = {
  title: 'Components/UiButton',
  component: UiButton,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'default',
        'destructive',
        'outline',
        'secondary',
        'ghost',
        'link',
      ],
      description: 'The visual style of the button',
    },
    size: {
      control: 'select',
      options: [
        'default',
        'sm',
        'lg',
        'icon',
        'icon-xs',
        'icon-sm',
        'icon-lg',
        'icon-sm-no-padding',
      ],
      description:
        'The size of the button. Sizes prefixed with `icon-` switch the button into icon-only mode.',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the button',
    },
    loading: {
      control: 'boolean',
      description: 'Shows a loading state and prevents interaction',
    },
    startIcon: {
      control: false,
      description: 'Icon component to display before the button text',
    },
    endIcon: {
      control: false,
      description: 'Icon component to display after the button text',
    },
  },
  args: {
    variant: 'default',
    size: 'default',
    disabled: false,
    loading: false,
  },
  parameters: {
    docs: {
      links: [
        {
          label: 'Designer docs',
          href: designStoryLink,
          icon: 'palette',
        },
        {
          label: 'Accessibility',
          href: accessibilityStoryLink,
          icon: 'accessibility',
        },
      ],
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiButton>;

const defaultTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton>Default</UiButton>
</template>`;

/**
 * Default button variant.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiButton },
    setup() {
      return { args };
    },
    template: `<UiButton :variant="args.variant" :size="args.size" :disabled="args.disabled" :loading="args.loading">Default</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

/**
 * Design guidance for choosing button variants by action priority.
 */
export const DesignNotes: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <section class="flex flex-col gap-8 p-4 bg-surface-secondary">
        <div>
          <h2 class="heading-m font-bold text-content-on-surface-primary">Usage</h2>
          <p class="body-16-regular mt-2 text-content-on-surface-primary">
            To help users clearly understand primary, secondary, and other types of
            buttons, make sure to consider the action. Use the guidelines below to
            determine the correct button to use.
          </p>
        </div>

        <div class="grid gap-x-12 gap-y-6 md:grid-cols-[160px_1fr]">
          <div>
            <UiButton>Primary</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            Reserved for the main call to action on a page. Only one primary button
            should be used per screen (excluding application headers, modal dialogs,
            or side panels).
          </p>

          <div>
            <UiButton variant="secondary">Secondary</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            Use for less prominent but still important actions.
          </p>

          <div>
            <UiButton variant="outline">Outlined</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            For less prominent or independent actions. These buttons can be used
            alone or paired with a primary button when multiple actions are present.
            They are also suitable for subtasks where the primary button performs
            the main action.
          </p>

          <div>
            <UiButton variant="ghost">Ghost</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            For subtle actions with little emphasis, or for use with a primary
            button in a button row (for example, dialogs: "Cancel" next to a primary
            "Submit").
          </p>

          <div>
            <UiButton variant="destructive">Destructive</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            For critical actions, like deleting or removing.
          </p>

          <div>
            <UiButton variant="link">Link</UiButton>
          </div>
          <p class="label-16-regular text-content-on-surface-primary">
            For when a link is required.
          </p>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

/**
 * Accessibility guidance for button labels, icon-only buttons, and contrast.
 */
export const Accessibility: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <section class="flex flex-col gap-6 p-4">
        <div>
          <h2 class="heading-m font-bold text-content-on-surface-primary">
            Accessibility
          </h2>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-2">
            <h3 class="body-16-medium text-content-on-surface-primary">
              Make sure button labels are unique and descriptive
            </h3>
            <p class="body-16-regular text-content-on-surface-primary">
              Labels like "Click Here" and "Read More" don't provide context. In
              addition, some screen reader users also navigate through a list of all
              the buttons on a page or screen. Therefore, all button labels should
              provide an indication of what will happen if activated.
            </p>
          </div>

          <div class="flex flex-col gap-2">
            <h3 class="body-16-medium text-content-on-surface-primary">
              Icon-only buttons should be used carefully and only after checking for accessibility
            </h3>
            <p class="body-16-regular text-content-on-surface-primary">
              The meaning of the icon must be visually self-evident (easily and
              universally understood). In addition, a programmatically associated
              semantic label (such as an aria-label attribute) should be added so it
              can be read by screen readers. If you're in any doubt that an
              icon-only button will be understood, use accompanying text in your
              button label.
              <br />
              WCAG 2.2:
              <a
                href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html"
                target="_blank"
                rel="noopener noreferrer"
                class="text-content-link-default underline"
              >
                1.3.1 Info and Relationships
              </a>
            </p>
          </div>

          <div class="flex flex-col gap-2">
            <h3 class="body-16-medium text-content-on-surface-primary">
              Enable accessibility theme
            </h3>
            <p class="body-16-regular text-content-on-surface-primary">
              When accessibility is required, enable our accessibility theme. This
              increases contrast and makes sure there are no color contrast issues.
            </p>
          </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
          <div class="flex flex-col gap-3">
            <h3 class="label-16-medium text-center text-content-on-surface-primary">
              Default
            </h3>
            <div class="flex min-h-20 items-center justify-center border border-border-surface-default p-6">
              <UiButton>Submit</UiButton>
            </div>
          </div>

          <div class="accessible-theme flex flex-col gap-3">
            <h3 class="label-16-medium text-center text-content-on-surface-primary">
              Accessible
            </h3>
            <div class="flex min-h-20 items-center justify-center border border-border-surface-default p-6">
              <UiButton>Submit</UiButton>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

const outlineTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton variant="outline">Outline</UiButton>
</template>`;

/**
 * Outline button variant.
 */
export const Outline: Story = {
  render: () => ({
    components: { UiButton },
    template: `<UiButton variant="outline">Outline</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: outlineTemplateSource,
      },
    },
  },
};

const secondaryTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton variant="secondary">Secondary</UiButton>
</template>`;

/**
 * Secondary button variant.
 */
export const Secondary: Story = {
  render: () => ({
    components: { UiButton },
    template: `<UiButton variant="secondary">Secondary</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: secondaryTemplateSource,
      },
    },
  },
};

const ghostTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton variant="ghost">Ghost</UiButton>
</template>`;

/**
 * Ghost button variant.
 */
export const Ghost: Story = {
  render: () => ({
    components: { UiButton },
    template: `<UiButton variant="ghost">Ghost</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: ghostTemplateSource,
      },
    },
  },
};

const destructiveTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton variant="destructive">Destructive</UiButton>
</template>`;

/**
 * Destructive button variant.
 */
export const Destructive: Story = {
  render: () => ({
    components: { UiButton },
    template: `<UiButton variant="destructive">Destructive</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: destructiveTemplateSource,
      },
    },
  },
};

const linkTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton variant="link">Link</UiButton>
</template>`;

/**
 * Link button variant.
 */
export const Link: Story = {
  render: () => ({
    components: { UiButton },
    template: `<UiButton variant="link">Link</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: linkTemplateSource,
      },
    },
  },
};

const sizesTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="grid gap-4 md:grid-cols-3">
    <UiButton size="sm">Primary</UiButton>
    <UiButton>Primary</UiButton>
    <UiButton size="lg">Primary</UiButton>
  </div>
</template>`;

/**
 * Button size guidance.
 */
export const Sizes: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <section class="flex flex-col gap-6 rounded-lg bg-background-surface-primary p-4">
        <div>
          <h2 class="heading-s text-content-on-surface-primary">Sizes</h2>
          <p class="body-14-regular mt-2 text-content-on-surface-primary">
            Buttons come in three sizes: small, default and large. Buttons should match in size.
          </p>
        </div>

        <div class="grid gap-4 md:grid-cols-3">
          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Small</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton size="sm">Primary</UiButton>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Default</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton>Primary</UiButton>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Large</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton size="lg">Primary</UiButton>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: sizesTemplateSource,
      },
    },
  },
};

const iconUsageTemplateSource = `<script setup lang="ts">
import { UiButton, UiIcon } from '@aleph-alpha/ui-library'

const ChevronLeftIcon = {
  components: { UiIcon },
  template: '<UiIcon name="chevron-left" :size="16" />',
}

const ChevronRightIcon = {
  components: { UiIcon },
  template: '<UiIcon name="chevron-right" :size="16" />',
}
</script>

<template>
  <div class="grid gap-4 md:grid-cols-3">
    <UiButton :end-icon="ChevronRightIcon">Primary</UiButton>
    <UiButton :start-icon="ChevronLeftIcon">Primary</UiButton>
    <UiButton size="icon-sm" aria-label="Go back">
      <UiIcon name="chevron-left" :size="16" />
    </UiButton>
  </div>
</template>`;

/**
 * Guidance for placing icons in buttons.
 */
export const IconUsage: Story = {
  render: () => ({
    components: { UiButton, UiIcon },
    setup() {
      return { ChevronLeftIcon, ChevronRightIcon };
    },
    template: `
      <section class="flex flex-col gap-6 rounded-lg bg-background-surface-primary p-4">
        <div>
          <h2 class="heading-s text-content-on-surface-primary">Icon usage</h2>
          <p class="body-14-regular mt-2 text-content-on-surface-primary">
            There are three options for placing icons within buttons. Use only one icon per button.
          </p>
          <p class="body-14-regular mt-6 text-content-on-surface-primary">
            Icon-only buttons can only be used when the user's action is very clear and doesn't need
            explanatory text. Examples include down and next arrows.
          </p>
        </div>

        <div class="grid gap-4 md:grid-cols-3">
          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Icon right</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton :end-icon="ChevronRightIcon">Primary</UiButton>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Icon left</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton :start-icon="ChevronLeftIcon">Primary</UiButton>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="label-14-medium text-center text-content-on-surface-primary">Icon only</h3>
            <div class="flex min-h-20 items-center justify-center rounded-sm bg-background-surface-muted-subtle p-6">
              <UiButton size="icon-sm" aria-label="Go back">
                <UiIcon name="chevron-left" :size="16" />
              </UiButton>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: iconUsageTemplateSource,
      },
    },
  },
};

const loadingTemplateSource = `<script setup lang="ts">
import { UiButton, UiIcon } from '@aleph-alpha/ui-library'

const MailIcon = {
  components: { UiIcon },
  template: '<UiIcon name="mail" :size="16" />',
}
</script>

<template>
  <UiButton :loading="true" :start-icon="MailIcon">Please wait</UiButton>
</template>`;

/**
 * When loading is true, the spinner replaces the startIcon automatically.
 */
export const Loading: Story = {
  render: () => ({
    components: { UiButton },
    setup() {
      return { MailIcon };
    },
    template: `<UiButton :loading="true" :start-icon="MailIcon">Please wait</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: loadingTemplateSource,
      },
    },
  },
};

const loadingWithBothIconsTemplateSource = `<script setup lang="ts">
import { UiButton, UiIcon } from '@aleph-alpha/ui-library'

const MailIcon = {
  components: { UiIcon },
  template: '<UiIcon name="mail" :size="16" />',
}

const ChevronRightIcon = {
  components: { UiIcon },
  template: '<UiIcon name="chevron-right" :size="16" />',
}
</script>

<template>
  <UiButton :loading="true" :start-icon="MailIcon" :end-icon="ChevronRightIcon">
    Saving changes
  </UiButton>
</template>`;

/**
 * When a button has both start and end icons, the loading spinner replaces
 * the startIcon while the endIcon stays visible.
 */
export const LoadingWithBothIcons: Story = {
  render: () => ({
    components: { UiButton },
    setup() {
      return { MailIcon, ChevronRightIcon };
    },
    template: `<UiButton :loading="true" :start-icon="MailIcon" :end-icon="ChevronRightIcon">Saving changes</UiButton>`,
  }),
  parameters: {
    docs: {
      source: {
        code: loadingWithBothIconsTemplateSource,
      },
    },
  },
};

const asChildTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiButton as-child>
    <a href="/login">Login</a>
  </UiButton>
</template>`;

/**
 * Use `as-child` to make another component look like a button.
 */
export const AsChild: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <UiButton as-child>
        <a href="/login">Login</a>
      </UiButton>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: asChildTemplateSource,
      },
    },
  },
};

const allVariantsTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <UiButton>Default</UiButton>
    <UiButton variant="secondary">Secondary</UiButton>
    <UiButton variant="destructive">Destructive</UiButton>
    <UiButton variant="outline">Outline</UiButton>
    <UiButton variant="ghost">Ghost</UiButton>
    <UiButton variant="link">Link</UiButton>
  </div>
</template>`;

/**
 * All button variants side by side.
 */
export const AllVariants: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <div class="flex flex-wrap gap-2">
        <UiButton>Default</UiButton>
        <UiButton variant="secondary">Secondary</UiButton>
        <UiButton variant="destructive">Destructive</UiButton>
        <UiButton variant="outline">Outline</UiButton>
        <UiButton variant="ghost">Ghost</UiButton>
        <UiButton variant="link">Link</UiButton>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: allVariantsTemplateSource,
      },
    },
  },
};

const disabledHoverBleedTemplateSource = `<script setup lang="ts">
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-col gap-6">
    <p class="body-14-regular text-muted-foreground max-w-xl">
      Hover or move quickly over the disabled buttons. Any hover layer should
      stay within the visual button bounds.
    </p>
    <div class="w-96 border border-dashed border-border-surface-default p-6">
      <UiButton disabled>Disabled default</UiButton>
    </div>
    <div class="w-96 border border-dashed border-border-surface-default p-6">
      <UiButton variant="secondary" disabled>Disabled secondary</UiButton>
    </div>
    <div class="w-96 border border-dashed border-border-surface-default p-6">
      <UiButton variant="destructive" disabled>Disabled destructive</UiButton>
    </div>
  </div>
</template>`;

/**
 * Reproduction story for disabled-button hover layers bleeding outside the
 * visual button bounds.
 */
export const DisabledHoverBleed: Story = {
  render: () => ({
    components: { UiButton },
    template: `
      <div class="flex flex-col gap-6">
        <p class="body-14-regular text-muted-foreground max-w-xl">
          Hover or move quickly over the disabled buttons. Any hover layer should
          stay within the visual button bounds.
        </p>
        <div class="w-96 border border-dashed border-border-surface-default p-6">
          <UiButton disabled>Disabled default</UiButton>
        </div>
        <div class="w-96 border border-dashed border-border-surface-default p-6">
          <UiButton variant="secondary" disabled>Disabled secondary</UiButton>
        </div>
        <div class="w-96 border border-dashed border-border-surface-default p-6">
          <UiButton variant="destructive" disabled>Disabled destructive</UiButton>
        </div>
      </div>
    `,
  }),
  parameters: {
    docs: {
      description: {
        story:
          'Use this story to reproduce hover-layer bleed on disabled buttons. The dashed containers make any misplaced absolute hover layer visible.',
      },
      source: {
        code: disabledHoverBleedTemplateSource,
      },
    },
  },
};

type MatrixVariant =
  | 'default'
  | 'secondary'
  | 'destructive'
  | 'outline'
  | 'ghost'
  | 'link';

const VARIANTS: readonly MatrixVariant[] = [
  'default',
  'secondary',
  'destructive',
  'outline',
  'ghost',
  'link',
] as const;

const SIZE_ROWS = [
  { size: 'sm', isIcon: false, label: 'Small' },
  { size: 'default', isIcon: false, label: 'Default' },
  { size: 'lg', isIcon: false, label: 'Large' },
  { size: 'icon-sm-no-padding', isIcon: true, label: '' },
  { size: 'icon-xs', isIcon: true, label: '' },
  { size: 'icon-sm', isIcon: true, label: '' },
  { size: 'icon', isIcon: true, label: '' },
  { size: 'icon-lg', isIcon: true, label: '' },
] as const;

/**
 * Per-variant size availability for the matrix story:
 * - text sizes (`sm` / `default` / `lg`) are valid for every variant
 * - `link` doesn't render any icon size
 * - `destructive` only renders the base `icon` size
 * - `icon-xs` and `icon-sm-no-padding` are reserved for `ghost`
 * - everyone else gets `icon-sm`, `icon`, `icon-lg`
 * @param variant
 * @param size
 */
function isSizeAllowed(variant: MatrixVariant, size: string): boolean {
  if (!size.startsWith('icon')) return true;
  if (variant === 'link') return false;
  if (variant === 'destructive') return size === 'icon';
  if (variant === 'ghost') return true;
  return size === 'icon-sm' || size === 'icon' || size === 'icon-lg';
}

/**
 * Visual matrix of every variant × size × state for regression-style review.
 */
export const AllVariantsAndSizes: Story = {
  render: () => ({
    components: { UiButton, UiIcon },
    setup() {
      const rowsFor = (variant: MatrixVariant) =>
        SIZE_ROWS.filter((r) => isSizeAllowed(variant, r.size));
      return { variants: VARIANTS, rowsFor };
    },
    template: `
      <div class="mx-auto flex w-fit flex-col items-center gap-10">
        <section v-for="variant in variants" :key="variant" class="flex w-full flex-col items-center gap-3">
          <h3 class="body-14-medium capitalize">{{ variant }}</h3>
          <table class="w-full table-fixed border-collapse border border-border-surface-default">
            <colgroup>
              <col class="w-48" />
              <col class="w-40" />
              <col class="w-40" />
              <col class="w-40" />
            </colgroup>
            <thead>
              <tr>
                <th class="label-12-medium text-muted-foreground border border-border-surface-default px-3 py-2 text-center">Size</th>
                <th class="label-12-medium text-muted-foreground border border-border-surface-default px-3 py-2 text-center">Default</th>
                <th class="label-12-medium text-muted-foreground border border-border-surface-default px-3 py-2 text-center">Loading</th>
                <th class="label-12-medium text-muted-foreground border border-border-surface-default px-3 py-2 text-center">Disabled</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in rowsFor(variant)" :key="row.size" class="align-middle">
                <td class="label-12-medium text-muted-foreground border border-border-surface-default px-3 py-2 text-center whitespace-nowrap">{{ row.size }}</td>
                <td class="border border-border-surface-default px-3 py-2 text-center">
                  <UiButton :variant="variant" :size="row.size" aria-label="Close">
                    <template v-if="row.isIcon"><UiIcon name="x" /></template>
                    <template v-else>{{ row.label }}</template>
                  </UiButton>
                </td>
                <td class="border border-border-surface-default px-3 py-2 text-center">
                  <UiButton :variant="variant" :size="row.size" :loading="true" aria-label="Loading">
                    <template v-if="row.isIcon"><UiIcon name="x" /></template>
                    <template v-else>{{ row.label }}</template>
                  </UiButton>
                </td>
                <td class="border border-border-surface-default px-3 py-2 text-center">
                  <UiButton :variant="variant" :size="row.size" :disabled="true" aria-label="Disabled">
                    <template v-if="row.isIcon"><UiIcon name="x" /></template>
                    <template v-else>{{ row.label }}</template>
                  </UiButton>
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    `,
  }),
  parameters: {
    docs: {
      description: {
        story:
          'A full matrix of every `UiButton` variant (one table each) with rows = `size` and columns = state (`default` / `loading` / `disabled`). ' +
          'Use this story for visual regression review whenever the button styles change.',
      },
    },
  },
};
