import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue';
import TitanStepper from './TitanStepper.vue';

const meta = {
  component: TitanStepper,
  title: 'Layout/TitanStepper',
  tags: ['autodocs'],
  parameters: {
    backgrounds: {
      default: 'dark-green',
      values: [
        { name: 'dark-green', value: '#003822' },
        { name: 'light', value: '#f9fafb' },
      ],
    },
  },
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The current active step value (v-model)',
      table: {
        type: { summary: 'string | number' },
      },
    },
    steps: {
      control: 'object',
      description: 'Array of step objects with label and value',
      table: {
        type: { summary: 'StepperOption[]' },
      },
    },
    direction: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'Layout direction for the stepper',
      table: {
        type: { summary: 'horizontal | vertical' },
        defaultValue: { summary: 'horizontal' },
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Size variant for the step pills',
      table: {
        type: { summary: 'sm | md | lg' },
        defaultValue: { summary: 'md' },
      },
    },
    class: {
      control: 'text',
      description: 'Additional CSS classes',
      table: {
        type: { summary: 'string' },
      },
    },
  },
} satisfies Meta<typeof TitanStepper>;

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

/**
 * Default horizontal stepper with 4 steps, second step active.
 * This is the typical mobile/small screen layout.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('details');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Vertical stepper layout matching Figma desktop design.
 * First step is active with purple background.
 */
export const VerticalLayout: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('basics');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'vertical',
    size: 'md',
  },
};

/**
 * Small size variant with compact pills.
 */
export const SmallSize: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('requests');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'sm',
  },
};

/**
 * Medium size variant (default) with standard pills.
 * Matches the Figma design specifications.
 */
export const MediumSize: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('details');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Large size variant with bigger pills.
 */
export const LargeSize: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('basics');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'lg',
  },
};

/**
 * First step active - beginning of the process.
 */
export const FirstStepActive: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('basics');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Middle step active - progress through the flow.
 */
export const MiddleStepActive: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('requests');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Last step active - end of the process.
 */
export const LastStepActive: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('providers');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Many steps to test wrapping and layout with more items.
 */
export const ManySteps: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('step4');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Step 1', value: 'step1' },
      { label: 'Step 2', value: 'step2' },
      { label: 'Step 3', value: 'step3' },
      { label: 'Step 4', value: 'step4' },
      { label: 'Step 5', value: 'step5' },
      { label: 'Step 6', value: 'step6' },
      { label: 'Step 7', value: 'step7' },
      { label: 'Step 8', value: 'step8' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};

/**
 * Vertical layout with many steps.
 */
export const VerticalManySteps: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('step3');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Step 1', value: 'step1' },
      { label: 'Step 2', value: 'step2' },
      { label: 'Step 3', value: 'step3' },
      { label: 'Step 4', value: 'step4' },
      { label: 'Step 5', value: 'step5' },
      { label: 'Step 6', value: 'step6' },
    ],
    direction: 'vertical',
    size: 'md',
  },
};

/**
 * Stepper with custom CSS classes applied.
 */
export const WithCustomClasses: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('details');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
    class: 'max-w-xl mx-auto',
  },
};

/**
 * Interactive playground for testing all stepper configurations.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanStepper },
    setup() {
      const currentStep = ref<string | number>('details');
      return { args, currentStep };
    },
    template: '<TitanStepper v-bind="args" v-model="currentStep" />',
  }),
  args: {
    steps: [
      { label: 'Basics 1/3', value: 'basics' },
      { label: 'Your Details', value: 'details' },
      { label: 'Requests', value: 'requests' },
      { label: 'Providers', value: 'providers' },
    ],
    direction: 'horizontal',
    size: 'md',
  },
};