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

const meta = {
  component: TitanButton,
  title: 'UI/TitanButton',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'outline'],
      description: 'Button variant - matches Figma design',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'default' },
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Button size',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'md' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    type: {
      control: 'select',
      options: ['button', 'submit', 'reset'],
      description: 'Button type attribute',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'button' },
      },
    },
    showArrow: {
      control: 'boolean',
      description: 'Whether to show the arrow in the button text',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    onClick: {
      action: 'clicked',
      description: 'Emitted when button is clicked',
    },
  },
  parameters: {
    backgrounds: {
      default: 'dark',
    },
  },
} satisfies Meta<typeof TitanButton>;

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

/**
 * Default button variant with yellow background and green text.
 * This is the primary call-to-action style.
 */
export const Default: Story = {
  args: {
    variant: 'default',
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      return { args };
    },
    template: '<TitanButton v-bind="args">LOOKS GOOD</TitanButton>',
  }),
};

/**
 * Outline button variant with transparent background and yellow border.
 * This is the secondary style.
 */
export const Outline: Story = {
  args: {
    variant: 'outline',
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      return { args };
    },
    template: '<TitanButton v-bind="args">USE ORIGINAL</TitanButton>',
  }),
};

/**
 * Default button in disabled state.
 * Shows reduced opacity and prevents interaction.
 */
export const DisabledDefault: Story = {
  args: {
    variant: 'default',
    disabled: true,
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      return { args };
    },
    template: '<TitanButton v-bind="args">DISABLED</TitanButton>',
  }),
};

/**
 * Outline button in disabled state.
 */
export const DisabledOutline: Story = {
  args: {
    variant: 'outline',
    disabled: true,
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      return { args };
    },
    template: '<TitanButton v-bind="args">DISABLED</TitanButton>',
  }),
};

/**
 * Button with arrow enabled.
 * Shows the arrow in the default text (uses defaultText computed property).
 */
export const WithArrow: Story = {
  args: {
    variant: 'default',
    showArrow: true,
  },
};

/**
 * Outline button with arrow enabled.
 * Shows the arrow in the default text (uses defaultText computed property).
 */
export const OutlineWithArrow: Story = {
  args: {
    variant: 'outline',
    showArrow: true,
  },
};

/**
 * Submit button type for forms.
 * Demonstrates type prop usage.
 */
export const SubmitButton: Story = {
  args: {
    variant: 'default',
    type: 'submit',
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      const handleSubmit = () => {
        console.log('Form submitted!');
      };
      return { args, handleSubmit };
    },
    template: `
      <form @submit.prevent="handleSubmit">
        <TitanButton v-bind="args">SUBMIT FORM</TitanButton>
      </form>
    `,
  }),
};

/**
 * Interactive playground for all button props.
 * Use the Controls panel to experiment with different combinations.
 */
export const Playground: Story = {
  args: {
    variant: 'default',
    disabled: false,
    type: 'button',
  },
  render: (args) => ({
    components: { TitanButton },
    setup() {
      return { args };
    },
    template: '<TitanButton v-bind="args" />',
  }),
};