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

/**
 * A skeleton component for loading states.
 *
 * ## Props
 * - `width`: string | number - Width of the skeleton
 * - `height`: string | number - Height of the skeleton
 */
const meta = {
  title: "base/components/Skeleton",
  component: Skeleton,
  tags: ["autodocs"],
  argTypes: {
    width: {
      control: "text",
      description: "Width of the skeleton",
    },
    height: {
      control: "text",
      description: "Height of the skeleton",
    },
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Skeleton>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic skeleton with default settings.
 */
export const Default: Story = {
  args: {
    width: "200px",
    height: "20px",
  },
}

/**
 * Different sizes of skeleton.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <div className="block text-sm font-medium mb-2">Small</div>
        <Skeleton width="100px" height="16px" />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Medium</div>
        <Skeleton width="200px" height="20px" />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Large</div>
        <Skeleton width="300px" height="24px" />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Extra Large</div>
        <Skeleton width="400px" height="32px" />
      </div>
    </div>
  ),
}

/**
 * Skeleton with different shapes.
 */
export const Shapes: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <div className="block text-sm font-medium mb-2">Rectangle</div>
        <Skeleton width="200px" height="100px" />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Circle</div>
        <div className="w-[60px] h-[60px] rounded-full overflow-hidden">
          <Skeleton width="60px" height="60px" />
        </div>
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Rounded</div>
        <div className="rounded-xl overflow-hidden">
          <Skeleton width="200px" height="100px" />
        </div>
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Pill</div>
        <div className="rounded-full overflow-hidden">
          <Skeleton width="120px" height="32px" />
        </div>
      </div>
    </div>
  ),
}

/**
 * Skeleton for text content.
 */
export const TextContent: Story = {
  render: () => (
    <div className="space-y-3 max-w-md">
      <Skeleton width="80%" height="24px" />
      <Skeleton width="100%" height="16px" />
      <Skeleton width="90%" height="16px" />
      <Skeleton width="75%" height="16px" />
      <Skeleton width="60%" height="16px" />
    </div>
  ),
}

/**
 * Skeleton for card content.
 */
export const CardContent: Story = {
  render: () => (
    <div className="border border-gray-200 rounded-lg p-6 w-80">
      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-full overflow-hidden">
            <Skeleton width="48px" height="48px" />
          </div>
          <div className="space-y-2 flex-1">
            <Skeleton width="60%" height="16px" />
            <Skeleton width="40%" height="12px" />
          </div>
        </div>
        <Skeleton width="100%" height="16px" />
        <Skeleton width="90%" height="16px" />
        <Skeleton width="80%" height="16px" />
        <div className="flex gap-2 pt-2">
          <div className="rounded overflow-hidden">
            <Skeleton width="80px" height="32px" />
          </div>
          <div className="rounded overflow-hidden">
            <Skeleton width="80px" height="32px" />
          </div>
        </div>
      </div>
    </div>
  ),
}

/**
 * Skeleton for list items.
 */
export const ListItems: Story = {
  render: () => (
    <div className="space-y-3">
      {Array.from({ length: 5 }).map((_, i) => (
        <div
          key={`list-item-${i + 1}`}
          className="flex items-center gap-3 p-3 border border-gray-200 rounded"
        >
          <div className="rounded overflow-hidden">
            <Skeleton width="40px" height="40px" />
          </div>
          <div className="space-y-2 flex-1">
            <Skeleton width="70%" height="16px" />
            <Skeleton width="50%" height="12px" />
          </div>
          <div className="rounded overflow-hidden">
            <Skeleton width="60px" height="24px" />
          </div>
        </div>
      ))}
    </div>
  ),
}

/**
 * Skeleton for form elements.
 */
export const FormElements: Story = {
  render: () => (
    <div className="space-y-4 max-w-md">
      <div>
        <Skeleton width="80px" height="16px" className="mb-2" />
        <div className="rounded overflow-hidden">
          <Skeleton width="100%" height="40px" />
        </div>
      </div>
      <div>
        <Skeleton width="60px" height="16px" className="mb-2" />
        <div className="rounded overflow-hidden">
          <Skeleton width="100%" height="40px" />
        </div>
      </div>
      <div>
        <Skeleton width="100px" height="16px" className="mb-2" />
        <div className="rounded overflow-hidden">
          <Skeleton width="100%" height="80px" />
        </div>
      </div>
      <div className="flex gap-2 pt-2">
        <div className="rounded overflow-hidden">
          <Skeleton width="100px" height="36px" />
        </div>
        <div className="rounded overflow-hidden">
          <Skeleton width="80px" height="36px" />
        </div>
      </div>
    </div>
  ),
}

/**
 * Skeleton for table content.
 */
export const TableContent: Story = {
  render: () => (
    <div className="border border-gray-200 rounded-lg overflow-hidden">
      <div className="bg-gray-50 p-4">
        <Skeleton width="200px" height="20px" />
      </div>
      <div className="p-4 space-y-3">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={`table-row-${i + 1}`} className="flex gap-4">
            <Skeleton width="120px" height="16px" />
            <Skeleton width="100px" height="16px" />
            <Skeleton width="80px" height="16px" />
            <Skeleton width="60px" height="16px" />
          </div>
        ))}
      </div>
    </div>
  ),
}

/**
 * Skeleton for image gallery.
 */
export const ImageGallery: Story = {
  render: () => (
    <div className="grid grid-cols-3 gap-4">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={`gallery-item-${i + 1}`} className="space-y-2">
          <div className="rounded-lg overflow-hidden">
            <Skeleton width="100%" height="120px" />
          </div>
          <Skeleton width="80%" height="14px" />
          <Skeleton width="60%" height="12px" />
        </div>
      ))}
    </div>
  ),
}

/**
 * Skeleton with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <div className="block text-sm font-medium mb-2">Custom Colors</div>
        <Skeleton
          width="200px"
          height="20px"
          className="bg-gradient-to-r from-blue-200 to-purple-200"
        />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Animated</div>
        <Skeleton
          width="200px"
          height="20px"
          className="animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200"
        />
      </div>
      <div>
        <div className="block text-sm font-medium mb-2">Glow Effect</div>
        <Skeleton width="200px" height="20px" className="shadow-lg shadow-blue-500/25" />
      </div>
    </div>
  ),
}