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

/**
 * Displays important information in a highlighted box.
 *
 * ## Props
 * - `Root`: Container for the callout
 * - `Icon`: Icon displayed in the callout
 * - `Text`: Text content of the callout
 *
 * ### Root Props
 * - `size`: "1" | "2" | "3" (default: "2")
 * - `variant`: "soft" | "surface" | "outline" (default: "soft")
 * - `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" (default: "gray")
 * - `highContrast`: boolean
 */
const meta = {
  title: "base/components/Callout",
  component: Callout.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Callout.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic callout with icon and text.
 */
export const Default: Story = {
  render: () => (
    <Callout.Root>
      <Callout.Icon>💡</Callout.Icon>
      <Callout.Text>This is a basic callout with an icon and some text content.</Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Callout with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-4">
      <Callout.Root size="1">
        <Callout.Icon>ℹ️</Callout.Icon>
        <Callout.Text>This is a small callout with minimal padding and compact text.</Callout.Text>
      </Callout.Root>

      <Callout.Root size="2">
        <Callout.Icon>💡</Callout.Icon>
        <Callout.Text>
          This is a medium callout with balanced padding and comfortable text size.
        </Callout.Text>
      </Callout.Root>

      <Callout.Root size="3">
        <Callout.Icon>🎯</Callout.Icon>
        <Callout.Text>
          This is a large callout with generous padding and prominent text for important
          information.
        </Callout.Text>
      </Callout.Root>
    </div>
  ),
}

/**
 * Callout with different variants.
 */
export const Variants: Story = {
  render: () => (
    <div className="space-y-4">
      <Callout.Root variant="soft">
        <Callout.Icon>💡</Callout.Icon>
        <Callout.Text>This is a soft callout with subtle background styling.</Callout.Text>
      </Callout.Root>

      <Callout.Root variant="surface">
        <Callout.Icon>📋</Callout.Icon>
        <Callout.Text>This is a surface callout with elevated appearance and border.</Callout.Text>
      </Callout.Root>

      <Callout.Root variant="outline">
        <Callout.Icon>🔍</Callout.Icon>
        <Callout.Text>This is an outline callout with border-only styling.</Callout.Text>
      </Callout.Root>
    </div>
  ),
}

/**
 * Callout with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="space-y-4">
      <Callout.Root color="blue">
        <Callout.Icon>ℹ️</Callout.Icon>
        <Callout.Text>This is an informational callout with blue styling.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="green">
        <Callout.Icon>✅</Callout.Icon>
        <Callout.Text>This is a success callout with green styling.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="yellow">
        <Callout.Icon>⚠️</Callout.Icon>
        <Callout.Text>This is a warning callout with yellow styling.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="red">
        <Callout.Icon>🚨</Callout.Icon>
        <Callout.Text>This is an error callout with red styling.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="purple">
        <Callout.Icon>🎨</Callout.Icon>
        <Callout.Text>This is a custom callout with purple styling.</Callout.Text>
      </Callout.Root>
    </div>
  ),
}

/**
 * Callout with high contrast.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="space-y-4">
      <Callout.Root>
        <Callout.Icon>💡</Callout.Icon>
        <Callout.Text>This is a regular callout without high contrast.</Callout.Text>
      </Callout.Root>

      <Callout.Root highContrast>
        <Callout.Icon>💡</Callout.Icon>
        <Callout.Text>This is a callout with high contrast for better accessibility.</Callout.Text>
      </Callout.Root>
    </div>
  ),
}

/**
 * Information callout.
 */
export const Information: Story = {
  render: () => (
    <Callout.Root color="blue" variant="soft">
      <Callout.Icon>ℹ️</Callout.Icon>
      <Callout.Text>
        <strong>Information:</strong> This callout provides important information that users should
        be aware of. It uses a blue color scheme to indicate informational content.
      </Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Success callout.
 */
export const Success: Story = {
  render: () => (
    <Callout.Root color="green" variant="soft">
      <Callout.Icon>✅</Callout.Icon>
      <Callout.Text>
        <strong>Success!</strong> Your changes have been saved successfully. The operation completed
        without any errors.
      </Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Warning callout.
 */
export const Warning: Story = {
  render: () => (
    <Callout.Root color="yellow" variant="soft">
      <Callout.Icon>⚠️</Callout.Icon>
      <Callout.Text>
        <strong>Warning:</strong> Please review your input before proceeding. Some fields may
        require attention.
      </Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Error callout.
 */
export const ErrorCallout: Story = {
  render: () => (
    <Callout.Root color="red" variant="soft">
      <Callout.Icon>🚨</Callout.Icon>
      <Callout.Text>
        <strong>Error:</strong> Something went wrong while processing your request. Please try again
        or contact support if the problem persists.
      </Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Tip callout.
 */
export const Tip: Story = {
  render: () => (
    <Callout.Root color="purple" variant="soft">
      <Callout.Icon>💡</Callout.Icon>
      <Callout.Text>
        <strong>Pro Tip:</strong> You can use keyboard shortcuts to navigate faster. Press{" "}
        <kbd className="px-1 py-0.5 bg-gray-200 rounded text-xs">Ctrl</kbd> +{" "}
        <kbd className="px-1 py-0.5 bg-gray-200 rounded text-xs">K</kbd> to open the command
        palette.
      </Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Callout with custom icon.
 */
export const CustomIcon: Story = {
  render: () => (
    <div className="space-y-4">
      <Callout.Root color="blue">
        <Callout.Icon>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
            <path d="M8 1a7 7 0 100 14A7 7 0 008 1zM7 11V6h2v5H7zm0 2h2v2H7v-2z" />
          </svg>
        </Callout.Icon>
        <Callout.Text>This callout uses a custom SVG icon instead of an emoji.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="green">
        <Callout.Icon>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
            <path d="M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z" />
          </svg>
        </Callout.Icon>
        <Callout.Text>Another example with a different custom icon.</Callout.Text>
      </Callout.Root>
    </div>
  ),
}

/**
 * Callout without icon.
 */
export const WithoutIcon: Story = {
  render: () => (
    <Callout.Root color="gray" variant="outline">
      <Callout.Text>This callout doesn't have an icon, just text content.</Callout.Text>
    </Callout.Root>
  ),
}

/**
 * Callout with multiple paragraphs.
 */
export const MultipleParagraphs: Story = {
  render: () => (
    <Callout.Root color="blue" size="3">
      <Callout.Icon>📚</Callout.Icon>
      <div className="space-y-2">
        <Callout.Text>
          <strong>Documentation Update:</strong> We've recently updated our documentation to include
          new features and improvements.
        </Callout.Text>
        <Callout.Text>
          The new sections cover advanced usage patterns, best practices, and troubleshooting
          guides. We recommend reviewing these updates to get the most out of our platform.
        </Callout.Text>
        <Callout.Text>
          If you have any questions or feedback, please don't hesitate to reach out to our support
          team.
        </Callout.Text>
      </div>
    </Callout.Root>
  ),
}

/**
 * Callout with action buttons.
 */
export const WithActions: Story = {
  render: () => (
    <Callout.Root color="blue" variant="surface">
      <Callout.Icon>🔔</Callout.Icon>
      <div className="space-y-3">
        <Callout.Text>
          <strong>New Feature Available:</strong> We've just released a new analytics dashboard that
          provides deeper insights into your data.
        </Callout.Text>
        <div className="flex gap-2">
          <button
            type="button"
            className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Try It Now
          </button>
          <button
            type="button"
            className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50"
          >
            Learn More
          </button>
        </div>
      </div>
    </Callout.Root>
  ),
}

/**
 * Callout in different contexts.
 */
export const Contexts: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Form Validation</h4>
        <Callout.Root color="red" size="1">
          <Callout.Icon>❌</Callout.Icon>
          <Callout.Text>
            Please fill in all required fields marked with an asterisk (*).
          </Callout.Text>
        </Callout.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Feature Announcement</h4>
        <Callout.Root color="green" variant="soft">
          <Callout.Icon>🎉</Callout.Icon>
          <Callout.Text>
            <strong>Exciting News!</strong> We've just launched our new mobile app. Download it now
            to access all features on the go.
          </Callout.Text>
        </Callout.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Maintenance Notice</h4>
        <Callout.Root color="yellow" variant="outline">
          <Callout.Icon>🔧</Callout.Icon>
          <Callout.Text>
            <strong>Scheduled Maintenance:</strong> Our servers will be undergoing maintenance on
            Sunday, March 15th from 2:00 AM to 4:00 AM EST. Some features may be temporarily
            unavailable.
          </Callout.Text>
        </Callout.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Help & Support</h4>
        <Callout.Root color="purple" variant="surface">
          <Callout.Icon>💬</Callout.Icon>
          <Callout.Text>
            <strong>Need Help?</strong> Our support team is available 24/7. You can reach us via
            live chat, email, or phone.
          </Callout.Text>
        </Callout.Root>
      </div>
    </div>
  ),
}