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

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

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

/**
 * UiChip is a compact, optionally interactive token for tags, filters, or selected values.
 * Use the static variant for read-only labels and the interactive variant for removable or toggleable selections.
 * For non-interactive count/status indicators, use `UiBadge` instead.
 */
const meta: Meta<typeof UiChip> = {
  title: 'Components/UiChip',
  component: UiChip,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['static', 'selectable', 'removable'],
      description: 'Behavior variant of the chip',
    },
    selectable: {
      control: 'boolean',
      description: 'Enables selection for removable chips',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables interactions',
    },
    startIcon: {
      control: false,
      description: 'Optional leading icon',
    },
    removeLabel: {
      control: 'text',
      description: 'Accessible label for remove button',
    },
    modelValue: {
      control: 'boolean',
      description: 'Selection state for interactive chips',
    },
  },
  args: {
    variant: 'static',
    selectable: false,
    disabled: false,
    removeLabel: 'Remove chip',
    modelValue: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiChip>;

/**
 * Static chips are non-interactive and work as labels/tags.
 */
export const Static: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      return { TagIcon };
    },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <UiChip variant="static">Data Analysis</UiChip>
        <UiChip variant="static" :start-icon="TagIcon">With icon</UiChip>
        <UiChip variant="static" disabled>Disabled</UiChip>
      </div>
    `,
  }),
};

/**
 * Selectable chips support hover, focus, selected and disabled states.
 */
export const Selectable: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      const isSelected = ref(false);
      const isActive = ref(true);
      return { isSelected, isActive, InfoIcon };
    },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <UiChip v-model="isSelected" variant="selectable">Default</UiChip>
        <UiChip v-model="isActive" variant="selectable" :start-icon="InfoIcon">Active</UiChip>
        <UiChip variant="selectable" disabled>Disabled</UiChip>
      </div>
    `,
  }),
};

/**
 * Removable chips include a dismiss action and can also be selectable.
 */
export const Removable: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      const selectedRemovable = ref(true);
      const chips = ref(['Data Analysis', 'Report Generation']);

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

      return { chips, selectedRemovable, removeChip, TagIcon };
    },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <UiChip
          v-for="chip in chips"
          :key="chip"
          variant="removable"
          :start-icon="TagIcon"
          @remove="removeChip(chip)"
        >
          {{ chip }}
        </UiChip>

        <UiChip
          v-model="selectedRemovable"
          variant="removable"
          selectable
          :start-icon="TagIcon"
        >
          Selectable removable
        </UiChip>
      </div>
    `,
  }),
};

/**
 * Chips with and without a leading icon.
 */
export const WithAndWithoutLeadingIcon: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      const selectableWithoutIcon = ref(true);
      const selectableWithIcon = ref(false);
      return { TagIcon, selectableWithoutIcon, selectableWithIcon };
    },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <UiChip variant="static">No icon</UiChip>
        <UiChip variant="static" :start-icon="TagIcon">Leading icon</UiChip>
        <UiChip v-model="selectableWithoutIcon" variant="selectable">Selectable no icon</UiChip>
        <UiChip v-model="selectableWithIcon" variant="selectable" :start-icon="TagIcon">
          Selectable with icon
        </UiChip>
      </div>
    `,
  }),
};

/**
 * Group usage with keyboard-focusable interactive chips.
 * Focus order is left-to-right, top-to-bottom across interactive chips and remove buttons.
 */
export const Group: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      const firstSelected = ref(true);
      const secondSelected = ref(false);
      const removableSelected = ref(true);

      return {
        firstSelected,
        secondSelected,
        removableSelected,
        TagIcon,
        InfoIcon,
      };
    },
    template: `
      <div class="flex max-w-[620px] flex-col gap-3">
        <p class="body-14-regular text-content-on-surface-muted">
          Interactive group example inspired by the Figma chips group. Use Tab to verify focus order.
        </p>

        <div class="flex flex-wrap items-center gap-2">
          <UiChip v-model="firstSelected" variant="selectable" :start-icon="TagIcon">
            Data Analysis
          </UiChip>

          <UiChip v-model="secondSelected" variant="selectable">
            Report Generation
          </UiChip>

          <UiChip variant="removable" :start-icon="InfoIcon">Workflow Automation</UiChip>

          <UiChip v-model="removableSelected" variant="removable" selectable>
            Add
          </UiChip>
        </div>
      </div>
    `,
  }),
};

/**
 * Focus order for interactive chips:
 * selectable chip -> removable chip action -> removable chip dismiss action.
 */
export const FocusOrderInteractive: Story = {
  render: () => ({
    components: { UiChip },
    setup() {
      const first = ref(false);
      const second = ref(true);
      return { first, second, TagIcon };
    },
    template: `
      <div class="flex max-w-[620px] flex-col gap-3">
        <p class="body-14-regular text-content-on-surface-muted">
          Press Tab to verify focus order from left to right and top to bottom.
        </p>

        <div class="flex flex-wrap items-center gap-2">
          <UiChip v-model="first" variant="selectable" :start-icon="TagIcon">
            Focus 1
          </UiChip>

          <UiChip v-model="second" variant="removable" selectable :start-icon="TagIcon">
            Focus 2 and 3
          </UiChip>

          <UiChip variant="removable" :start-icon="TagIcon">
            Focus 4
          </UiChip>
        </div>
      </div>
    `,
  }),
};
