import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Card",
  component: Card,
  tags: ["autodocs"],
  parameters: componentDoc("Card"),
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "bordered", "elevated"],
      description: "Visual style.",
    },
    padding: {
      control: "select",
      options: ["none", "sm", "default", "lg"],
      description: "Padding applied to the card root.",
    },
  },
  args: { variant: "default", padding: "default" },
} satisfies Meta<typeof Card>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Card, CardContent },
    setup() {
      return { args }
    },
    template: `
      <Card v-bind="args" class="max-w-sm">
        <CardContent class="p-6">A simple card body.</CardContent>
      </Card>
    `,
  }),
}

export const WithHeader: Story = {
  name: "With Header",
  render: () => ({
    components: { Card, CardHeader, CardTitle, CardDescription, CardContent },
    template: `
      <Card class="max-w-sm">
        <CardHeader>
          <CardTitle>Account settings</CardTitle>
          <CardDescription>Manage how your account behaves.</CardDescription>
        </CardHeader>
        <CardContent>Body content here.</CardContent>
      </Card>
    `,
  }),
}

export const WithFooter: Story = {
  name: "With Footer",
  render: () => ({
    components: { Card, CardHeader, CardTitle, CardContent, CardFooter },
    template: `
      <Card class="max-w-sm">
        <CardHeader>
          <CardTitle>Project</CardTitle>
        </CardHeader>
        <CardContent>Some content.</CardContent>
        <CardFooter class="justify-end gap-2">
          <span class="text-sm text-muted-foreground">Saved 1m ago</span>
        </CardFooter>
      </Card>
    `,
  }),
}

export const AllVariants: Story = {
  name: "All Variants",
  render: () => ({
    components: { Card, CardHeader, CardTitle, CardContent },
    template: `
      <div class="grid gap-4 md:grid-cols-3">
        <Card variant="default">
          <CardHeader><CardTitle>Default</CardTitle></CardHeader>
          <CardContent>Standard border + shadow.</CardContent>
        </Card>
        <Card variant="bordered">
          <CardHeader><CardTitle>Bordered</CardTitle></CardHeader>
          <CardContent>Thicker border, no shadow.</CardContent>
        </Card>
        <Card variant="elevated">
          <CardHeader><CardTitle>Elevated</CardTitle></CardHeader>
          <CardContent>Larger drop shadow.</CardContent>
        </Card>
      </div>
    `,
  }),
}

export const AllPaddings: Story = {
  name: "All Paddings",
  render: () => ({
    components: { Card },
    template: `
      <div class="grid gap-4 md:grid-cols-2">
        <Card padding="none">none</Card>
        <Card padding="sm">sm</Card>
        <Card padding="default">default</Card>
        <Card padding="lg">lg</Card>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter },
    template: `
      <div class="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Notifications</CardTitle>
            <CardDescription>You have 3 unread messages.</CardDescription>
          </CardHeader>
          <CardContent>Notification list here</CardContent>
          <CardFooter>
            <span class="text-sm text-muted-foreground">Last updated now</span>
          </CardFooter>
        </Card>
        <Card variant="elevated">
          <CardHeader>
            <CardTitle>Storage</CardTitle>
            <CardDescription>43.2 GB used of 100 GB</CardDescription>
          </CardHeader>
          <CardContent>Storage details</CardContent>
        </Card>
      </div>
    `,
  }),
}
