import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import {
  UiStepper,
  UiStepperItem,
  UiStepperTrigger,
  UiStepperIndicator,
  UiStepperTitle,
  UiStepperDescription,
  UiStepperSeparator,
} from './index';
import { UiIcon } from '../UiIcon';

/**
 * UiStepper is a multi-step workflow indicator with step titles, descriptions, separators, and per-step icons.
 * Use it for onboarding, checkout, and multi-page form flows where users need to see overall progress and the current step.
 */
const meta: Meta<typeof UiStepper> = {
  title: 'Components/UiStepper',
  component: UiStepper,
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'number',
      description: 'The controlled value of the active step (use with v-model)',
    },
    defaultValue: {
      control: 'number',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
    },
    linear: {
      control: 'boolean',
      description:
        'Whether navigation must be sequential (user cannot skip ahead to incomplete steps)',
    },
  },
  args: {
    orientation: 'horizontal',
    linear: true,
  },
};

export default meta;

type Story = StoryObj<typeof UiStepper>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiStepper,
  UiStepperItem,
  UiStepperTrigger,
  UiStepperIndicator,
  UiStepperTitle,
  UiStepperDescription,
  UiStepperSeparator,
  UiIcon,
} from '@aleph-alpha/ui-library'

const currentStep = ref(1)

const steps = [
  { step: 1, title: 'Address', description: 'Add your address', icon: 'book-user' },
  { step: 2, title: 'Shipping', description: 'Set your preferred', icon: 'truck' },
  { step: 3, title: 'Payment', description: 'Add any payment', icon: 'credit-card' },
  { step: 4, title: 'Checkout', description: 'Confirm your order' },
]
</script>

<template>
  <UiStepper v-model="currentStep" class="flex w-full items-start gap-2">
    <UiStepperItem
      v-for="item in steps"
      :key="item.step"
      :step="item.step"
      class="relative flex w-full flex-col items-center justify-center"
    >
      <UiStepperTrigger>
        <UiStepperIndicator class="">
          <UiIcon v-if="item.icon" :name="item.icon" :size="16" />
          <span v-else>{{ item.step }}</span>
        </UiStepperIndicator>
      </UiStepperTrigger>
      <UiStepperSeparator
        v-if="item.step !== steps[steps.length - 1]?.step"
      />
      <div class="flex flex-col items-center">
        <UiStepperTitle>{{ item.title }}</UiStepperTitle>
        <UiStepperDescription>{{ item.description }}</UiStepperDescription>
      </div>
    </UiStepperItem>
  </UiStepper>
</template>`;

/**
 * Default stepper with icon indicators for each step. Steps without an icon
 * fall back to displaying the step number. Use for multi-step workflows like
 * checkout flows or onboarding sequences.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiStepper,
      UiStepperItem,
      UiStepperTrigger,
      UiStepperIndicator,
      UiStepperTitle,
      UiStepperDescription,
      UiStepperSeparator,
      UiIcon,
    },
    setup() {
      const currentStep = ref(args.modelValue ?? 1);
      watch(
        () => args.modelValue,
        (val) => {
          if (val != null) currentStep.value = val;
        },
      );
      const steps = [
        {
          step: 1,
          title: 'Address',
          description: 'Add your address',
          icon: 'book-user',
        },
        {
          step: 2,
          title: 'Shipping',
          description: 'Set your preferred',
          icon: 'truck',
        },
        {
          step: 3,
          title: 'Payment',
          description: 'Add any payment',
          icon: 'credit-card',
        },
        { step: 4, title: 'Checkout', description: 'Confirm your order' },
      ];
      return { args, currentStep, steps };
    },
    template: `
      <UiStepper
        v-model="currentStep"
        :orientation="args.orientation"
        :linear="args.linear"
        :class="args.orientation === 'vertical'
          ? 'mx-auto flex w-full max-w-md flex-col justify-start gap-10'
          : 'flex w-full items-start gap-2'"
      >
        <UiStepperItem
          v-for="item in steps"
          :key="item.step"
          :step="item.step"
          :class="args.orientation === 'vertical'
            ? 'relative flex w-full items-start justify-start gap-6'
            : 'relative flex w-full flex-col items-center justify-center'"
        >
          <UiStepperTrigger>
            <UiStepperIndicator>
              <UiIcon v-if="item.icon" :name="item.icon" :size="16" />
              <span v-else>{{ item.step }}</span>
            </UiStepperIndicator>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="item.step !== steps[steps.length - 1]?.step"
          />
          <div :class="args.orientation === 'vertical' ? 'flex flex-col gap-1' : 'flex flex-col items-center'">
            <UiStepperTitle>{{ item.title }}</UiStepperTitle>
            <UiStepperDescription>{{ item.description }}</UiStepperDescription>
          </div>
        </UiStepperItem>
      </UiStepper>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const horizontalTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiStepper,
  UiStepperItem,
  UiStepperTrigger,
  UiStepperIndicator,
  UiStepperTitle,
  UiStepperDescription,
  UiStepperSeparator,
  UiIcon,
} from '@aleph-alpha/ui-library'

const currentStep = ref(1)

const steps = [
  { step: 1, title: 'Your details', description: 'Provide your name and email' },
  { step: 2, title: 'Company details', description: 'A few details about your company' },
  { step: 3, title: 'Invite your team', description: 'Start collaborating with your team' },
]
</script>

<template>
  <UiStepper v-model="currentStep" :linear="true" class="flex w-full items-start gap-2">
    <UiStepperItem
      v-for="step in steps"
      :key="step.step"
      v-slot="{ state }"
      :step="step.step"
      class="relative flex w-full flex-col items-center justify-center"
    >
      <UiStepperTrigger>
        <UiStepperIndicator
          :class="[
            state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
            state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
          ]"
        >
          <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
          <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
          <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
        </UiStepperIndicator>
      </UiStepperTrigger>
      <UiStepperSeparator
        v-if="step.step !== steps[steps.length - 1]?.step"
      />
      <div class="flex flex-col items-center text-center">
        <UiStepperTitle>{{ step.title }}</UiStepperTitle>
        <UiStepperDescription>{{ step.description }}</UiStepperDescription>
      </div>
    </UiStepperItem>
  </UiStepper>
</template>`;

/**
 * Horizontal stepper with check/circle/dot icons. Completed and active steps
 * show a filled blue indicator, inactive steps show an outlined circle.
 */
export const Horizontal: Story = {
  render: () => ({
    components: {
      UiStepper,
      UiStepperItem,
      UiStepperTrigger,
      UiStepperIndicator,
      UiStepperTitle,
      UiStepperDescription,
      UiStepperSeparator,
      UiIcon,
    },
    setup() {
      const currentStep = ref(1);
      const steps = [
        {
          step: 1,
          title: 'Your details',
          description: 'Provide your name and email',
        },
        {
          step: 2,
          title: 'Company details',
          description: 'A few details about your company',
        },
        {
          step: 3,
          title: 'Invite your team',
          description: 'Start collaborating with your team',
        },
      ];
      return { currentStep, steps };
    },
    template: `
      <UiStepper v-model="currentStep" :linear="true" class="flex w-full items-start gap-2">
        <UiStepperItem
          v-for="step in steps"
          :key="step.step"
          v-slot="{ state }"
          :step="step.step"
          class="relative flex w-full flex-col items-center justify-center"
        >
          <UiStepperTrigger>
            <UiStepperIndicator
              :class="[
                state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
                state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
              ]"
            >
              <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
              <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
              <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
            </UiStepperIndicator>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="step.step !== steps[steps.length - 1]?.step"
          />
          <div class="flex flex-col items-center text-center">
            <UiStepperTitle>{{ step.title }}</UiStepperTitle>
            <UiStepperDescription>{{ step.description }}</UiStepperDescription>
          </div>
        </UiStepperItem>
      </UiStepper>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: horizontalTemplateSource,
      },
    },
  },
};

const verticalTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiStepper,
  UiStepperItem,
  UiStepperTrigger,
  UiStepperIndicator,
  UiStepperTitle,
  UiStepperDescription,
  UiStepperSeparator,
  UiIcon,
} from '@aleph-alpha/ui-library'

const currentStep = ref(1)

const steps = [
  { step: 1, title: 'Your details', description: 'Provide your name and email' },
  { step: 2, title: 'Company details', description: 'A few details about your company' },
  { step: 3, title: 'Invite your team', description: 'Start collaborating with your team' },
]
</script>

<template>
  <UiStepper v-model="currentStep" orientation="vertical" :linear="true" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
    <UiStepperItem
      v-for="step in steps"
      :key="step.step"
      v-slot="{ state }"
      :step="step.step"
      class="relative flex w-full items-start justify-start gap-6"
    >
      <UiStepperTrigger>
        <UiStepperIndicator
          :class="[
            state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
            state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
          ]"
        >
          <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
          <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
          <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
        </UiStepperIndicator>
      </UiStepperTrigger>
      <UiStepperSeparator
        v-if="step.step !== steps[steps.length - 1]?.step"
      />
      <div class="flex flex-col gap-1">
        <UiStepperTitle>{{ step.title }}</UiStepperTitle>
        <UiStepperDescription>{{ step.description }}</UiStepperDescription>
      </div>
    </UiStepperItem>
  </UiStepper>
</template>`;

/**
 * Vertical stepper with check/circle/dot icons. Uses the same indicator
 * pattern as Horizontal but with vertical layout and connecting lines
 * running top-to-bottom.
 */
export const Vertical: Story = {
  render: () => ({
    components: {
      UiStepper,
      UiStepperItem,
      UiStepperTrigger,
      UiStepperIndicator,
      UiStepperTitle,
      UiStepperDescription,
      UiStepperSeparator,
      UiIcon,
    },
    setup() {
      const currentStep = ref(1);
      const steps = [
        {
          step: 1,
          title: 'Your details',
          description: 'Provide your name and email',
        },
        {
          step: 2,
          title: 'Company details',
          description: 'A few details about your company',
        },
        {
          step: 3,
          title: 'Invite your team',
          description: 'Start collaborating with your team',
        },
      ];
      return { currentStep, steps };
    },
    template: `
      <UiStepper v-model="currentStep" orientation="vertical" :linear="true" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
        <UiStepperItem
          v-for="step in steps"
          :key="step.step"
          v-slot="{ state }"
          :step="step.step"
          class="relative flex w-full items-start justify-start gap-6"
        >
          <UiStepperTrigger>
            <UiStepperIndicator
              :class="[
                state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
                state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
              ]"
            >
              <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
              <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
              <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
            </UiStepperIndicator>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="step.step !== steps[steps.length - 1]?.step"
          />
          <div class="flex flex-col gap-1">
            <UiStepperTitle>{{ step.title }}</UiStepperTitle>
            <UiStepperDescription>{{ step.description }}</UiStepperDescription>
          </div>
        </UiStepperItem>
      </UiStepper>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: verticalTemplateSource,
      },
    },
  },
};
