import type { Meta, StoryObj } from '@storybook/vue3-vite';
import {
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldError,
  UiFieldGroup,
  UiFieldLabel,
  UiFieldLegend,
  UiFieldSeparator,
  UiFieldSet,
  UiFieldTitle,
} from '.';
import { UiCheckbox } from '../UiCheckbox';
import { UiChip } from '../UiChip';
import { UiIcon } from '../UiIcon';
import { UiInput } from '../UiInput';
import { UiKbd } from '../UiKbd';
import { UiRadioGroup, UiRadioGroupItem } from '../UiRadioGroup';
import {
  UiSelect,
  UiSelectContent,
  UiSelectItem,
  UiSelectTrigger,
  UiSelectValue,
} from '../UiSelect';
import { UiSwitch } from '../UiSwitch';
import { UiTextarea } from '../UiTextarea';
import { UiButton } from '../UiButton';
import { ref } from 'vue';

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

/**
 * Field composes label, description, and error messaging into a consistent form-field layout. Use it to keep spacing, typography, and validation feedback consistent across inputs.
 */
const meta: Meta<typeof UiField> = {
  title: 'Components/UiField',
  component: UiField,
  tags: ['autodocs'],
  argTypes: {
    orientation: {
      control: 'select',
      options: ['vertical', 'responsive'],
      description:
        'Layout orientation of the field. Use `responsive` to switch layout based on viewport size.',
    },
    descriptionPlacement: {
      control: 'select',
      options: ['under-label', 'under-input'],
      description:
        'Where the description is placed relative to the field layout.',
    },
    descriptionCheckbox: {
      control: 'boolean',
      description:
        'When true, the child UiFieldDescription renders with a checkbox.',
    },
  },
  args: {
    orientation: 'vertical',
    descriptionPlacement: 'under-input',
    descriptionCheckbox: false,
  },
  parameters: {
    docs: {
      links: [
        {
          label: 'Designer docs',
          href: designStoryLink,
          icon: 'palette',
        },
        {
          label: 'Accessibility',
          href: accessibilityStoryLink,
          icon: 'accessibility',
        },
      ],
    },
  },
};

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

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiFieldError,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
const errors = ref<string[]>([])
</script>

<template>
  <UiField>
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
      <UiFieldDescription>We'll never share your email.</UiFieldDescription>
      <UiFieldError :errors="errors" />
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Basic field composition (label + input + description + error slot).
 * Use this as the default pattern for a single input with optional helper text and validation.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldError,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      const errors = ref<string[]>([]);
      return { args, value, errors };
    },
    template: `
      <UiField
        :orientation="args.orientation"
        :description-placement="args.descriptionPlacement"
        :description-checkbox="args.descriptionCheckbox"
      >
        <UiFieldLabel for="email">Email</UiFieldLabel>
        <UiFieldDescription>We'll never share your email.</UiFieldDescription>
        <UiFieldContent>
          <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
          <UiFieldError :errors="errors" />
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    docs: { source: { code: defaultTemplateSource } },
  },
};

/**
 * Design guidance for structuring form fields, help text, and validation feedback.
 */
export const DesignNotes: Story = {
  render: () => ({
    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>
          <div class="body-16-regular mt-2 flex flex-col gap-4 text-content-on-surface-primary">
            <p>
              The Field component establishes a consistent structure for collecting information from users.
              It creates a predictable relationship between inputs, labels, help text, and validation messages,
              making forms easier to scan, understand, and complete.
            </p>
            <p>
              The component should be used whenever a user is expected to provide, select, or modify information.
            </p>
          </div>
        </div>

        <div class="grid gap-8 md:grid-cols-1">
          <div class="flex flex-col gap-3">
            <h3 class="body-16-medium text-content-on-surface-primary">Clarity first</h3>
            <p class="body-16-regular text-content-on-surface-primary">
              Users should immediately understand:
            </p>
            <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
              <li>What information is being requested</li>
              <li>Whether the field is required or optional</li>
              <li>How to successfully complete the field</li>
              <li>What needs to be corrected when errors occur</li>
            </ul>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="body-16-medium text-content-on-surface-primary">Progressive guidance</h3>
            <p class="body-16-regular text-content-on-surface-primary">
              Provide information only when it helps the user complete a task:
            </p>
            <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
              <li>Label explains what is needed</li>
              <li>Description provides additional guidance</li>
              <li>Error message appears only when required</li>
            </ul>
          </div>

          <div class="flex flex-col gap-3">
            <h3 class="body-16-medium text-content-on-surface-primary">Consistency</h3>
            <p class="body-16-regular text-content-on-surface-primary">
              All form controls should follow the same structure regardless of input type:
            </p>
            <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
              <li>Text Input</li>
              <li>Select</li>
              <li>Checkbox</li>
              <li>Switch</li>
              <li>Radio Group</li>
              <li>Text Area</li>
              <li>Slider</li>
            </ul>
          </div>
        </div>

        <div class="flex flex-col gap-4">
          <h2 class="heading-m font-bold text-content-on-surface-primary">Do's and Don'ts</h2>
          <div class="grid gap-8 md:grid-cols-2">
            <div class="flex flex-col gap-3">
              <h3 class="body-16-medium text-content-on-surface-primary">Do</h3>
              <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
                <li>Use a clear label for every field</li>
                <li>Provide helpful descriptions when needed</li>
                <li>Group related information together</li>
                <li>Write actionable error messages</li>
                <li>Use vertical layouts for complex forms</li>
              </ul>
            </div>

            <div class="flex flex-col gap-3">
              <h3 class="body-16-medium text-content-on-surface-primary">Don't</h3>
              <ul class="body-16-regular list-disc space-y-2 pl-5 text-content-on-surface-primary">
                <li>Use placeholders as labels</li>
                <li>Display errors before interaction</li>
                <li>Overload fields with excessive guidance</li>
                <li>Create inconsistent field layouts across screens</li>
                <li>Depend solely on color to indicate validation states</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

/**
 * Accessibility guidance for field labels, errors, descriptions, groups, and contrast.
 */
export const Accessibility: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiInput,
      UiKbd,
    },
    setup() {
      const defaultValue = ref('');
      const accessibleValue = ref('');
      const defaultDescriptionChecked = ref(true);
      const accessibleDescriptionChecked = ref(true);
      return {
        defaultValue,
        accessibleValue,
        defaultDescriptionChecked,
        accessibleDescriptionChecked,
      };
    },
    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">
              Requirements
            </h3>
            <ul class="body-16-regular list-disc pl-5 text-content-on-surface-primary">
              <li>Every field has a visible label</li>
              <li>Error states are communicated through more than color alone</li>
              <li>Descriptions remain readable and associated with the field</li>
              <li>Form sections use meaningful group labels</li>
            </ul>
          </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 ensures 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-28 items-center justify-center border border-border-surface-default p-6">
              <UiField class="w-full max-w-72">
                <UiFieldLabel for="field-accessibility-default" tooltip="Helpful context for this field.">
                  Label
                </UiFieldLabel>
                <UiFieldContent>
                  <UiInput
                    id="field-accessibility-default"
                    v-model="defaultValue"
                    name="field-accessibility-default"
                    placeholder="Placeholder"
                  >
                    <template #end>
                      <UiKbd size="lg">⌘F</UiKbd>
                    </template>
                  </UiInput>
                  <UiFieldDescription
                    id="field-accessibility-default-description"
                    v-model="defaultDescriptionChecked"
                    variant="input"
                    name="field-accessibility-default-description"
                  >
                    This is an input description.
                  </UiFieldDescription>
                </UiFieldContent>
              </UiField>
            </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-28 items-center justify-center border border-border-surface-default p-6">
              <UiField class="w-full max-w-72">
                <UiFieldLabel for="field-accessibility-accessible" tooltip="Helpful context for this field.">
                  Label
                </UiFieldLabel>
                <UiFieldContent>
                  <UiInput
                    id="field-accessibility-accessible"
                    v-model="accessibleValue"
                    name="field-accessibility-accessible"
                    placeholder="Placeholder"
                  >
                    <template #end>
                      <UiKbd size="lg">⌘F</UiKbd>
                    </template>
                  </UiInput>
                  <UiFieldDescription
                    id="field-accessibility-accessible-description"
                    v-model="accessibleDescriptionChecked"
                    variant="input"
                    name="field-accessibility-accessible-description"
                  >
                    This is an input description.
                  </UiFieldDescription>
                </UiFieldContent>
              </UiField>
            </div>
          </div>
        </div>
      </section>
    `,
  }),
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
    docs: {
      canvas: {
        sourceState: 'none',
      },
    },
  },
};

const descriptionWithCheckboxTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
const subscribe = ref(false)
</script>

<template>
  <UiField>
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
      <UiFieldDescription variant="input" v-model="subscribe" name="newsletter">
        Subscribe to our newsletter
      </UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Description with an inline checkbox (`variant="input"`).
 * Useful for opt-in toggles tied to a field (e.g. newsletter subscription, terms agreement).
 */
export const DescriptionWithCheckbox: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      const subscribe = ref(false);
      return { value, subscribe };
    },
    template: `
      <UiField>
        <UiFieldLabel for="email">Email</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
          <UiFieldDescription variant="input" v-model="subscribe" name="newsletter">
            Subscribe to our newsletter
          </UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: descriptionWithCheckboxTemplateSource } },
  },
};

const withLabelInfoTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiField>
    <UiFieldLabel for="api-key" tooltip="Your unique API key for authentication.">
      API Key
    </UiFieldLabel>
    <UiFieldContent>
      <UiInput id="api-key" v-model="value" name="apiKey" placeholder="sk-..." />
      <UiFieldDescription>Keep this secret and do not share it.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Label with an interactive info tooltip icon.
 * Pass a `tooltip` prop to `UiFieldLabel` to render a ghost icon button with a tooltip.
 */
export const WithLabelInfo: Story = {
  render: (args) => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: `
      <UiField :orientation="args.orientation">
        <UiFieldLabel for="api-key" tooltip="Your unique API key for authentication.">
          API Key
        </UiFieldLabel>
        <UiFieldContent>
          <UiInput id="api-key" v-model="value" name="apiKey" placeholder="sk-..." />
          <UiFieldDescription>Keep this secret and do not share it.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    docs: { source: { code: withLabelInfoTemplateSource } },
  },
};

const withErrorTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldError,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
const errors = ref(['Email is required'])
</script>

<template>
  <UiField>
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
      <UiFieldError :errors="errors" />
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Field with a validation error.
 * Use this to show how errors are rendered under the input (e.g., form validation failures).
 */
export const WithError: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldError,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      const errors = ref(['Email is required']);
      return { value, errors };
    },
    template: `
      <UiField>
        <UiFieldLabel for="email">Email</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
          <UiFieldError :errors="errors" />
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: withErrorTemplateSource } },
  },
};

const groupTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldGroup,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiFieldSeparator,
  UiFieldSet,
  UiFieldTitle,
  UiInput,
} from '@aleph-alpha/ui-library'

const firstName = ref('')
const lastName = ref('')
</script>

<template>
  <UiFieldGroup>
    <UiFieldSet>
      <UiFieldTitle>Profile</UiFieldTitle>
      <UiFieldDescription>Update your personal information.</UiFieldDescription>
      <UiFieldSeparator />
      <UiField>
        <UiFieldLabel for="firstName">First name</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="firstName" v-model="firstName" name="firstName" />
        </UiFieldContent>
      </UiField>
      <UiField>
        <UiFieldLabel for="lastName">Last name</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="lastName" v-model="lastName" name="lastName" />
        </UiFieldContent>
      </UiField>
    </UiFieldSet>
  </UiFieldGroup>
</template>`;

/**
 * Grouped fields using fieldset semantics (title/description/separator + multiple fields).
 * Use this to present related inputs as a single section (e.g., profile or billing details).
 */
export const Group: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldSeparator,
      UiFieldSet,
      UiFieldTitle,
      UiInput,
    },
    setup() {
      const firstName = ref('');
      const lastName = ref('');
      return { firstName, lastName };
    },
    template: `
      <UiFieldGroup>
        <UiFieldSet>
          <UiFieldTitle>Profile</UiFieldTitle>
          <UiFieldDescription>Update your personal information.</UiFieldDescription>
          <UiFieldSeparator />
          <UiField>
            <UiFieldLabel for="firstName">First name</UiFieldLabel>
            <UiFieldContent>
              <UiInput id="firstName" v-model="firstName" name="firstName" />
            </UiFieldContent>
          </UiField>
          <UiField>
            <UiFieldLabel for="lastName">Last name</UiFieldLabel>
            <UiFieldContent>
              <UiInput id="lastName" v-model="lastName" name="lastName" />
            </UiFieldContent>
          </UiField>
        </UiFieldSet>
      </UiFieldGroup>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: groupTemplateSource } },
  },
};

const chipGroupFieldTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiChip,
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldLabel,
  UiIcon,
} from '@aleph-alpha/ui-library'

const chips = ref([
  'Data Analysis',
  'Report Generation',
  'Workflow Automation',
  'Predictive Modeling',
  'Sentiment Analysis',
  'Risk Management',
  'Fraud Detection',
])

const selectedAddChip = ref(false)

const ChipIcon = {
  components: { UiIcon },
  template: '<UiIcon name="tag" :size="14" />',
}

const AddIcon = {
  components: { UiIcon },
  template: '<UiIcon name="plus" :size="14" />',
}

function removeChip(label: string) {
  chips.value = chips.value.filter((chip) => chip !== label)
}
</script>

<template>
  <UiField>
    <UiFieldLabel for="focus-areas">Focus Areas</UiFieldLabel>
    <UiFieldContent>
      <div id="focus-areas" class="flex flex-wrap items-center gap-2">
        <UiChip
          v-for="chip in chips"
          :key="chip"
          variant="removable"
          :start-icon="ChipIcon"
          @remove="removeChip(chip)"
        >
          {{ chip }}
        </UiChip>

        <UiChip
          v-model="selectedAddChip"
          variant="removable"
          selectable
          :start-icon="AddIcon"
          remove-label="Remove add action"
        >
          Add
        </UiChip>
      </div>
      <UiFieldDescription>
        Chip group inside a field. Use Tab to navigate interactive chip actions in order.
      </UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Field with a chip group value area (Figma chips-group style).
 * Demonstrates removable chips and an interactive "Add" chip in a field context.
 */
export const ChipGroup: Story = {
  render: () => ({
    components: {
      UiChip,
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiIcon,
    },
    setup() {
      const chips = ref([
        'Data Analysis',
        'Report Generation',
        'Workflow Automation',
        'Predictive Modeling',
        'Sentiment Analysis',
        'Risk Management',
        'Fraud Detection',
      ]);
      const selectedAddChip = ref(false);

      const ChipIcon = {
        components: { UiIcon },
        template: '<UiIcon name="tag" :size="14" />',
      };

      const AddIcon = {
        components: { UiIcon },
        template: '<UiIcon name="plus" :size="14" />',
      };

      function removeChip(label: string) {
        chips.value = chips.value.filter((chip) => chip !== label);
      }

      return { chips, selectedAddChip, ChipIcon, AddIcon, removeChip };
    },
    template: `
      <UiField>
        <UiFieldLabel for="focus-areas">Focus Areas</UiFieldLabel>
        <UiFieldContent>
          <div id="focus-areas" class="flex flex-wrap items-center gap-2">
            <UiChip
              v-for="chip in chips"
              :key="chip"
              variant="removable"
              :start-icon="ChipIcon"
              @remove="removeChip(chip)"
            >
              {{ chip }}
            </UiChip>

            <UiChip
              v-model="selectedAddChip"
              variant="removable"
              selectable
              :start-icon="AddIcon"
              remove-label="Remove add action"
            >
              Add
            </UiChip>
          </div>
          <UiFieldDescription>
            Chip group inside a field. Use Tab to navigate interactive chip actions in order.
          </UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: chipGroupFieldTemplateSource } },
  },
};

const responsiveOrientationInlineTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiField orientation="responsive">
    <UiFieldLabel for="username">Username</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="username" v-model="value" name="username" placeholder="shadcn" />
      <UiFieldDescription>This will be visible to other users.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Responsive layout: horizontal by default, collapses to vertical on small screens.
 * Useful when you want labels aligned on the left and controls on the right.
 */
export const ResponsiveInline: Story = {
  args: { orientation: 'responsive' },
  render: (args) => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: `
      <UiField :orientation="args.orientation">
        <UiFieldLabel for="username">Username</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="username" v-model="value" name="username" placeholder="shadcn" />
          <UiFieldDescription>This will be visible to other users.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    docs: { source: { code: responsiveOrientationInlineTemplateSource } },
  },
};

const responsiveOrientationTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiFieldGroup,
  UiFieldSet,
  UiFieldTitle,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <div class="max-w-xl">
    <UiFieldGroup>
      <UiFieldSet>
        <UiFieldTitle>Account</UiFieldTitle>
        <UiField orientation="responsive">
          <UiFieldLabel for="displayName">Display name</UiFieldLabel>
          <UiFieldContent>
            <UiInput id="displayName" v-model="value" name="displayName" placeholder="Jane Doe" />
            <UiFieldDescription>Shown on your profile.</UiFieldDescription>
          </UiFieldContent>
        </UiField>
      </UiFieldSet>
    </UiFieldGroup>
  </div>
</template>`;

/**
 * Responsive orientation switches layout based on the field-group container query.
 * Wrap in `UiFieldGroup` to enable the container query used by the field styles.
 */
export const ResponsiveOrientation: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldSet,
      UiFieldTitle,
      UiInput,
    },
    setup() {
      const value = ref('');
      return { value };
    },
    template: `
      <div class="max-w-xl">
        <UiFieldGroup>
          <UiFieldSet>
            <UiFieldTitle>Account</UiFieldTitle>
            <UiField orientation="responsive">
              <UiFieldLabel for="displayName">Display name</UiFieldLabel>
              <UiFieldContent>
                <UiInput id="displayName" v-model="value" name="displayName" placeholder="Jane Doe" />
                <UiFieldDescription>Shown on your profile.</UiFieldDescription>
              </UiFieldContent>
            </UiField>
          </UiFieldSet>
        </UiFieldGroup>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: responsiveOrientationTemplateSource } },
  },
};

const multipleErrorsTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldError,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('bad-email')
const errors = ref([
  'Must be a valid email address',
  { message: 'Domain is not allowed' },
  'Must be a valid email address',
])
</script>

<template>
  <UiField data-invalid="true">
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="email" v-model="value" name="email" />
      <UiFieldError :errors="errors" />
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Field with multiple validation errors.
 * `UiFieldError` deduplicates identical messages and renders a list when there is more than one.
 */
export const WithMultipleErrors: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldError,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('bad-email');
      const errors = ref([
        'Must be a valid email address',
        { message: 'Domain is not allowed' },
        'Must be a valid email address',
      ]);
      return { value, errors };
    },
    template: `
      <UiField data-invalid="true">
        <UiFieldLabel for="email-multi">Email</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="email-multi" v-model="value" name="email" />
          <UiFieldError :errors="errors" />
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: multipleErrorsTemplateSource } },
  },
};

const customErrorSlotTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldError,
  UiInput,
} from '@aleph-alpha/ui-library'

const value = ref('')
const errors = ref(['Email is required'])
</script>

<template>
  <UiField data-invalid="true">
    <UiFieldLabel for="email-custom">Email</UiFieldLabel>
    <UiFieldContent>
      <UiInput id="email-custom" v-model="value" name="email" />
      <UiFieldError :errors="errors">
        <span class="font-medium">Please provide a valid email.</span>
      </UiFieldError>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Custom error rendering using the `UiFieldError` slot.
 * Slot content takes precedence over the `errors` prop.
 */
export const CustomErrorSlot: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldError,
      UiFieldLabel,
      UiInput,
    },
    setup() {
      const value = ref('');
      const errors = ref(['Email is required']);
      return { value, errors };
    },
    template: `
      <UiField data-invalid="true">
        <UiFieldLabel for="email-custom">Email</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="email-custom" v-model="value" name="email" />
          <UiFieldError :errors="errors">
            <span class="font-medium">Please provide a valid email.</span>
          </UiFieldError>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: customErrorSlotTemplateSource } },
  },
};

const textareaFieldTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiTextarea,
} from '@aleph-alpha/ui-library'

const bio = ref('')
</script>

<template>
  <UiField>
    <UiFieldLabel for="bio">Bio</UiFieldLabel>
    <UiFieldContent>
      <UiTextarea id="bio" v-model="bio" name="bio" placeholder="Tell us a little about yourself." />
      <UiFieldDescription>You can write up to 160 characters.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Field with a textarea control.
 */
export const Textarea: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiTextarea,
    },
    setup() {
      const bio = ref('');
      return { bio };
    },
    template: `
      <UiField>
        <UiFieldLabel for="bio">Bio</UiFieldLabel>
        <UiFieldContent>
          <UiTextarea id="bio" v-model="bio" name="bio" placeholder="Tell us a little about yourself." />
          <UiFieldDescription>You can write up to 160 characters.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: textareaFieldTemplateSource } },
  },
};

const selectFieldTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldContent,
  UiFieldDescription,
  UiSelect,
  UiSelectTrigger,
  UiSelectValue,
  UiSelectContent,
  UiSelectItem,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiField>
    <UiFieldLabel for="fruit">Favorite fruit</UiFieldLabel>
    <UiFieldContent>
      <UiSelect v-model="value">
        <UiSelectTrigger id="fruit">
          <UiSelectValue placeholder="Select a fruit" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem value="apple">Apple</UiSelectItem>
          <UiSelectItem value="banana">Banana</UiSelectItem>
          <UiSelectItem value="orange">Orange</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
      <UiFieldDescription>This is used to personalize suggestions.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Field composed with `UiSelect`.
 */
export const Select: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiSelect,
      UiSelectContent,
      UiSelectItem,
      UiSelectTrigger,
      UiSelectValue,
    },
    setup() {
      const value = ref('');
      return { value };
    },
    template: `
      <UiField>
        <UiFieldLabel for="fruit">Favorite fruit</UiFieldLabel>
        <UiFieldContent>
          <UiSelect v-model="value">
            <UiSelectTrigger id="fruit">
              <UiSelectValue placeholder="Select a fruit" />
            </UiSelectTrigger>
            <UiSelectContent>
              <UiSelectItem value="apple">Apple</UiSelectItem>
              <UiSelectItem value="banana">Banana</UiSelectItem>
              <UiSelectItem value="orange">Orange</UiSelectItem>
            </UiSelectContent>
          </UiSelect>
          <UiFieldDescription>This is used to personalize suggestions.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: selectFieldTemplateSource } },
  },
};

const checkboxFieldTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldLabel,
  UiCheckbox,
} from '@aleph-alpha/ui-library'

const enabled = ref(true)
</script>

<template>
  <UiField orientation="responsive">
    <UiCheckbox id="notifications" v-model="enabled" name="notifications" />
    <UiFieldContent>
      <UiFieldLabel for="notifications">Enable notifications</UiFieldLabel>
      <UiFieldDescription>You can change this setting at any time.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Checkbox field layout (checkbox + text content).
 * The checkbox is a direct child of `UiField` so the responsive styles can align it nicely.
 */
export const Checkbox: Story = {
  render: () => ({
    components: {
      UiCheckbox,
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
    },
    setup() {
      const enabled = ref(true);
      return { enabled };
    },
    template: `
      <UiField orientation="responsive">
        <UiCheckbox id="notifications" v-model="enabled" name="notifications" />
        <UiFieldContent>
          <UiFieldLabel for="notifications">Enable notifications</UiFieldLabel>
          <UiFieldDescription>You can change this setting at any time.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: checkboxFieldTemplateSource } },
  },
};

const switchFieldTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldLabel,
  UiSwitch,
} from '@aleph-alpha/ui-library'

const enabled = ref(false)
</script>

<template>
  <UiField orientation="responsive">
    <UiSwitch id="airplane" v-model="enabled" name="airplane" />
    <UiFieldContent>
      <UiFieldLabel for="airplane">Airplane mode</UiFieldLabel>
      <UiFieldDescription>Disable all wireless connections.</UiFieldDescription>
    </UiFieldContent>
  </UiField>
</template>`;

/**
 * Switch field layout (switch + text content).
 */
export const Switch: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldLabel,
      UiSwitch,
    },
    setup() {
      const enabled = ref(false);
      return { enabled };
    },
    template: `
      <UiField orientation="responsive">
        <UiSwitch id="airplane" v-model="enabled" name="airplane" />
        <UiFieldContent>
          <UiFieldLabel for="airplane">Airplane mode</UiFieldLabel>
          <UiFieldDescription>Disable all wireless connections.</UiFieldDescription>
        </UiFieldContent>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: switchFieldTemplateSource } },
  },
};

const radioGroupFieldSetTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldGroup,
  UiFieldLegend,
  UiFieldSet,
  UiFieldTitle,
  UiRadioGroup,
  UiRadioGroupItem,
} from '@aleph-alpha/ui-library'

const plan = ref('pro')
</script>

<template>
  <UiFieldGroup data-variant="outline" class="max-w-xl">
    <UiFieldSet>
      <UiFieldTitle>Plan</UiFieldTitle>
      <UiFieldLegend variant="label">Choose your plan</UiFieldLegend>

      <UiRadioGroup v-model="plan" name="plan">
        <UiField orientation="responsive">
          <UiRadioGroupItem id="plan-free" value="free" />
          <UiFieldContent>
            <label for="plan-free" class="text-sm font-medium">Free</label>
            <UiFieldDescription>Basic features for personal use.</UiFieldDescription>
          </UiFieldContent>
        </UiField>

        <UiField orientation="responsive">
          <UiRadioGroupItem id="plan-pro" value="pro" />
          <UiFieldContent>
            <label for="plan-pro" class="text-sm font-medium">Pro</label>
            <UiFieldDescription>Everything you need for work.</UiFieldDescription>
          </UiFieldContent>
        </UiField>

        <UiField orientation="responsive" data-disabled="true">
          <UiRadioGroupItem id="plan-enterprise" value="enterprise" disabled />
          <UiFieldContent>
            <label for="plan-enterprise" class="text-sm font-medium text-muted-foreground">Enterprise</label>
            <UiFieldDescription>Contact sales for pricing.</UiFieldDescription>
          </UiFieldContent>
        </UiField>
      </UiRadioGroup>
    </UiFieldSet>
  </UiFieldGroup>
</template>`;

/**
 * Radio-group inside a fieldset, using `UiField` rows to align each option with its label/description.
 */
export const RadioGroupInFieldSet: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLegend,
      UiFieldSet,
      UiFieldTitle,
      UiRadioGroup,
      UiRadioGroupItem,
    },
    setup() {
      const plan = ref('pro');
      return { plan };
    },
    template: `
      <UiFieldGroup data-variant="outline" class="max-w-xl">
        <UiFieldSet>
          <UiFieldTitle>Plan</UiFieldTitle>
          <UiFieldLegend variant="label">Choose your plan</UiFieldLegend>

          <UiRadioGroup v-model="plan" name="plan">
            <UiField orientation="responsive">
              <UiRadioGroupItem id="plan-free" value="free" />
              <UiFieldContent>
                <label for="plan-free" class="text-sm font-medium">Free</label>
                <UiFieldDescription>Basic features for personal use.</UiFieldDescription>
              </UiFieldContent>
            </UiField>

            <UiField orientation="responsive">
              <UiRadioGroupItem id="plan-pro" value="pro" />
              <UiFieldContent>
                <label for="plan-pro" class="text-sm font-medium">Pro</label>
                <UiFieldDescription>Everything you need for work.</UiFieldDescription>
              </UiFieldContent>
            </UiField>

            <UiField orientation="responsive" data-disabled="true">
              <UiRadioGroupItem id="plan-enterprise" value="enterprise" disabled />
              <UiFieldContent>
                <label for="plan-enterprise" class="text-sm font-medium text-muted-foreground">Enterprise</label>
                <UiFieldDescription>Contact sales for pricing.</UiFieldDescription>
              </UiFieldContent>
            </UiField>
          </UiRadioGroup>
        </UiFieldSet>
      </UiFieldGroup>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: radioGroupFieldSetTemplateSource } },
  },
};

const separatorWithContentTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldContent,
  UiFieldGroup,
  UiFieldLabel,
  UiFieldSeparator,
  UiFieldSet,
  UiInput,
} from '@aleph-alpha/ui-library'

const email = ref('')
const phone = ref('')
</script>

<template>
  <UiFieldGroup class="max-w-xl">
    <UiFieldSet>
      <UiField>
        <UiFieldLabel for="email-2">Email</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="email-2" v-model="email" name="email" />
        </UiFieldContent>
      </UiField>

      <UiFieldSeparator>or</UiFieldSeparator>

      <UiField>
        <UiFieldLabel for="phone">Phone</UiFieldLabel>
        <UiFieldContent>
          <UiInput id="phone" v-model="phone" name="phone" />
        </UiFieldContent>
      </UiField>
    </UiFieldSet>
  </UiFieldGroup>
</template>`;

/**
 * Separator with content (e.g., “or”) between related fields.
 */
export const SeparatorWithContent: Story = {
  render: () => ({
    components: {
      UiField,
      UiFieldContent,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldSeparator,
      UiFieldSet,
      UiInput,
    },
    setup() {
      const email = ref('');
      const phone = ref('');
      return { email, phone };
    },
    template: `
      <UiFieldGroup class="max-w-xl">
        <UiFieldSet>
          <UiField>
            <UiFieldLabel for="email-2">Email</UiFieldLabel>
            <UiFieldContent>
              <UiInput id="email-2" v-model="email" name="email" />
            </UiFieldContent>
          </UiField>

          <UiFieldSeparator>or</UiFieldSeparator>

          <UiField>
            <UiFieldLabel for="phone">Phone</UiFieldLabel>
            <UiFieldContent>
              <UiInput id="phone" v-model="phone" name="phone" />
            </UiFieldContent>
          </UiField>
        </UiFieldSet>
      </UiFieldGroup>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: separatorWithContentTemplateSource } },
  },
};

const validationAndErrorsTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiField,
  UiFieldLabel,
  UiFieldError,
  UiInput,
} from '@aleph-alpha/ui-library'

const email = ref('not-an-email')
</script>

<template>
  <UiField data-invalid>
    <UiFieldLabel for="email-invalid">Email</UiFieldLabel>
    <UiInput id="email-invalid" v-model="email" name="email" type="email" aria-invalid />
    <UiFieldError>Enter a valid email address.</UiFieldError>
  </UiField>
</template>`;

/**
 * Validation styling + a11y: apply `data-invalid` to the field and `aria-invalid` to the control.
 * Mirrors the “Validation and Errors” section from shadcn-vue field docs.
 */
export const ValidationAndErrors: Story = {
  render: () => ({
    components: { UiField, UiFieldError, UiFieldLabel, UiInput },
    setup() {
      const email = ref('not-an-email');
      return { email };
    },
    template: `
      <UiField data-invalid>
        <UiFieldLabel for="email-invalid">Email</UiFieldLabel>
        <UiInput id="email-invalid" v-model="email" name="email" type="email" aria-invalid />
        <UiFieldError>Enter a valid email address.</UiFieldError>
      </UiField>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: validationAndErrorsTemplateSource } },
  },
};

const checkboxGroupTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiCheckbox,
  UiField,
  UiFieldDescription,
  UiFieldGroup,
  UiFieldLabel,
  UiFieldLegend,
  UiFieldSet,
} from '@aleph-alpha/ui-library'

const push = ref(true)
const email = ref(false)
</script>

<template>
  <div class="max-w-xl">
    <UiFieldSet>
      <UiFieldLegend variant="legend">Tasks</UiFieldLegend>
      <UiFieldDescription>
        Get notified when tasks you've created have updates.
        <a href="#">Manage tasks</a>
      </UiFieldDescription>

      <UiFieldGroup data-slot="checkbox-group">
        <UiField orientation="responsive">
          <UiCheckbox id="push-tasks" v-model="push" name="push-tasks" />
          <UiFieldLabel for="push-tasks" class="font-normal">
            Push notifications
          </UiFieldLabel>
        </UiField>

        <UiField orientation="responsive">
          <UiCheckbox id="email-tasks" v-model="email" name="email-tasks" />
          <UiFieldLabel for="email-tasks" class="font-normal">
            Email notifications
          </UiFieldLabel>
        </UiField>
      </UiFieldGroup>
    </UiFieldSet>
  </div>
</template>`;

/**
 * Checkbox-group fieldset.
 * Mirrors the “Anatomy” example patterns from shadcn-vue field docs (`data-slot="checkbox-group"` for spacing).
 */
export const CheckboxGroup: Story = {
  render: () => ({
    components: {
      UiCheckbox,
      UiField,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldLegend,
      UiFieldSet,
    },
    setup() {
      const push = ref(true);
      const email = ref(false);
      return { push, email };
    },
    template: `
      <div class="max-w-xl">
        <UiFieldSet>
          <UiFieldLegend variant="legend">Tasks</UiFieldLegend>
          <UiFieldDescription>
            Get notified when tasks you've created have updates.
            <a href="#">Manage tasks</a>
          </UiFieldDescription>

          <UiFieldGroup data-slot="checkbox-group">
            <UiField orientation="responsive">
              <UiCheckbox id="push-tasks" v-model="push" name="push-tasks" />
              <UiFieldLabel for="push-tasks" class="font-normal">
                Push notifications
              </UiFieldLabel>
            </UiField>

            <UiField orientation="responsive">
              <UiCheckbox id="email-tasks" v-model="email" name="email-tasks" />
              <UiFieldLabel for="email-tasks" class="font-normal">
                Email notifications
              </UiFieldLabel>
            </UiField>
          </UiFieldGroup>
        </UiFieldSet>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: checkboxGroupTemplateSource } },
  },
};

const responsiveProfileFormTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiButton,
  UiField,
  UiFieldContent,
  UiFieldDescription,
  UiFieldGroup,
  UiFieldLabel,
  UiFieldLegend,
  UiFieldSeparator,
  UiFieldSet,
  UiInput,
  UiTextarea,
} from '@aleph-alpha/ui-library'

const name = ref('')
const message = ref('')
</script>

<template>
  <div class="w-full max-w-4xl">
    <form>
      <UiFieldSet>
        <UiFieldLegend>Profile</UiFieldLegend>
        <UiFieldDescription>Fill in your profile information.</UiFieldDescription>
        <UiFieldSeparator />
        <UiFieldGroup>
          <UiField orientation="responsive" description-placement="under-label">
            <UiFieldLabel for="profile-name" tooltip="Used on your public profile page.">
              Name
            </UiFieldLabel>
            <UiFieldDescription>Provide your full name for identification</UiFieldDescription>
            <UiFieldContent>
              <UiInput id="profile-name" v-model="name" name="name" placeholder="Evil Rabbit" required />
            </UiFieldContent>
          </UiField>
          <UiFieldSeparator />
          <UiField orientation="responsive" description-placement="under-label">
            <UiFieldLabel for="profile-message">Message</UiFieldLabel>
            <UiFieldDescription>
              You can write your message here. Keep it short, preferably under 100 characters.
            </UiFieldDescription>
            <UiFieldContent>
              <UiTextarea
                id="profile-message"
                v-model="message"
                name="message"
                placeholder="Hello, world!"
                required
                class="min-h-[100px] resize-none sm:min-w-[300px]"
              />
            </UiFieldContent>
          </UiField>
          <UiFieldSeparator />
          <UiField orientation="responsive">
            <UiButton type="submit">Submit</UiButton>
            <UiButton type="button" variant="outline">Cancel</UiButton>
          </UiField>
        </UiFieldGroup>
      </UiFieldSet>
    </form>
  </div>
</template>`;

/**
 * Full responsive form layout, mirroring the “Responsive Layout” example from shadcn-vue field docs.
 * Uses `descriptionPlacement="under-label"` to group the label and description together,
 * and `tooltip` prop on `UiFieldLabel` for inline help.
 */
export const ResponsiveProfileForm: Story = {
  render: () => ({
    components: {
      UiButton,
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldLegend,
      UiFieldSeparator,
      UiFieldSet,
      UiInput,
      UiTextarea,
    },
    setup() {
      const name = ref('');
      const message = ref('');
      return { name, message };
    },
    template: `
      <div class="w-full max-w-4xl">
        <form>
          <UiFieldSet>
            <UiFieldLegend>Profile</UiFieldLegend>
            <UiFieldDescription>Fill in your profile information.</UiFieldDescription>
            <UiFieldSeparator />
            <UiFieldGroup>
              <UiField orientation="responsive" description-placement="under-label">
                <UiFieldLabel for="profile-name" tooltip="Used on your public profile page.">
                  Name
                </UiFieldLabel>
                <UiFieldDescription>Provide your full name for identification</UiFieldDescription>
                <UiFieldContent>
                  <UiInput id="profile-name" v-model="name" name="name" placeholder="Evil Rabbit" required />
                </UiFieldContent>
              </UiField>
              <UiFieldSeparator />
              <UiField orientation="responsive" description-placement="under-label">
                <UiFieldLabel for="profile-message">Message</UiFieldLabel>
                <UiFieldDescription>
                  You can write your message here. Keep it short, preferably under 100 characters.
                </UiFieldDescription>
                <UiFieldContent>
                  <UiTextarea
                    id="profile-message"
                    v-model="message"
                    name="message"
                    placeholder="Hello, world!"
                    required
                    class="min-h-[100px] resize-none sm:min-w-[300px]"
                  />
                </UiFieldContent>
              </UiField>
              <UiFieldSeparator />
              <UiField orientation="responsive">
                <UiButton type="submit">Submit</UiButton>
                <UiButton type="button" variant="outline">Cancel</UiButton>
              </UiField>
            </UiFieldGroup>
          </UiFieldSet>
        </form>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: responsiveProfileFormTemplateSource } },
  },
};

/**
 * Payment form with card details, billing address, and comments.
 * Demonstrates `tooltip` on labels, select inputs, checkbox, and textarea.
 */
export const PaymentMethodForm: Story = {
  render: () => ({
    components: {
      UiButton,
      UiCheckbox,
      UiField,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldLegend,
      UiFieldSeparator,
      UiFieldSet,
      UiInput,
      UiSelect,
      UiSelectContent,
      UiSelectItem,
      UiSelectTrigger,
      UiSelectValue,
      UiTextarea,
    },
    setup() {
      const cardName = ref('John Doe');
      const cardNumber = ref('1234 5678 9012 3456');
      const cvv = ref('123');
      const month = ref('');
      const year = ref('');
      const sameAsShipping = ref(true);
      const comments = ref('');
      return {
        cardName,
        cardNumber,
        cvv,
        month,
        year,
        sameAsShipping,
        comments,
      };
    },
    template: `
      <div class="w-full max-w-sm">
        <form>
          <UiFieldGroup>
            <UiFieldSet>
              <UiFieldLegend>Payment Method</UiFieldLegend>
              <UiFieldDescription>All transactions are secure and encrypted.</UiFieldDescription>

              <UiFieldGroup>
                <UiField>
                  <UiFieldLabel for="card-name" tooltip="The name printed on your card.">Name on card</UiFieldLabel>
                  <UiInput id="card-name" v-model="cardName" name="cardName" placeholder="John Doe" required />
                </UiField>

                <UiField>
                  <UiFieldLabel for="card-number" tooltip="Your 16-digit card number.">Card number</UiFieldLabel>
                  <UiInput id="card-number" v-model="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required />
                </UiField>

                <div class="grid grid-cols-3 gap-4">
                  <UiField>
                    <UiFieldLabel for="exp-month" tooltip="Expiry month.">Month</UiFieldLabel>
                    <UiSelect v-model="month">
                      <UiSelectTrigger id="exp-month"><UiSelectValue placeholder="MM" /></UiSelectTrigger>
                      <UiSelectContent>
                        <UiSelectItem v-for="m in ['01','02','03','04','05','06','07','08','09','10','11','12']" :key="m" :value="m">{{ m }}</UiSelectItem>
                      </UiSelectContent>
                    </UiSelect>
                  </UiField>
                  <UiField>
                    <UiFieldLabel for="exp-year" tooltip="Expiry year.">Year</UiFieldLabel>
                    <UiSelect v-model="year">
                      <UiSelectTrigger id="exp-year"><UiSelectValue placeholder="YYYY" /></UiSelectTrigger>
                      <UiSelectContent>
                        <UiSelectItem v-for="y in ['2026','2027','2028','2029','2030']" :key="y" :value="y">{{ y }}</UiSelectItem>
                      </UiSelectContent>
                    </UiSelect>
                  </UiField>
                  <UiField>
                    <UiFieldLabel for="cvv" tooltip="3-digit security code on the back.">CVV</UiFieldLabel>
                    <UiInput id="cvv" v-model="cvv" name="cvv" placeholder="123" required />
                  </UiField>
                </div>
              </UiFieldGroup>
            </UiFieldSet>

            <UiFieldSeparator />

            <UiFieldSet>
              <UiFieldLegend>Billing Address</UiFieldLegend>
              <UiFieldDescription>The billing address associated with your payment method.</UiFieldDescription>
              <UiFieldGroup>
                <UiField orientation="responsive">
                  <UiCheckbox id="same-as-shipping" v-model="sameAsShipping" />
                  <UiFieldLabel for="same-as-shipping" class="font-normal">Same as shipping address</UiFieldLabel>
                </UiField>
              </UiFieldGroup>
            </UiFieldSet>

            <UiField>
              <UiFieldLabel for="comments" tooltip="Any special delivery instructions.">Comments</UiFieldLabel>
              <UiTextarea id="comments" v-model="comments" name="comments" placeholder="Add any additional comments" class="resize-none" />
            </UiField>

            <UiField orientation="responsive">
              <UiButton type="submit">Submit</UiButton>
              <UiButton variant="outline" type="button">Cancel</UiButton>
            </UiField>
          </UiFieldGroup>
        </form>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
  },
};

/**
 * Profile settings form with notification switches, privacy radio group,
 * and a labeled separator. Demonstrates `descriptionPlacement`, `UiSwitch`,
 * and `UiRadioGroup` inside fields.
 */
export const ProfileSettingsForm: Story = {
  render: () => ({
    components: {
      UiButton,
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldLegend,
      UiFieldSeparator,
      UiFieldSet,
      UiInput,
      UiRadioGroup,
      UiRadioGroupItem,
      UiSwitch,
      UiTextarea,
    },
    setup() {
      const firstName = ref('John');
      const lastName = ref('Doe');
      const email = ref('john@example.com');
      const phone = ref('(555) 123-4567');
      const bio = ref('');
      const emailNotifications = ref(true);
      const pushNotifications = ref(false);
      const marketingEmails = ref(true);
      const privacy = ref('everyone');
      return {
        firstName,
        lastName,
        email,
        phone,
        bio,
        emailNotifications,
        pushNotifications,
        marketingEmails,
        privacy,
      };
    },
    template: `
      <div class="w-full max-w-md">
        <form>
          <UiFieldGroup>
            <UiFieldSet>
              <UiFieldLegend>Profile Settings</UiFieldLegend>
              <UiFieldDescription>Update your profile information and preferences.</UiFieldDescription>

              <UiFieldGroup>
                <div class="grid grid-cols-2 gap-4">
                  <UiField>
                    <UiFieldLabel for="profile-first" tooltip="Your given name.">First Name</UiFieldLabel>
                    <UiInput id="profile-first" v-model="firstName" name="firstName" placeholder="John" />
                  </UiField>
                  <UiField>
                    <UiFieldLabel for="profile-last" tooltip="Your family name.">Last Name</UiFieldLabel>
                    <UiInput id="profile-last" v-model="lastName" name="lastName" placeholder="Doe" />
                  </UiField>
                </div>

                <UiField>
                  <UiFieldLabel for="profile-email" tooltip="Your primary contact email.">Email</UiFieldLabel>
                  <UiInput id="profile-email" v-model="email" name="email" type="email" placeholder="john@example.com" />
                </UiField>

                <UiField>
                  <UiFieldLabel for="profile-phone" tooltip="Include country code.">Phone Number</UiFieldLabel>
                  <UiInput id="profile-phone" v-model="phone" name="phone" type="tel" placeholder="(555) 123-4567" />
                </UiField>

                <UiField>
                  <UiFieldLabel for="profile-bio" tooltip="Keep it short and professional.">Bio</UiFieldLabel>
                  <UiTextarea id="profile-bio" v-model="bio" name="bio" placeholder="Tell us a little about yourself" class="resize-none" />
                </UiField>
              </UiFieldGroup>
            </UiFieldSet>

            <UiFieldSet>
              <UiFieldLegend>Notification Preferences</UiFieldLegend>
              <UiFieldDescription>Manage your notification preferences.</UiFieldDescription>

              <UiFieldGroup>
                <UiField orientation="responsive" description-placement="under-label">
                  <UiFieldLabel for="email-notif">Email notifications</UiFieldLabel>
                  <UiFieldDescription>Receive emails about new products, features, and more. If you don't want to receive these emails, you can turn them off.</UiFieldDescription>
                  <UiSwitch id="email-notif" v-model="emailNotifications" />
                </UiField>

                <UiField orientation="responsive">
                  <UiFieldLabel for="push-notif">Push notifications</UiFieldLabel>
                  <UiSwitch id="push-notif" v-model="pushNotifications" />
                </UiField>

                <UiField orientation="responsive">
                  <UiFieldLabel for="marketing">Marketing emails</UiFieldLabel>
                  <UiSwitch id="marketing" v-model="marketingEmails" />
                </UiField>
              </UiFieldGroup>
            </UiFieldSet>

            <UiFieldSeparator>Privacy</UiFieldSeparator>

            <UiFieldSet>
              <UiFieldLegend>Privacy Settings</UiFieldLegend>
              <UiFieldDescription>Choose who can see your profile and what they can see.</UiFieldDescription>

              <UiRadioGroup v-model="privacy">
                <UiField orientation="responsive">
                  <UiRadioGroupItem id="privacy-everyone" value="everyone" />
                  <UiFieldContent>
                    <UiFieldLabel for="privacy-everyone" class="font-normal">Everyone</UiFieldLabel>
                    <UiFieldDescription>Anyone can see your profile</UiFieldDescription>
                  </UiFieldContent>
                </UiField>
                <UiField orientation="responsive">
                  <UiRadioGroupItem id="privacy-followers" value="followers" />
                  <UiFieldContent>
                    <UiFieldLabel for="privacy-followers" class="font-normal">Followers</UiFieldLabel>
                    <UiFieldDescription>Visible to your followers and connections</UiFieldDescription>
                  </UiFieldContent>
                </UiField>
                <UiField orientation="responsive">
                  <UiRadioGroupItem id="privacy-custom" value="custom" />
                  <UiFieldContent>
                    <UiFieldLabel for="privacy-custom" class="font-normal">Custom</UiFieldLabel>
                    <UiFieldDescription>Choose who can see your profile</UiFieldDescription>
                  </UiFieldContent>
                </UiField>
              </UiRadioGroup>
            </UiFieldSet>

            <UiField orientation="responsive">
              <UiButton variant="outline" type="button">Cancel</UiButton>
              <UiButton type="submit">Save Changes</UiButton>
            </UiField>
          </UiFieldGroup>
        </form>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
  },
};

/**
 * Personal information form with file upload and terms checkbox.
 * Demonstrates `tooltip` labels, file input, and validation-style checkbox.
 */
export const PersonalInformationForm: Story = {
  render: () => ({
    components: {
      UiButton,
      UiCheckbox,
      UiField,
      UiFieldContent,
      UiFieldDescription,
      UiFieldGroup,
      UiFieldLabel,
      UiFieldLegend,
      UiFieldSet,
      UiInput,
    },
    setup() {
      const pFirstName = ref('John');
      const pLastName = ref('Doe');
      const agreeTerms = ref(false);
      return { pFirstName, pLastName, agreeTerms };
    },
    template: `
      <div class="w-full max-w-sm">
        <form>
          <UiFieldGroup>
            <UiFieldSet>
              <UiFieldLegend>Personal Information</UiFieldLegend>
              <UiFieldDescription>Your basic contact information.</UiFieldDescription>

              <UiFieldGroup>
                <UiField>
                  <UiFieldLabel for="p-first" tooltip="As it appears on official documents.">First Name</UiFieldLabel>
                  <UiInput id="p-first" v-model="pFirstName" name="pFirstName" placeholder="John" />
                </UiField>

                <UiField>
                  <UiFieldLabel for="p-last" tooltip="As it appears on official documents.">Last Name</UiFieldLabel>
                  <UiInput id="p-last" v-model="pLastName" name="pLastName" placeholder="Doe" />
                </UiField>

                <UiField>
                  <UiFieldLabel for="p-resume" tooltip="PDF or DOCX, max 5 MB.">Upload Resume</UiFieldLabel>
                  <UiInput id="p-resume" name="resume" type="file" />
                </UiField>
              </UiFieldGroup>
            </UiFieldSet>

            <UiField orientation="responsive" data-invalid="true">
              <UiCheckbox id="agree-terms" v-model="agreeTerms" />
              <UiFieldContent>
                <UiFieldLabel for="agree-terms" class="font-normal">I agree to the terms and conditions</UiFieldLabel>
              </UiFieldContent>
            </UiField>

            <UiField orientation="responsive">
              <UiButton type="submit">Submit</UiButton>
              <UiButton variant="outline" type="button">Cancel</UiButton>
            </UiField>
          </UiFieldGroup>
        </form>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
  },
};
