import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from 'storybook/test';
import { Button } from './button';
import { Plus, Trash2, Settings, ArrowRight } from 'lucide-react';
import React from 'react';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  render: args => <Button {...args} />,
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'default',
        'secondary',
        'outline',
        'ghost',
        'destructive',
        'link',
        'success',
        'info',
        'warning',
      ],
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'lg', 'icon'],
    },
    disabled: {
      control: 'boolean',
    },
  },
};

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

export const Default: Story = {
  args: {
    children: 'Button',
    variant: 'default',
    size: 'default',
  },
};

export const Secondary: Story = {
  args: {
    children: 'Secondary Button',
    variant: 'secondary',
  },
};

export const Outline: Story = {
  args: {
    children: 'Outline Button',
    variant: 'outline',
  },
};

export const Destructive: Story = {
  args: {
    children: 'Delete Item',
    variant: 'destructive',
  },
};

export const Ghost: Story = {
  args: {
    children: 'Ghost Button',
    variant: 'ghost',
  },
};

export const Link: Story = {
  args: {
    children: 'Link Button',
    variant: 'link',
  },
};

export const Small: Story = {
  args: {
    children: 'Small Button',
    size: 'sm',
  },
};

export const Large: Story = {
  args: {
    children: 'Large Button',
    size: 'lg',
  },
};

export const WithIcon: Story = {
  render: args => (
    <Button {...args} className="gap-2">
      <Plus className="size-4" />
      New Member
    </Button>
  ),
};

export const IconOnly: Story = {
  args: {
    size: 'icon',
    variant: 'outline',
    'aria-label': 'Settings',
  },
  render: args => (
    <Button {...args}>
      <Settings className="size-4" />
    </Button>
  ),
};

export const DestructiveWithIcon: Story = {
  render: args => (
    <Button {...args} variant="destructive" className="gap-2">
      <Trash2 className="size-4" />
      Delete Account
    </Button>
  ),
};

export const Success: Story = {
  render: args => (
    <Button {...args} variant="success">
      Success
    </Button>
  ),
};

export const Info: Story = {
  render: args => (
    <Button {...args} variant="info">
      Info
    </Button>
  ),
};

export const Warning: Story = {
  render: args => (
    <Button {...args} variant="warning">
      Warning
    </Button>
  ),
};

export const Loading: Story = {
  args: {
    disabled: true,
  },
  render: args => (
    <Button {...args} className="gap-2">
      <div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
      Loading...
    </Button>
  ),
};

export const Clickable: Story = {
  args: { children: 'Click me' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button', { name: 'Click me' });
    await expect(button).toBeInTheDocument();
    await expect(button).not.toBeDisabled();
    await userEvent.click(button);
    await expect(button).toBeInTheDocument();
  },
};

export const DisabledState: Story = {
  args: { children: 'Disabled', disabled: true },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button', { name: 'Disabled' });
    await expect(button).toBeDisabled();
    await expect(button).toHaveAttribute('disabled');
  },
};