import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { AlertCircle, AlertTriangle, CheckCircle, Info, Terminal } from "@lucide/vue"
import { Alert, AlertDescription, AlertTitle } from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Alert",
  component: Alert,
  tags: ["autodocs"],
  parameters: componentDoc("Alert"),
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "destructive", "success", "warning", "info"],
      description: "Visual style.",
    },
  },
  args: { variant: "default" },
} satisfies Meta<typeof Alert>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Alert, AlertTitle, AlertDescription, Terminal },
    setup() {
      return { args }
    },
    template: `
      <Alert v-bind="args">
        <Terminal />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>You can add new components to your project.</AlertDescription>
      </Alert>
    `,
  }),
}

export const Variants: Story = {
  name: "All Variants",
  render: () => ({
    components: { Alert, AlertTitle, AlertDescription, AlertCircle, AlertTriangle, CheckCircle, Info, Terminal },
    template: `
      <div class="space-y-3">
        <Alert variant="default">
          <Terminal />
          <AlertTitle>Default</AlertTitle>
          <AlertDescription>Neutral message.</AlertDescription>
        </Alert>
        <Alert variant="destructive">
          <AlertCircle />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>Something went wrong.</AlertDescription>
        </Alert>
        <Alert variant="success">
          <CheckCircle />
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>Your changes were saved.</AlertDescription>
        </Alert>
        <Alert variant="warning">
          <AlertTriangle />
          <AlertTitle>Warning</AlertTitle>
          <AlertDescription>Please double check the input.</AlertDescription>
        </Alert>
        <Alert variant="info">
          <Info />
          <AlertTitle>FYI</AlertTitle>
          <AlertDescription>Just so you know.</AlertDescription>
        </Alert>
      </div>
    `,
  }),
}

export const WithIcon: Story = {
  name: "With Icon",
  render: () => ({
    components: { Alert, AlertTitle, AlertDescription, Info },
    template: `
      <Alert variant="info">
        <Info />
        <AlertTitle>Information</AlertTitle>
        <AlertDescription>Icon-prefixed alert with a leading icon.</AlertDescription>
      </Alert>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Alert, AlertTitle, AlertDescription, AlertCircle, AlertTriangle, CheckCircle, Info },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
          <div class="space-y-3">
            <Alert variant="default">
              <Info />
              <AlertTitle>Default</AlertTitle>
              <AlertDescription>Basic info.</AlertDescription>
            </Alert>
            <Alert variant="destructive">
              <AlertCircle />
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>Action failed.</AlertDescription>
            </Alert>
            <Alert variant="success">
              <CheckCircle />
              <AlertTitle>Saved</AlertTitle>
              <AlertDescription>Your record was created.</AlertDescription>
            </Alert>
            <Alert variant="warning">
              <AlertTriangle />
              <AlertTitle>Caution</AlertTitle>
              <AlertDescription>Be careful with this action.</AlertDescription>
            </Alert>
            <Alert variant="info">
              <Info />
              <AlertTitle>Tip</AlertTitle>
              <AlertDescription>Did you know there is a shortcut for this?</AlertDescription>
            </Alert>
          </div>
        </section>
      </div>
    `,
  }),
}
