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

/**
 * Surface backgrounds for main application areas like pages, cards, and panels.
 * Primary is the main app background, secondary for elevated surfaces, muted for de-emphasized areas.
 */
export const Surface: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">Surface Backgrounds</h2>
          <p class="body-14-regular text-content-on-surface-muted">Reference for surface-layer tokens used across app layouts, overlays, and dialogs.</p>
        </div>

        <div class="mb-8">
          <h3 class="body-14-bold text-content-on-surface-primary mb-1">Background Surfaces</h3>
          <p class="label-12-regular text-content-on-surface-muted mb-3">Base and sheet-level surfaces for pages, panels, and subtle inner containers. Token group: <code class="label-12-medium">background.surface</code></p>
          <div class="flex flex-wrap gap-6">
            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-primary border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">primary</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-primary', this)">bg-background-surface-primary</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">secondary</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-secondary', this)">bg-background-surface-secondary</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-muted border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">muted</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-muted', this)">bg-background-surface-muted</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-selected border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">selected</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-selected', this)">bg-background-surface-selected</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-inverse border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">inverse</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-inverse', this)">bg-background-surface-inverse</code>
              </div>
            </div>

          </div>
        </div>

        <div>
          <h3 class="body-14-bold text-content-on-surface-primary mb-1">Overlay Surfaces</h3>
          <p class="label-12-regular text-content-on-surface-muted mb-3">Backdrop layers for transparent overlays and modal dimming. Token group: <code class="label-12-medium">overlay.surface</code></p>
          <div class="flex flex-wrap gap-6">
            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-overlay-surface-transparent border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">transparent</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-transparent', this)">bg-overlay-surface-transparent</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-overlay-surface-modal-overlay border border-border-surface-default"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">modal overlay</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-modal-overlay', this)">bg-overlay-surface-modal-overlay</code>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-8">
          <h3 class="body-14-bold text-content-on-surface-primary mb-1">Floating Surfaces</h3>
          <p class="label-12-regular text-content-on-surface-muted mb-3">Top-layer containers for floating UI (menus, popovers) and modal/dialog surfaces.</p>
          <div class="flex flex-wrap gap-6">
            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-modal border border-border-surface-default shadow-lg"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">modal</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-modal', this)">bg-background-surface-modal</code>
              </div>
            </div>

            <div class="flex flex-col items-center gap-1.5">
              <div class="w-16 h-16 rounded-md bg-background-surface-floating border border-border-surface-default shadow-xs"></div>
              <div class="text-center">
                <span class="label-12-medium text-content-on-surface-primary block">floating</span>
                <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-floating', this)">bg-background-surface-floating</code>
              </div>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Button background colors for different button types.
 * Use primary for main actions, secondary for less prominent actions, danger for destructive actions.
 */
export const Button: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">button</h2>
          <p class="body-14-regular text-content-on-surface-muted">Background colors for buttons. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-wrap gap-6">
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-button-primary-button border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">primary-button</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-primary-button', this)">bg-background-button-primary-button</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-button-secondary-button border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">secondary-button</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-secondary-button', this)">bg-background-button-secondary-button</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-button-danger-button border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">danger-button</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-danger-button', this)">bg-background-button-danger-button</code>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Input field background color for form elements like text inputs, selects, and textareas.
 */
export const Input: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">input</h2>
          <p class="body-14-regular text-content-on-surface-muted">Background colors for input fields. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-wrap gap-6">
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-input-default border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">default</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-input-default', this)">bg-background-input-default</code>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Accent backgrounds for highlighting selected items, focus states, or branded elements.
 * Default is more prominent, soft is subtle for less emphasis.
 */
export const Accent: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">accent</h2>
          <p class="body-14-regular text-content-on-surface-muted">Background colors for accents and highlights. Click class name to copy.</p>
        </div>
        
        <div class="flex flex-wrap gap-6">
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-accent-default border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">default</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-default', this)">bg-background-accent-default</code>
            </div>
          </div>
          
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-accent-soft border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">soft</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-soft', this)">bg-background-accent-soft</code>
            </div>
          </div>

          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-accent-pink border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">pink</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-pink', this)">bg-background-accent-pink</code>
            </div>
          </div>

          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-accent-yellow border border-border-surface-default"></div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">yellow</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-yellow', this)">bg-background-accent-yellow</code>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};

/**
 * Semantic status backgrounds for badges, alerts, and validation highlights.
 * Pair with `text-content-on-status-*` utilities for accessible contrast.
 */
export const Status: Story = {
  render: () => ({
    template: `
      <div class="p-8 bg-white dark:bg-background">
        <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-6">
          <h2 class="heading-s text-content-on-surface-primary mb-1">status</h2>
          <p class="body-14-regular text-content-on-surface-muted">Background colors for success, warning, and error emphasis. Token group: <code class="label-12-medium">background.status</code>. Click class name to copy.</p>
        </div>

        <div class="flex flex-wrap gap-6">
          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-status-success border border-border-surface-default flex items-center justify-center">
              <span class="text-content-on-status-success label-12-medium">Aa</span>
            </div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">success</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-status-success', this)">bg-background-status-success</code>
            </div>
          </div>

          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-status-warning border border-border-surface-default flex items-center justify-center">
              <span class="text-content-on-status-warning label-12-medium">Aa</span>
            </div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">warning</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-status-warning', this)">bg-background-status-warning</code>
            </div>
          </div>

          <div class="flex flex-col items-center gap-1.5">
            <div class="w-16 h-16 rounded-md bg-background-status-error border border-border-surface-default flex items-center justify-center">
              <span class="text-content-on-status-error label-12-medium">Aa</span>
            </div>
            <div class="text-center">
              <span class="label-12-medium text-content-on-surface-primary block">error</span>
              <code class="copy-btn label-12-regular text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-status-error', this)">bg-background-status-error</code>
            </div>
          </div>
        </div>
      </div>
    `,
  }),
};
