import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./button";
import { Search, Plus, Trash2, Download, ChevronRight } from "lucide-react";

const meta: Meta<typeof Button> = {
  title: "UI/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "select",
      options: ["primary", "secondary", "outline", "ghost", "danger"],
      description: "Button visual style variant",
    },
    size: {
      control: "select",
      options: ["sm", "md", "lg"],
      description: "Button size variant",
    },
    isLoading: {
      control: "boolean",
      description: "Show loading spinner",
    },
    disabled: {
      control: "boolean",
      description: "Disable the button",
    },
  },
};

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

export const Primary: Story = {
  args: {
    variant: "primary",
    children: "Primary Button",
  },
};

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

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

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

export const Danger: Story = {
  args: {
    variant: "danger",
    children: "Danger Button",
  },
};

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="primary" size="sm">
        Small
      </Button>
      <Button variant="primary" size="md">
        Medium
      </Button>
      <Button variant="primary" size="lg">
        Large
      </Button>
    </div>
  ),
};

export const WithIcons: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="primary" leftIcon={<Search size={16} />}>
        Search
      </Button>
      <Button variant="secondary" rightIcon={<ChevronRight size={16} />}>
        Continue
      </Button>
      <Button variant="outline" leftIcon={<Download size={16} />} rightIcon={<ChevronRight size={16} />}>
        Download
      </Button>
      <Button variant="danger" leftIcon={<Trash2 size={16} />}>
        Delete
      </Button>
    </div>
  ),
};

export const Loading: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="primary" isLoading>
        Loading...
      </Button>
      <Button variant="secondary" isLoading>
        Processing
      </Button>
      <Button variant="danger" isLoading leftIcon={<Trash2 size={16} />}>
        Deleting...
      </Button>
    </div>
  ),
};

export const Disabled: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="primary" disabled>
        Disabled Primary
      </Button>
      <Button variant="secondary" disabled>
        Disabled Secondary
      </Button>
      <Button variant="outline" disabled>
        Disabled Outline
      </Button>
      <Button variant="ghost" disabled>
        Disabled Ghost
      </Button>
      <Button variant="danger" disabled>
        Disabled Danger
      </Button>
    </div>
  ),
};

export const AllVariants: Story = {
  render: () => (
    <div className="space-y-6">
      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Primary</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="primary" size="sm">Small</Button>
          <Button variant="primary" size="md">Medium</Button>
          <Button variant="primary" size="lg">Large</Button>
          <Button variant="primary" isLoading>Loading</Button>
          <Button variant="primary" disabled>Disabled</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Secondary</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="secondary" size="sm">Small</Button>
          <Button variant="secondary" size="md">Medium</Button>
          <Button variant="secondary" size="lg">Large</Button>
          <Button variant="secondary" isLoading>Loading</Button>
          <Button variant="secondary" disabled>Disabled</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Outline</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="outline" size="sm">Small</Button>
          <Button variant="outline" size="md">Medium</Button>
          <Button variant="outline" size="lg">Large</Button>
          <Button variant="outline" isLoading>Loading</Button>
          <Button variant="outline" disabled>Disabled</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Ghost</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="ghost" size="sm">Small</Button>
          <Button variant="ghost" size="md">Medium</Button>
          <Button variant="ghost" size="lg">Large</Button>
          <Button variant="ghost" isLoading>Loading</Button>
          <Button variant="ghost" disabled>Disabled</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Danger</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="danger" size="sm">Small</Button>
          <Button variant="danger" size="md">Medium</Button>
          <Button variant="danger" size="lg">Large</Button>
          <Button variant="danger" isLoading>Loading</Button>
          <Button variant="danger" disabled>Disabled</Button>
        </div>
      </div>
    </div>
  ),
};

export const WithIconsAll: Story = {
  render: () => (
    <div className="space-y-6">
      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Left Icon</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="primary" leftIcon={<Search size={16} />}>Search</Button>
          <Button variant="secondary" leftIcon={<Plus size={16} />}>Add New</Button>
          <Button variant="outline" leftIcon={<Download size={16} />}>Download</Button>
          <Button variant="ghost" leftIcon={<ChevronRight size={16} />}>Navigate</Button>
          <Button variant="danger" leftIcon={<Trash2 size={16} />}>Delete</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Right Icon</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="primary" rightIcon={<ChevronRight size={16} />}>Continue</Button>
          <Button variant="secondary" rightIcon={<Download size={16} />}>Export</Button>
          <Button variant="outline" rightIcon={<ChevronRight size={16} />}>Next</Button>
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-white">Both Icons</h3>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="primary" leftIcon={<Search size={16} />} rightIcon={<ChevronRight size={16} />}>
            Search & Go
          </Button>
          <Button variant="secondary" leftIcon={<Download size={16} />} rightIcon={<ChevronRight size={16} />}>
            Download All
          </Button>
        </div>
      </div>
    </div>
  ),
};
