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

/**
 * A spinner component for loading states.
 *
 * ## Props
 * - `size`: "1" | "2" | "3" (default: "2")
 */
const meta = {
  title: "base/components/Spinner",
  component: Spinner,
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: ["1", "2", "3"],
      description: "Size of the spinner",
    },
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Spinner>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic spinner with default settings.
 */
export const Default: Story = {
  args: {},
}

/**
 * Different sizes of spinner.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <div className="text-center">
        <Spinner size="1" />
        <p className="text-xs mt-2">Size 1</p>
      </div>
      <div className="text-center">
        <Spinner size="2" />
        <p className="text-xs mt-2">Size 2</p>
      </div>
      <div className="text-center">
        <Spinner size="3" />
        <p className="text-xs mt-2">Size 3</p>
      </div>
    </div>
  ),
}

/**
 * Spinner with text.
 */
export const WithText: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Spinner size="1" />
        <span className="text-sm">Loading...</span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner size="2" />
        <span className="text-sm">Please wait</span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner size="3" />
        <span className="text-sm">Processing your request</span>
      </div>
    </div>
  ),
}

/**
 * Spinner in different contexts.
 */
export const Contexts: Story = {
  render: () => (
    <div className="space-y-6">
      <div className="text-center p-6 border border-gray-200 rounded-lg">
        <Spinner size="3" />
        <p className="mt-2 text-sm text-gray-600">Loading content...</p>
      </div>

      <div className="flex items-center justify-center p-4 bg-gray-50 rounded-lg">
        <div className="text-center">
          <Spinner size="2" />
          <p className="mt-2 text-sm text-gray-600">Saving changes...</p>
        </div>
      </div>

      <div className="flex items-center gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
        <Spinner size="1" />
        <div>
          <p className="text-sm font-medium text-red-800">Error occurred</p>
          <p className="text-xs text-red-600">Retrying connection...</p>
        </div>
      </div>
    </div>
  ),
}

/**
 * Spinner with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="text-center">
        <Spinner size="3" className="text-blue-600" />
        <p className="text-sm mt-2">Custom Blue</p>
      </div>

      <div className="text-center">
        <Spinner size="3" className="text-green-500" />
        <p className="text-sm mt-2">Custom Green</p>
      </div>

      <div className="text-center">
        <Spinner size="3" className="text-purple-600" />
        <p className="text-sm mt-2">Custom Purple</p>
      </div>
    </div>
  ),
}

/**
 * Spinner in buttons.
 */
export const InButtons: Story = {
  render: () => (
    <div className="flex gap-4">
      <button
        type="button"
        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        disabled
      >
        <Spinner size="1" />
        Loading...
      </button>

      <button
        type="button"
        className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
        disabled
      >
        <Spinner size="1" />
        Saving...
      </button>

      <button
        type="button"
        className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50"
        disabled
      >
        <Spinner size="1" />
        Processing...
      </button>
    </div>
  ),
}

/**
 * Spinner with different loading states.
 */
export const LoadingStates: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <Spinner size="2" />
        <div>
          <p className="text-sm font-medium">Initializing...</p>
          <p className="text-xs text-gray-500">Setting up your workspace</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <Spinner size="2" />
        <div>
          <p className="text-sm font-medium">Uploading...</p>
          <p className="text-xs text-gray-500">File upload in progress</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <Spinner size="2" />
        <div>
          <p className="text-sm font-medium">Processing...</p>
          <p className="text-xs text-gray-500">Analyzing data</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <Spinner size="2" />
        <div>
          <p className="text-sm font-medium">Finalizing...</p>
          <p className="text-xs text-gray-500">Almost done</p>
        </div>
      </div>
    </div>
  ),
}