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

const sample = 'Sovereign AI Solutions for Enterprises and Governments';

/**
 * Global typography tokens `Label 12`, `Label 14`, `Label 16` — utility classes `label-12-*`, `label-14-*`, `label-16-*`.
 * (`regular` tokens also register `*-normal` aliases, e.g. `label-12-normal`.)
 */
export const Labels: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-primary">
        <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">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Labels</h2>
          <p class="body-14-regular text-content-on-surface-muted">From global <code class="label-12-medium">Label 12</code>, <code class="label-12-medium">Label 14</code>, <code class="label-12-medium">Label 16</code>. Click a class name to copy.</p>
        </div>

        <section class="mb-10 gap-y-4">
          <h3 class="label-12-medium text-content-on-surface-muted uppercase tracking-wide">Label 12</h3>
          <div class="gap-y-3 border-b border-border-surface-default pb-6">
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-12-regular', this)">label-12-regular</code>
              <span class="label-12-regular text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-12-medium', this)">label-12-medium</code>
              <span class="label-12-medium text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-12-bold', this)">label-12-bold</code>
              <span class="label-12-bold text-content-on-surface-primary">${sample}</span>
            </div>
          </div>
        </section>

        <section class="mb-10 gap-y-4">
          <h3 class="label-12-medium text-content-on-surface-muted uppercase tracking-wide">Label 14</h3>
          <div class="gap-y-3 border-b border-border-surface-default pb-6">
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-14-regular', this)">label-14-regular</code>
              <span class="label-14-regular text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-14-medium', this)">label-14-medium</code>
              <span class="label-14-medium text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-14-bold', this)">label-14-bold</code>
              <span class="label-14-bold text-content-on-surface-primary">${sample}</span>
            </div>
          </div>
        </section>

        <section class="gap-y-4">
          <h3 class="label-12-medium text-content-on-surface-muted uppercase tracking-wide">Label 16</h3>
          <div class="gap-y-3">
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-16-regular', this)">label-16-regular</code>
              <span class="label-16-regular text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-16-medium', this)">label-16-medium</code>
              <span class="label-16-medium text-content-on-surface-primary">${sample}</span>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('label-16-bold', this)">label-16-bold</code>
              <span class="label-16-bold text-content-on-surface-primary">${sample}</span>
            </div>
          </div>
        </section>
      </div>
    `,
  }),
};

/**
 * Global `Body 14` and `Body 16` — classes `body-14-*`, `body-16-*`.
 */
export const Body: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-primary">
        <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">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Body</h2>
          <p class="body-14-regular text-content-on-surface-muted">From global <code class="label-12-medium">Body 14</code> and <code class="label-12-medium">Body 16</code>.</p>
        </div>

        <div class="gap-y-8">
          <section class="gap-y-3">
            <h3 class="label-12-medium text-content-on-surface-muted uppercase tracking-wide">Body 14</h3>
            <div class="flex flex-wrap items-baseline gap-4 border-b border-border-surface-default pb-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-14-regular', this)">body-14-regular</code>
              <p class="body-14-regular text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
            <div class="flex flex-wrap items-baseline gap-4 border-b border-border-surface-default pb-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-14-medium', this)">body-14-medium</code>
              <p class="body-14-medium text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-14-bold', this)">body-14-bold</code>
              <p class="body-14-bold text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
          </section>

          <section class="gap-y-3">
            <h3 class="label-12-medium text-content-on-surface-muted uppercase tracking-wide">Body 16</h3>
            <div class="flex flex-wrap items-baseline gap-4 border-b border-border-surface-default pb-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-16-regular', this)">body-16-regular</code>
              <p class="body-16-regular text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
            <div class="flex flex-wrap items-baseline gap-4 border-b border-border-surface-default pb-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-16-medium', this)">body-16-medium</code>
              <p class="body-16-medium text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
            <div class="flex flex-wrap items-baseline gap-4">
              <code class="copy-btn label-12-medium text-content-on-surface-muted w-44 shrink-0" onclick="copyToClipboard('body-16-bold', this)">body-16-bold</code>
              <p class="body-16-bold text-content-on-surface-primary max-w-prose">${sample}</p>
            </div>
          </section>
        </div>
      </div>
    `,
  }),
};

/**
 * Scale headings `Heading S` … `Heading 2XL`: one utility per step (`heading-s` … `heading-2xl`).
 * Typography scale values resolve from the corresponding global heading token group;
 * font family resolves from `2-theme/AA Base`.
 */
export const Headings: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-primary">
        <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">Headings</h2>
          <p class="body-14-regular text-content-on-surface-muted mb-2">
            No weight suffix: each step is a single class: <code class="label-12-medium">heading-s</code>, <code class="label-12-medium">heading-m</code>, <code class="label-12-medium">heading-l</code>, <code class="label-12-medium">heading-xl</code>, <code class="label-12-medium">heading-2xl</code> (match <code class="label-12-medium">Heading S</code> … <code class="label-12-medium">Heading 2XL</code>).
          </p>
          <p class="label-12-regular text-content-on-surface-muted">Font size, line height, and weight come from the matching global heading typography token. Font family resolves from <code class="label-12-medium">2-theme/AA Base</code>.</p>
        </div>

        <div class="gap-y-6">
          <div class="flex flex-wrap items-baseline gap-x-4 gap-y-2 border-b border-border-surface-default pb-4">
            <div class="w-52 shrink-0 gap-y-1">
              <code class="copy-btn block label-12-medium text-content-on-surface-muted" onclick="copyToClipboard('heading-s', this)">heading-s</code>
              <span class="label-12-regular text-content-on-surface-muted">Heading S</span>
            </div>
            <span class="heading-s text-content-on-surface-primary min-w-0 flex-1">${sample}</span>
          </div>
          <div class="flex flex-wrap items-baseline gap-x-4 gap-y-2 border-b border-border-surface-default pb-4">
            <div class="w-52 shrink-0 gap-y-1">
              <code class="copy-btn block label-12-medium text-content-on-surface-muted" onclick="copyToClipboard('heading-m', this)">heading-m</code>
              <span class="label-12-regular text-content-on-surface-muted">Heading M</span>
            </div>
            <span class="heading-m text-content-on-surface-primary min-w-0 flex-1">${sample}</span>
          </div>
          <div class="flex flex-wrap items-baseline gap-x-4 gap-y-2 border-b border-border-surface-default pb-4">
            <div class="w-52 shrink-0 gap-y-1">
              <code class="copy-btn block label-12-medium text-content-on-surface-muted" onclick="copyToClipboard('heading-l', this)">heading-l</code>
              <span class="label-12-regular text-content-on-surface-muted">Heading L</span>
            </div>
            <span class="heading-l text-content-on-surface-primary min-w-0 flex-1">${sample}</span>
          </div>
          <div class="flex flex-wrap items-baseline gap-x-4 gap-y-2 border-b border-border-surface-default pb-4">
            <div class="w-52 shrink-0 gap-y-1">
              <code class="copy-btn block label-12-medium text-content-on-surface-muted" onclick="copyToClipboard('heading-xl', this)">heading-xl</code>
              <span class="label-12-regular text-content-on-surface-muted">Heading XL</span>
            </div>
            <span class="heading-xl text-content-on-surface-primary min-w-0 flex-1">${sample}</span>
          </div>
          <div class="flex flex-wrap items-baseline gap-x-4 gap-y-2">
            <div class="w-52 shrink-0 gap-y-1">
              <code class="copy-btn block label-12-medium text-content-on-surface-muted" onclick="copyToClipboard('heading-2xl', this)">heading-2xl</code>
              <span class="label-12-regular text-content-on-surface-muted">Heading 2XL</span>
            </div>
            <span class="heading-2xl text-content-on-surface-primary min-w-0 flex-1">${sample}</span>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Example article using typography utilities only (no raw `text-*` scale).
 */
export const Article: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-background-surface-primary">
        <div class="max-w-2xl mx-auto">
          <article class="text-content-on-surface-primary">
            <header class="mb-8">
              <p class="label-14-medium text-content-on-surface-muted mb-2">Design system</p>
              <h1 class="heading-2xl mb-4">Building consistent UI with design tokens</h1>
              <p class="body-16-regular text-content-on-surface-secondary">A short guide to typography utilities aligned with global token groups.</p>
            </header>
            <div class="gap-y-6">
              <p class="body-14-regular">Design tokens store visual attributes in one place. Prefer named classes such as <code class="label-12-medium">body-14-regular</code> over ad-hoc font sizes.</p>
              <h2 class="heading-m mt-8">Why tokens?</h2>
              <p class="body-14-regular">They keep typography consistent when the underlying font metrics change.</p>
              <ul class="list-disc list-inside gap-y-2 body-14-regular">
                <li>Single source of truth</li>
                <li>Easier theming</li>
              </ul>
              <p class="label-12-regular text-content-on-surface-muted mt-8">Last updated · 2026</p>
            </div>
          </article>
        </div>
      </div>
    `,
  }),
};
