import type { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { Button } from "../../action/button"
import { AlertDialog } from "./AlertDialog"

/**
 * An alert dialog component for important confirmations.
 *
 * ## Props
 * - `Root`: Container for the alert dialog
 * - `Trigger`: Element that triggers the alert dialog
 * - `Content`: The alert dialog content
 * - `Title`: The alert dialog title
 * - `Description`: The alert dialog description
 * - `Action`: The primary action button
 * - `Cancel`: The cancel button
 */
const meta = {
  title: "base/containment/AlertDialog",
  component: AlertDialog.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof AlertDialog.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic alert dialog with default settings.
 */
export const Default: Story = {
  render: () => (
    <AlertDialog.Root>
      <AlertDialog.Trigger>
        <Button variant="solid" color="red">
          Delete Account
        </Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Title>Are you sure?</AlertDialog.Title>
        <AlertDialog.Description>
          This action cannot be undone. This will permanently delete your account and remove your
          data from our servers.
        </AlertDialog.Description>
        <div className="flex gap-3 mt-4 justify-end">
          <AlertDialog.Cancel>
            <Button variant="soft" color="gray">
              Cancel
            </Button>
          </AlertDialog.Cancel>
          <AlertDialog.Action>
            <Button variant="solid" color="red">
              Delete Account
            </Button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>
  ),
}

/**
 * Alert dialog with different content types.
 */
export const ContentTypes: Story = {
  render: () => (
    <div className="flex gap-4">
      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" color="red">
            Delete
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Delete Item</AlertDialog.Title>
          <AlertDialog.Description>
            Are you sure you want to delete this item? This action cannot be undone.
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button variant="soft" color="gray">
                Cancel
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button variant="solid" color="red">
                Delete
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>

      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" color="blue">
            Save Changes
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Save Changes</AlertDialog.Title>
          <AlertDialog.Description>
            You have unsaved changes. Do you want to save them before leaving?
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button variant="soft" color="gray">
                Don't Save
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button variant="solid" color="blue">
                Save
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>

      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" color="green">
            Publish
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Publish Changes</AlertDialog.Title>
          <AlertDialog.Description>
            This will make your changes visible to all users. Are you ready to publish?
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button variant="soft" color="gray">
                Cancel
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button variant="solid" color="green">
                Publish
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>
    </div>
  ),
}

/**
 * Alert dialog with different button variants.
 */
export const ButtonVariants: Story = {
  render: () => (
    <AlertDialog.Root>
      <AlertDialog.Trigger>
        <Button variant="outline" color="red">
          Custom Buttons
        </Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Title>Custom Button Styles</AlertDialog.Title>
        <AlertDialog.Description>
          This alert dialog demonstrates different button variants and colors.
        </AlertDialog.Description>
        <div className="flex gap-3 mt-4 justify-end">
          <AlertDialog.Cancel>
            <Button variant="soft" color="gray">
              Maybe Later
            </Button>
          </AlertDialog.Cancel>
          <AlertDialog.Action>
            <Button variant="outline" color="blue">
              Continue
            </Button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>
  ),
}

/**
 * Alert dialog with controlled state.
 */
export const Controlled: Story = {
  render: () => {
    const [open, setOpen] = React.useState(false)

    return (
      <AlertDialog.Root open={open} onOpenChange={setOpen}>
        <AlertDialog.Trigger>
          <Button variant="solid" color="purple">
            Controlled Dialog
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Controlled Alert Dialog</AlertDialog.Title>
          <AlertDialog.Description>
            This alert dialog is controlled by React state. The open state can be managed
            programmatically.
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button variant="soft" color="gray" onClick={() => setOpen(false)}>
                Close
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button variant="solid" color="purple" onClick={() => setOpen(false)}>
                Confirm
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>
    )
  },
}

/**
 * Alert dialog with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <AlertDialog.Root>
      <AlertDialog.Trigger>
        <Button variant="solid" color="crimson">
          Custom Style
        </Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content className="bg-gradient-to-br from-purple-500 to-pink-500 text-white border-0">
        <AlertDialog.Title className="text-white">Custom Styled Dialog</AlertDialog.Title>
        <AlertDialog.Description className="text-white opacity-90">
          This alert dialog has custom styling with a gradient background and white text.
        </AlertDialog.Description>
        <div className="flex gap-3 mt-4 justify-end">
          <AlertDialog.Cancel>
            <Button variant="outline" className="text-purple-600">
              Cancel
            </Button>
          </AlertDialog.Cancel>
          <AlertDialog.Action>
            <Button variant="solid" className="text-purple-600">
              Confirm
            </Button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>
  ),
}

/**
 * Alert dialog with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4">
      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" size="1">
            Small
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Small Dialog</AlertDialog.Title>
          <AlertDialog.Description>
            This is a small alert dialog with minimal content.
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button size="1" variant="soft" color="gray">
                No
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button size="1" variant="solid" color="blue">
                Yes
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>

      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" size="2">
            Medium
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Medium Dialog</AlertDialog.Title>
          <AlertDialog.Description>
            This is a medium-sized alert dialog with more detailed content and description.
          </AlertDialog.Description>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button size="2" variant="soft" color="gray">
                Cancel
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button size="2" variant="solid" color="green">
                Confirm
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>

      <AlertDialog.Root>
        <AlertDialog.Trigger>
          <Button variant="solid" size="3">
            Large
          </Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content>
          <AlertDialog.Title>Large Dialog</AlertDialog.Title>
          <AlertDialog.Description>
            This is a large alert dialog with extensive content. It can contain multiple paragraphs
            and detailed information about the action being confirmed.
          </AlertDialog.Description>
          <div className="bg-gray-50 p-4 rounded mt-4">
            <p className="text-sm text-gray-700">
              Additional context or warnings can be displayed here to help users make an informed
              decision.
            </p>
          </div>
          <div className="flex gap-3 mt-4 justify-end">
            <AlertDialog.Cancel>
              <Button size="3" variant="soft" color="gray">
                Cancel
              </Button>
            </AlertDialog.Cancel>
            <AlertDialog.Action>
              <Button size="3" variant="solid" color="red">
                Proceed
              </Button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Root>
    </div>
  ),
}