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

/**
 * Displays a group of selectable cards with checkboxes.
 *
 * ## Props
 * - `Root`: Container for the checkbox cards group
 * - `Item`: Individual checkbox card item
 *
 * ### Root Props
 * - `columns`: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | string (default: "1")
 * - `gap`: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | string (default: "4")
 * - `size`: "1" | "2" | "3" (default: "2")
 * - `variant`: "surface" | "classic" (default: "surface")
 * - `color`: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky"
 * - `highContrast`: boolean
 */
const meta = {
  title: "base/form/CheckboxCard",
  component: CheckboxCards.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof CheckboxCards.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic checkbox cards with different options.
 */
export const Default: Story = {
  render: () => (
    <CheckboxCards.Root>
      <CheckboxCards.Item value="option1">
        <div className="p-4">
          <h3 className="font-semibold mb-2">Basic Plan</h3>
          <p className="text-sm text-gray-600">Perfect for getting started</p>
        </div>
      </CheckboxCards.Item>
      <CheckboxCards.Item value="option2">
        <div className="p-4">
          <h3 className="font-semibold mb-2">Pro Plan</h3>
          <p className="text-sm text-gray-600">Great for growing teams</p>
        </div>
      </CheckboxCards.Item>
      <CheckboxCards.Item value="option3">
        <div className="p-4">
          <h3 className="font-semibold mb-2">Enterprise Plan</h3>
          <p className="text-sm text-gray-600">For large organizations</p>
        </div>
      </CheckboxCards.Item>
    </CheckboxCards.Root>
  ),
}

/**
 * Checkbox cards with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Small (1)</h4>
        <CheckboxCards.Root size="1" columns="3">
          <CheckboxCards.Item value="small1">
            <div className="p-3">
              <h4 className="font-medium text-sm mb-1">Option 1</h4>
              <p className="text-xs text-gray-600">Small card</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="small2">
            <div className="p-3">
              <h4 className="font-medium text-sm mb-1">Option 2</h4>
              <p className="text-xs text-gray-600">Small card</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="small3">
            <div className="p-3">
              <h4 className="font-medium text-sm mb-1">Option 3</h4>
              <p className="text-xs text-gray-600">Small card</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Medium (2)</h4>
        <CheckboxCards.Root size="2" columns="3">
          <CheckboxCards.Item value="medium1">
            <div className="p-4">
              <h4 className="font-medium mb-2">Option 1</h4>
              <p className="text-sm text-gray-600">Medium card</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="medium2">
            <div className="p-4">
              <h4 className="font-medium mb-2">Option 2</h4>
              <p className="text-sm text-gray-600">Medium card</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="medium3">
            <div className="p-4">
              <h4 className="font-medium mb-2">Option 3</h4>
              <p className="text-sm text-gray-600">Medium card</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Large (3)</h4>
        <CheckboxCards.Root size="3" columns="3">
          <CheckboxCards.Item value="large1">
            <div className="p-5">
              <h4 className="font-semibold text-lg mb-3">Option 1</h4>
              <p className="text-base text-gray-600">Large card with more content</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="large2">
            <div className="p-5">
              <h4 className="font-semibold text-lg mb-3">Option 2</h4>
              <p className="text-base text-gray-600">Large card with more content</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="large3">
            <div className="p-5">
              <h4 className="font-semibold text-lg mb-3">Option 3</h4>
              <p className="text-base text-gray-600">Large card with more content</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>
    </div>
  ),
}

/**
 * Checkbox cards with different variants.
 */
export const Variants: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Surface Variant</h4>
        <CheckboxCards.Root variant="surface" columns="2">
          <CheckboxCards.Item value="surface1">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Surface Card 1</h4>
              <p className="text-sm text-gray-600">Elevated appearance with border</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="surface2">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Surface Card 2</h4>
              <p className="text-sm text-gray-600">Elevated appearance with border</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Classic Variant</h4>
        <CheckboxCards.Root variant="classic" columns="2">
          <CheckboxCards.Item value="classic1">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Classic Card 1</h4>
              <p className="text-sm text-gray-600">Traditional card styling</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="classic2">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Classic Card 2</h4>
              <p className="text-sm text-gray-600">Traditional card styling</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>
    </div>
  ),
}

/**
 * Checkbox cards with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="space-y-4">
      <CheckboxCards.Root color="blue" columns="2">
        <CheckboxCards.Item value="blue1">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Blue Theme</h4>
            <p className="text-sm text-gray-600">Professional and trustworthy</p>
          </div>
        </CheckboxCards.Item>
        <CheckboxCards.Item value="blue2">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Blue Theme</h4>
            <p className="text-sm text-gray-600">Professional and trustworthy</p>
          </div>
        </CheckboxCards.Item>
      </CheckboxCards.Root>

      <CheckboxCards.Root color="green" columns="2">
        <CheckboxCards.Item value="green1">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Green Theme</h4>
            <p className="text-sm text-gray-600">Success and growth</p>
          </div>
        </CheckboxCards.Item>
        <CheckboxCards.Item value="green2">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Green Theme</h4>
            <p className="text-sm text-gray-600">Success and growth</p>
          </div>
        </CheckboxCards.Item>
      </CheckboxCards.Root>

      <CheckboxCards.Root color="purple" columns="2">
        <CheckboxCards.Item value="purple1">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Purple Theme</h4>
            <p className="text-sm text-gray-600">Creative and innovative</p>
          </div>
        </CheckboxCards.Item>
        <CheckboxCards.Item value="purple2">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Purple Theme</h4>
            <p className="text-sm text-gray-600">Creative and innovative</p>
          </div>
        </CheckboxCards.Item>
      </CheckboxCards.Root>
    </div>
  ),
}

/**
 * Checkbox cards with different column layouts.
 */
export const ColumnLayouts: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">1 Column</h4>
        <CheckboxCards.Root columns="1">
          <CheckboxCards.Item value="col1">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Single Column Layout</h4>
              <p className="text-sm text-gray-600">Full width card for important options</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">2 Columns</h4>
        <CheckboxCards.Root columns="2">
          <CheckboxCards.Item value="col2a">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Option A</h4>
              <p className="text-sm text-gray-600">Two column layout</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col2b">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Option B</h4>
              <p className="text-sm text-gray-600">Two column layout</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">3 Columns</h4>
        <CheckboxCards.Root columns="3">
          <CheckboxCards.Item value="col3a">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Option A</h4>
              <p className="text-sm text-gray-600">Three column layout</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col3b">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Option B</h4>
              <p className="text-sm text-gray-600">Three column layout</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col3c">
            <div className="p-4">
              <h4 className="font-semibold mb-2">Option C</h4>
              <p className="text-sm text-gray-600">Three column layout</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">4 Columns</h4>
        <CheckboxCards.Root columns="4">
          <CheckboxCards.Item value="col4a">
            <div className="p-3">
              <h4 className="font-semibold text-sm mb-1">A</h4>
              <p className="text-xs text-gray-600">Four columns</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col4b">
            <div className="p-3">
              <h4 className="font-semibold text-sm mb-1">B</h4>
              <p className="text-xs text-gray-600">Four columns</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col4c">
            <div className="p-3">
              <h4 className="font-semibold text-sm mb-1">C</h4>
              <p className="text-xs text-gray-600">Four columns</p>
            </div>
          </CheckboxCards.Item>
          <CheckboxCards.Item value="col4d">
            <div className="p-3">
              <h4 className="font-semibold text-sm mb-1">D</h4>
              <p className="text-xs text-gray-600">Four columns</p>
            </div>
          </CheckboxCards.Item>
        </CheckboxCards.Root>
      </div>
    </div>
  ),
}

/**
 * Pricing plan selection.
 */
export const PricingPlans: Story = {
  render: () => (
    <CheckboxCards.Root columns="3" size="3">
      <CheckboxCards.Item value="basic">
        <div className="p-6 text-center">
          <h3 className="text-xl font-bold mb-2">Basic</h3>
          <div className="text-3xl font-bold mb-4">
            $9<span className="text-lg text-gray-600">/month</span>
          </div>
          <ul className="text-sm text-gray-600 space-y-2 mb-6">
            <li>✓ 1 user</li>
            <li>✓ 10 projects</li>
            <li>✓ Basic support</li>
          </ul>
          <div className="text-xs text-gray-500">Perfect for individuals</div>
        </div>
      </CheckboxCards.Item>

      <CheckboxCards.Item value="pro">
        <div className="p-6 text-center">
          <h3 className="text-xl font-bold mb-2">Pro</h3>
          <div className="text-3xl font-bold mb-4">
            $29<span className="text-lg text-gray-600">/month</span>
          </div>
          <ul className="text-sm text-gray-600 space-y-2 mb-6">
            <li>✓ 10 users</li>
            <li>✓ Unlimited projects</li>
            <li>✓ Priority support</li>
            <li>✓ Advanced features</li>
          </ul>
          <div className="text-xs text-gray-500">Great for teams</div>
        </div>
      </CheckboxCards.Item>

      <CheckboxCards.Item value="enterprise">
        <div className="p-6 text-center">
          <h3 className="text-xl font-bold mb-2">Enterprise</h3>
          <div className="text-3xl font-bold mb-4">
            $99<span className="text-lg text-gray-600">/month</span>
          </div>
          <ul className="text-sm text-gray-600 space-y-2 mb-6">
            <li>✓ Unlimited users</li>
            <li>✓ Unlimited projects</li>
            <li>✓ 24/7 support</li>
            <li>✓ Custom integrations</li>
            <li>✓ Dedicated account manager</li>
          </ul>
          <div className="text-xs text-gray-500">For large organizations</div>
        </div>
      </CheckboxCards.Item>
    </CheckboxCards.Root>
  ),
}

/**
 * Feature selection.
 */
export const FeatureSelection: Story = {
  render: () => (
    <CheckboxCards.Root columns="2" gap="6">
      <CheckboxCards.Item value="analytics">
        <div className="p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <span className="text-blue-600 text-lg">📊</span>
            </div>
            <div>
              <h4 className="font-semibold">Analytics Dashboard</h4>
              <p className="text-sm text-gray-600">Advanced insights</p>
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Get detailed analytics and insights about your data with customizable dashboards and
            reports.
          </p>
        </div>
      </CheckboxCards.Item>

      <CheckboxCards.Item value="automation">
        <div className="p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
              <span className="text-green-600 text-lg">⚡</span>
            </div>
            <div>
              <h4 className="font-semibold">Workflow Automation</h4>
              <p className="text-sm text-gray-600">Save time</p>
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Automate repetitive tasks and streamline your workflows with powerful automation tools.
          </p>
        </div>
      </CheckboxCards.Item>

      <CheckboxCards.Item value="security">
        <div className="p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <span className="text-red-600 text-lg">🔒</span>
            </div>
            <div>
              <h4 className="font-semibold">Enhanced Security</h4>
              <p className="text-sm text-gray-600">Enterprise-grade</p>
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Advanced security features including SSO, 2FA, and compliance with industry standards.
          </p>
        </div>
      </CheckboxCards.Item>

      <CheckboxCards.Item value="support">
        <div className="p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
              <span className="text-purple-600 text-lg">💬</span>
            </div>
            <div>
              <h4 className="font-semibold">Priority Support</h4>
              <p className="text-sm text-gray-600">24/7 assistance</p>
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Get priority access to our support team with faster response times and dedicated
            assistance.
          </p>
        </div>
      </CheckboxCards.Item>
    </CheckboxCards.Root>
  ),
}

/**
 * High contrast checkbox cards.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="space-y-4">
      <CheckboxCards.Root>
        <CheckboxCards.Item value="normal1">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Normal Contrast</h4>
            <p className="text-sm text-gray-600">Standard appearance</p>
          </div>
        </CheckboxCards.Item>
        <CheckboxCards.Item value="normal2">
          <div className="p-4">
            <h4 className="font-semibold mb-2">Normal Contrast</h4>
            <p className="text-sm text-gray-600">Standard appearance</p>
          </div>
        </CheckboxCards.Item>
      </CheckboxCards.Root>

      <CheckboxCards.Root highContrast>
        <CheckboxCards.Item value="high1">
          <div className="p-4">
            <h4 className="font-semibold mb-2">High Contrast</h4>
            <p className="text-sm text-gray-600">Enhanced accessibility</p>
          </div>
        </CheckboxCards.Item>
        <CheckboxCards.Item value="high2">
          <div className="p-4">
            <h4 className="font-semibold mb-2">High Contrast</h4>
            <p className="text-sm text-gray-600">Enhanced accessibility</p>
          </div>
        </CheckboxCards.Item>
      </CheckboxCards.Root>
    </div>
  ),
}