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

const meta = {
  component: TitanProgressBar,
  title: 'UI/TitanProgressBar',
  tags: ['autodocs'],
  argTypes: {
    current: {
      control: 'number',
      description: 'Current progress value',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '0' },
      },
    },
    total: {
      control: 'number',
      description: 'Total/maximum value',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '1' },
      },
    },
  },
  parameters: {
    backgrounds: {
      default: 'dark',
      values: [
        { name: 'dark', value: '#1a1a1a' },
        { name: 'darker', value: '#0a0a0a' },
      ],
    },
    layout: 'padded',
    docs: {
      description: {
        component: 'A full-width progress bar component that displays current progress out of a total. Designed for dark backgrounds with animated transitions.',
      },
    },
  },
} satisfies Meta<typeof TitanProgressBar>;

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

/**
 * Default progress bar showing 3 out of 8 steps (~37% progress).
 * This matches the original Figma design reference.
 */
export const Default: Story = {
  args: {
    current: 3,
    total: 8,
  },
};

/**
 * Low progress scenario (1 out of 10 steps, 10% complete).
 * Shows the visual appearance at the beginning of a multi-step process.
 */
export const LowProgress: Story = {
  args: {
    current: 1,
    total: 10,
  },
};

/**
 * Medium progress scenario (5 out of 10 steps, 50% complete).
 * Shows the visual appearance at the midpoint of a process.
 */
export const MediumProgress: Story = {
  args: {
    current: 5,
    total: 10,
  },
};

/**
 * High progress scenario (9 out of 10 steps, 90% complete).
 * Shows the visual appearance near completion.
 */
export const HighProgress: Story = {
  args: {
    current: 9,
    total: 10,
  },
};

/**
 * Completed progress (10 out of 10 steps, 100% complete).
 * Shows the full bar when the task is complete.
 */
export const Complete: Story = {
  args: {
    current: 10,
    total: 10,
  },
};

/**
 * Zero progress (0 out of 8 steps, 0% complete).
 * Shows the empty state at the start.
 */
export const ZeroProgress: Story = {
  args: {
    current: 0,
    total: 8,
  },
};

/**
 * Validation scenario where current exceeds total.
 * The component should cap at 100% and log a warning.
 * Check the console for the validation warning.
 */
export const OverLimit: Story = {
  args: {
    current: 15,
    total: 10,
  },
  parameters: {
    docs: {
      description: {
        story: 'When current > total, the progress bar displays 100% and logs a console warning for debugging.',
      },
    },
  },
};

/**
 * Very long total number (3 out of 250 steps).
 * Tests label formatting with larger numbers.
 */
export const LongNumbers: Story = {
  args: {
    current: 3,
    total: 250,
  },
};

/**
 * Single digit progress (5 out of 9).
 * Tests alignment with single-digit numbers.
 */
export const SingleDigits: Story = {
  args: {
    current: 5,
    total: 9,
  },
};

/**
 * Interactive playground for all progress bar props.
 * Use the Controls panel to experiment with different current/total values.
 * Try setting current > total to see validation behavior.
 */
export const Playground: Story = {
  args: {
    current: 3,
    total: 8,
  },
};