import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { ChevronRight, Loader2, Mail, Plus } from "@lucide/vue"
import { componentDoc } from "@/lib/storybook"
import { Button } from "."

const meta = {
  title: "UI/Button",
  component: Button,
  tags: ["autodocs"],
  parameters: componentDoc("Button", {
    usage: `<Button variant="default">Click me</Button>
<Button variant="outline"><Mail /> Email</Button>`,
  }),
  argTypes: {
    variant: {
      control: "select",
      options: [
        "default",
        "secondary",
        "destructive",
        "outline",
        "ghost",
        "link",
        "success",
        "warning",
        "info",
      ],
      description: "Visual style.",
    },
    size: {
      control: "select",
      options: ["default", "sm", "lg", "xl", "icon", "icon-sm", "icon-lg"],
      description: "Size.",
    },
    asChild: {
      control: "boolean",
      description: "Render as the slot's root element (reka-ui Primitive).",
    },
  },
  args: { variant: "default", size: "default" },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Button },
    setup() {
      return { args }
    },
    template: '<Button v-bind="args">Button</Button>',
  }),
}

export const AllVariants: Story = {
  name: "All Variants",
  render: () => ({
    components: { Button },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <Button variant="default">Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
        <Button variant="success">Success</Button>
        <Button variant="warning">Warning</Button>
        <Button variant="info">Info</Button>
      </div>
    `,
  }),
}

export const AllSizes: Story = {
  name: "All Sizes",
  render: () => ({
    components: { Button, Plus },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <Button size="sm">Small</Button>
        <Button size="default">Default</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">Extra Large</Button>
        <Button size="icon" aria-label="Add"><Plus /></Button>
        <Button size="icon-sm" aria-label="Add small"><Plus /></Button>
        <Button size="icon-lg" aria-label="Add large"><Plus /></Button>
      </div>
    `,
  }),
}

export const WithIconLeft: Story = {
  name: "With Icon (Left)",
  render: () => ({
    components: { Button, Mail },
    template: '<Button><Mail /> Login with Email</Button>',
  }),
}

export const WithIconRight: Story = {
  name: "With Icon (Right)",
  render: () => ({
    components: { Button, ChevronRight },
    template: '<Button>Next <ChevronRight /></Button>',
  }),
}

export const Loading: Story = {
  name: "Loading",
  render: () => ({
    components: { Button, Loader2 },
    template: '<Button disabled><Loader2 class="animate-spin" /> Please wait</Button>',
  }),
}

export const Disabled: Story = {
  name: "Disabled (All Variants)",
  render: () => ({
    components: { Button },
    template: `
      <div class="flex flex-wrap items-center gap-3">
        <Button disabled>Default</Button>
        <Button variant="secondary" disabled>Secondary</Button>
        <Button variant="destructive" disabled>Destructive</Button>
        <Button variant="outline" disabled>Outline</Button>
        <Button variant="ghost" disabled>Ghost</Button>
      </div>
    `,
  }),
}

export const AsAnchor: Story = {
  name: "As <a>",
  render: () => ({
    components: { Button },
    template: '<Button as="a" href="https://example.com" target="_blank">Open external</Button>',
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Button, Mail, ChevronRight, Loader2 },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
          <div class="flex flex-wrap items-center gap-3">
            <Button>Default</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="destructive">Destructive</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="link">Link</Button>
            <Button variant="success">Success</Button>
            <Button variant="warning">Warning</Button>
            <Button variant="info">Info</Button>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">With icons</h3>
          <div class="flex flex-wrap items-center gap-3">
            <Button><Mail /> Email</Button>
            <Button variant="outline">Next <ChevronRight /></Button>
            <Button disabled><Loader2 class="animate-spin" /> Loading</Button>
          </div>
        </section>
      </div>
    `,
  }),
}
