import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import { Button as NychButton } from '@nychthemeron/library'

const meta = {
  title: 'Components/Button',
  component: NychButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
      description: 'Button color variant',
    },
    size: {
      control: { type: 'select' },
      options: ['default', 'sm', 'lg', 'icon'],
      description: 'Button size',
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the button',
    },
    loading: {
      control: { type: 'boolean' },
      description: 'Show loading state',
    },
  },
} satisfies Meta<typeof NychButton>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: { variant: 'primary' },
  render: (args) => ({
    components: { NychButton },
    setup: () => ({ args }),
    template: `<NychButton v-bind="args">Summon the Oracle</NychButton>`,
  }),
}

export const AllVariants: Story = {
  render: () => ({
    components: { NychButton },
    template: `
      <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
        <NychButton variant="primary">Primary</NychButton>
        <NychButton variant="secondary">Secondary</NychButton>
        <NychButton variant="info">Info</NychButton>
        <NychButton variant="success">Success</NychButton>
        <NychButton variant="warning">Warning</NychButton>
        <NychButton variant="danger">Danger</NychButton>
      </div>
    `,
  }),
}

export const Sizes: Story = {
  render: () => ({
    components: { NychButton },
    template: `
      <div style="display: flex; gap: 1rem; align-items: center;">
        <NychButton size="sm">Small</NychButton>
        <NychButton size="default">Default</NychButton>
        <NychButton size="lg">Large</NychButton>
      </div>
    `,
  }),
}

export const Disabled: Story = {
  args: { disabled: true },
  render: (args) => ({
    components: { NychButton },
    setup: () => ({ args }),
    template: `<NychButton v-bind="args">Disabled</NychButton>`,
  }),
}

export const Loading: Story = {
  args: { loading: true },
  render: (args) => ({
    components: { NychButton },
    setup: () => ({ args }),
    template: `<NychButton v-bind="args">Ask</NychButton>`,
  }),
}

export const Interactive: Story = {
  render: () => ({
    components: { NychButton },
    setup() {
      const clickCount = ref(0)
      const isLoading = ref(false)

      const handleClick = () => {
        clickCount.value++
        isLoading.value = true
        setTimeout(() => {
          isLoading.value = false
        }, 1000)
      }

      return { clickCount, isLoading, handleClick }
    },
    template: `
      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem;">
        <NychButton @click="handleClick" :loading="isLoading">Click Me</NychButton>
        <p style="font-size: 1.2rem; font-weight: bold;">Clicks: {{ clickCount }}</p>
      </div>
    `,
  }),
}