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

/**
 * Displays additional information when hovering over an element.
 *
 * ## Props
 * - `Root`: Container for the hover card
 * - `Trigger`: Element that triggers the hover card
 * - `Content`: Content displayed in the hover card
 *
 * ### Content Props
 * - `size`: "1" | "2" | "3" (default: "2")
 * - `width`: string (custom width)
 * - `height`: string (custom height)
 * - `minWidth`: string (minimum width)
 * - `maxWidth`: string (maximum width)
 * - `minHeight`: string (minimum height)
 * - `maxHeight`: string (maximum height)
 */
const meta = {
  title: "base/containment/HoverCard",
  component: HoverCard.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof HoverCard.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic hover card with simple content.
 */
export const Default: Story = {
  render: () => (
    <HoverCard.Root>
      <HoverCard.Trigger>
        <button
          type="button"
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Hover me
        </button>
      </HoverCard.Trigger>
      <HoverCard.Content>
        <div className="p-4">
          <h3 className="font-semibold mb-2">Additional Information</h3>
          <p className="text-sm text-gray-600">
            This is additional information that appears when you hover over the trigger element.
          </p>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  ),
}

/**
 * Hover card with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4">
      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Small
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content size="1">
          <div className="p-3">
            <p className="text-xs">Small hover card content</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Medium
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content size="2">
          <div className="p-4">
            <p className="text-sm">Medium hover card content</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Large
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content size="3">
          <div className="p-5">
            <p className="text-base">Large hover card content</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>
    </div>
  ),
}

/**
 * Hover card with custom width.
 */
export const CustomWidth: Story = {
  render: () => (
    <div className="flex gap-4">
      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Narrow
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content width="200px">
          <div className="p-4">
            <h3 className="font-semibold mb-2">Narrow Card</h3>
            <p className="text-sm text-gray-600">
              This hover card has a custom narrow width of 200px.
            </p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Wide
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content width="400px">
          <div className="p-4">
            <h3 className="font-semibold mb-2">Wide Card</h3>
            <p className="text-sm text-gray-600">
              This hover card has a custom wide width of 400px, allowing for more content to be
              displayed.
            </p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>
    </div>
  ),
}

/**
 * User profile hover card.
 */
export const UserProfile: Story = {
  render: () => (
    <HoverCard.Root>
      <HoverCard.Trigger>
        <button
          type="button"
          className="flex items-center gap-2 px-3 py-1 text-sm border rounded hover:bg-gray-50"
        >
          <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
            <span className="text-xs font-semibold text-gray-600">JD</span>
          </div>
          John Doe
        </button>
      </HoverCard.Trigger>
      <HoverCard.Content width="300px">
        <div className="p-4 space-y-3">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-gray-300 rounded-full flex items-center justify-center">
              <span className="text-sm font-semibold text-gray-600">JD</span>
            </div>
            <div>
              <h3 className="font-semibold">John Doe</h3>
              <p className="text-sm text-gray-600">Product Designer</p>
            </div>
          </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 px-3 py-1 text-xs border rounded hover:bg-gray-50"
            >
              Message
            </button>
            <button
              type="button"
              className="flex-1 px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              Connect
            </button>
          </div>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  ),
}

/**
 * Product information hover card.
 */
export const ProductInfo: Story = {
  render: () => (
    <HoverCard.Root>
      <HoverCard.Trigger>
        <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
          View Product Details
        </button>
      </HoverCard.Trigger>
      <HoverCard.Content width="350px">
        <div className="p-4 space-y-3">
          <div className="flex gap-3">
            <div className="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
              <span className="text-gray-500">📱</span>
            </div>
            <div>
              <h3 className="font-semibold">iPhone 15 Pro</h3>
              <p className="text-sm text-gray-600">Latest smartphone model</p>
              <p className="text-lg font-bold text-green-600">$999</p>
            </div>
          </div>

          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">Storage:</span>
              <span>256GB</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">Color:</span>
              <span>Titanium</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">Rating:</span>
              <span>4.8/5 ⭐</span>
            </div>
          </div>

          <button
            type="button"
            className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Add to Cart
          </button>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  ),
}

/**
 * Tooltip-style hover card.
 */
export const Tooltip: Story = {
  render: () => (
    <div className="flex gap-4">
      <HoverCard.Root>
        <HoverCard.Trigger>
          <span className="cursor-help text-blue-600 underline decoration-dotted">
            What is this?
          </span>
        </HoverCard.Trigger>
        <HoverCard.Content size="1">
          <div className="p-2">
            <p className="text-xs">This is a helpful tooltip explanation.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <div className="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center cursor-help">
            <span className="text-xs">?</span>
          </div>
        </HoverCard.Trigger>
        <HoverCard.Content size="1">
          <div className="p-2">
            <p className="text-xs">Click here for more information.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>
    </div>
  ),
}

/**
 * Rich content hover card.
 */
export const RichContent: Story = {
  render: () => (
    <HoverCard.Root>
      <HoverCard.Trigger>
        <button
          type="button"
          className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
        >
          Show Rich Content
        </button>
      </HoverCard.Trigger>
      <HoverCard.Content width="400px">
        <div className="p-4 space-y-4">
          <div>
            <h3 className="text-lg font-semibold mb-2">Feature Overview</h3>
            <p className="text-sm text-gray-600 mb-3">
              Discover the powerful features that make our platform stand out from the competition.
            </p>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-sm mb-1">⚡ Fast</h4>
              <p className="text-xs text-gray-600">Lightning quick performance</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-sm mb-1">🔒 Secure</h4>
              <p className="text-xs text-gray-600">Enterprise-grade security</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-sm mb-1">📱 Responsive</h4>
              <p className="text-xs text-gray-600">Works on all devices</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-sm mb-1">🎨 Beautiful</h4>
              <p className="text-xs text-gray-600">Modern design system</p>
            </div>
          </div>

          <div className="flex gap-2">
            <button
              type="button"
              className="flex-1 py-2 px-3 text-sm border rounded hover:bg-gray-50"
            >
              Learn More
            </button>
            <button
              type="button"
              className="flex-1 py-2 px-3 text-sm bg-purple-600 text-white rounded hover:bg-purple-700"
            >
              Get Started
            </button>
          </div>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  ),
}

/**
 * Multiple hover cards.
 */
export const MultipleCards: Story = {
  render: () => (
    <div className="flex gap-4">
      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Settings
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content>
          <div className="p-4">
            <h3 className="font-semibold mb-2">Settings</h3>
            <p className="text-sm text-gray-600">
              Configure your preferences and account settings.
            </p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Help
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content>
          <div className="p-4">
            <h3 className="font-semibold mb-2">Help Center</h3>
            <p className="text-sm text-gray-600">
              Find answers to common questions and get support.
            </p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>

      <HoverCard.Root>
        <HoverCard.Trigger>
          <button type="button" className="px-3 py-1 text-sm border rounded hover:bg-gray-50">
            Profile
          </button>
        </HoverCard.Trigger>
        <HoverCard.Content>
          <div className="p-4">
            <h3 className="font-semibold mb-2">User Profile</h3>
            <p className="text-sm text-gray-600">View and edit your profile information.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Root>
    </div>
  ),
}