import type { Meta, StoryObj } from "@storybook/react"
import { Card } from "./Card"

/**
 * Displays a card container for organizing content.
 *
 * ## Props
 * - `size`: "1" | "2" | "3" | "4" | "5" (default: "2")
 * - `variant`: "surface" | "classic" | "ghost" (default: "surface")
 * - `asChild`: boolean
 */
const meta = {
  title: "base/containment/Card",
  component: Card,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The content of the card",
    },
    size: {
      control: "select",
      options: ["1", "2", "3", "4", "5"],
      description: "The size of the card, affecting padding and corner radius",
    },
    variant: {
      control: "select",
      options: ["surface", "classic", "ghost"],
      description: "The visual style of the card",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "Card content",
    style: { width: 350 },
  },
} satisfies Meta<typeof Card>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default card with surface variant.
 */
export const Default: Story = {}

/**
 * Card with classic variant.
 */
export const Classic: Story = {
  args: {
    variant: "classic",
  },
}

/**
 * Card with ghost variant.
 */
export const Ghost: Story = {
  args: {
    variant: "ghost",
  },
}

/**
 * Card with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-4">
      <Card size="1" style={{ width: 350 }}>
        <p>Size 1 - Small padding and radius</p>
      </Card>
      <Card size="2" style={{ width: 350 }}>
        <p>Size 2 - Default padding and radius</p>
      </Card>
      <Card size="3" style={{ width: 350 }}>
        <p>Size 3 - Large padding and radius</p>
      </Card>
      <Card size="4" style={{ width: 350 }}>
        <p>Size 4 - Extra large padding and radius</p>
      </Card>
      <Card size="5" style={{ width: 350 }}>
        <p>Size 5 - Maximum padding and radius</p>
      </Card>
    </div>
  ),
}

/**
 * Card with header, content, and footer structure.
 */
export const WithStructure: Story = {
  render: () => (
    <Card style={{ width: 400 }}>
      <div className="space-y-4">
        {/* Header */}
        <div>
          <h3 className="text-lg font-semibold">Card Title</h3>
          <p className="text-sm text-gray-600">Card subtitle or description</p>
        </div>

        {/* Content */}
        <div>
          <p>
            This is the main content area of the card. You can put any content here including text,
            images, forms, or other components.
          </p>
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-2">
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Cancel
          </button>
          <button
            type="button"
            className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Save
          </button>
        </div>
      </div>
    </Card>
  ),
}

/**
 * Pricing card example.
 */
export const PricingCard: Story = {
  render: () => (
    <Card size="3" style={{ width: 300 }}>
      <div className="text-center space-y-4">
        <div>
          <h3 className="text-2xl font-bold">Pro Plan</h3>
          <p className="text-gray-600">Perfect for growing teams</p>
        </div>

        <div>
          <span className="text-4xl font-bold">$24</span>
          <span className="text-gray-600">/month</span>
        </div>

        <ul className="space-y-2 text-left">
          <li className="flex items-center">
            <span className="text-green-500 mr-2">✓</span>
            10 users included
          </li>
          <li className="flex items-center">
            <span className="text-green-500 mr-2">✓</span>
            2GB of storage
          </li>
          <li className="flex items-center">
            <span className="text-green-500 mr-2">✓</span>
            Email support
          </li>
        </ul>

        <button
          type="button"
          className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Get Started
        </button>
      </div>
    </Card>
  ),
}

/**
 * Profile card example.
 */
export const ProfileCard: Story = {
  render: () => (
    <Card style={{ width: 300 }}>
      <div className="text-center space-y-4">
        <div className="w-16 h-16 bg-gray-300 rounded-full mx-auto flex items-center justify-center">
          <span className="text-xl font-semibold text-gray-600">JD</span>
        </div>

        <div>
          <h3 className="text-lg font-semibold">John Doe</h3>
          <p className="text-gray-600">Product Designer</p>
        </div>

        <p className="text-sm text-gray-600">
          Passionate about creating beautiful and functional user experiences.
        </p>

        <div className="flex gap-2">
          <button type="button" className="flex-1 py-2 border rounded hover:bg-gray-50">
            Message
          </button>
          <button
            type="button"
            className="flex-1 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Connect
          </button>
        </div>
      </div>
    </Card>
  ),
}

/**
 * Feature card example.
 */
export const FeatureCard: Story = {
  render: () => (
    <Card style={{ width: 300 }}>
      <div className="space-y-3">
        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
          <span className="text-blue-600 text-xl">⚡</span>
        </div>

        <h3 className="text-lg font-semibold">Lightning Fast</h3>

        <p className="text-gray-600">
          Experience blazing fast performance with our optimized architecture and efficient
          algorithms.
        </p>

        <a href="/learn-more" className="text-blue-600 hover:text-blue-700 text-sm font-medium">
          Learn more →
        </a>
      </div>
    </Card>
  ),
}

/**
 * Card grid layout.
 */
export const CardGrid: Story = {
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {[1, 2, 3, 4, 5, 6].map(i => (
        <Card key={i}>
          <div className="space-y-2">
            <h4 className="font-semibold">Feature {i}</h4>
            <p className="text-sm text-gray-600">
              Description for feature number {i}. This card is part of a responsive grid layout.
            </p>
          </div>
        </Card>
      ))}
    </div>
  ),
}

/**
 * Card with image.
 */
export const WithImage: Story = {
  render: () => (
    <Card style={{ width: 350 }}>
      <div className="space-y-4">
        <div className="w-full h-48 bg-gray-200 rounded overflow-hidden">
          <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
            <span className="text-white text-lg">Image Placeholder</span>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-semibold">Card with Image</h3>
          <p className="text-gray-600">
            This card includes an image at the top followed by content below.
          </p>
        </div>

        <div className="flex gap-2">
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            View
          </button>
          <button
            type="button"
            className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Download
          </button>
        </div>
      </div>
    </Card>
  ),
}

/**
 * Interactive card with hover effects.
 */
export const Interactive: Story = {
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <Card
        className="cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
        style={{ width: 300 }}
      >
        <div className="space-y-3">
          <h3 className="text-lg font-semibold">Hover Me</h3>
          <p className="text-gray-600">
            This card has hover effects. Try hovering over it to see the animation.
          </p>
        </div>
      </Card>

      <Card
        className="cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-1"
        style={{ width: 300 }}
      >
        <div className="space-y-3">
          <h3 className="text-lg font-semibold">Lift Effect</h3>
          <p className="text-gray-600">This card lifts up on hover instead of scaling.</p>
        </div>
      </Card>
    </div>
  ),
}