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

/**
 * Displays a modal dialog that overlays the page content.
 *
 * ## Props
 * - `Root`: Container for the dialog
 * - `Trigger`: Element that opens the dialog
 * - `Content`: The dialog content container
 * - `Title`: The dialog title
 * - `Description`: The dialog description
 * - `Close`: Button to close the dialog
 *
 * ### Content Props
 * - `size`: "1" | "2" | "3" | "4" (default: "3")
 * - `width`: string (custom width)
 * - `height`: string (custom height)
 * - `minWidth`: string (minimum width)
 * - `maxWidth`: string (maximum width)
 * - `minHeight`: string (minimum height)
 * - `maxHeight`: string (maximum height)
 * - `align`: "start" | "center" (default: "center")
 */
const meta = {
  title: "base/containment/Dialog",
  component: Dialog.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Dialog.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic dialog with title and description.
 */
export const Default: Story = {
  render: () => (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button>Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>
          This is a basic dialog with a title and description. It demonstrates the fundamental
          structure of a dialog component.
        </Dialog.Description>
        <div className="flex justify-end gap-2 mt-4">
          <Dialog.Close>
            <Button variant="soft" color="gray">
              Cancel
            </Button>
          </Dialog.Close>
          <Button>Confirm</Button>
        </div>
      </Dialog.Content>
    </Dialog.Root>
  ),
}

/**
 * Dialog with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4">
      <Dialog.Root>
        <Dialog.Trigger>
          <Button size="1">Small</Button>
        </Dialog.Trigger>
        <Dialog.Content size="1">
          <Dialog.Title>Small Dialog</Dialog.Title>
          <Dialog.Description>
            This is a small dialog with minimal padding and compact layout.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-3">
            <Dialog.Close>
              <Button size="1" variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>

      <Dialog.Root>
        <Dialog.Trigger>
          <Button size="2">Medium</Button>
        </Dialog.Trigger>
        <Dialog.Content size="2">
          <Dialog.Title>Medium Dialog</Dialog.Title>
          <Dialog.Description>
            This is a medium-sized dialog with balanced padding and spacing.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button size="2" variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>

      <Dialog.Root>
        <Dialog.Trigger>
          <Button size="3">Large</Button>
        </Dialog.Trigger>
        <Dialog.Content size="3">
          <Dialog.Title>Large Dialog</Dialog.Title>
          <Dialog.Description>
            This is a large dialog with generous padding and comfortable spacing for complex
            content.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button size="3" variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>

      <Dialog.Root>
        <Dialog.Trigger>
          <Button size="4">Extra Large</Button>
        </Dialog.Trigger>
        <Dialog.Content size="4">
          <Dialog.Title>Extra Large Dialog</Dialog.Title>
          <Dialog.Description>
            This is an extra large dialog with maximum padding and spacing for very complex content.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button size="4" variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  ),
}

/**
 * Dialog with custom width.
 */
export const CustomWidth: Story = {
  render: () => (
    <div className="flex gap-4">
      <Dialog.Root>
        <Dialog.Trigger>
          <Button variant="soft" color="gray">
            Narrow
          </Button>
        </Dialog.Trigger>
        <Dialog.Content width="300px">
          <Dialog.Title>Narrow Dialog</Dialog.Title>
          <Dialog.Description>
            This dialog has a custom narrow width of 300px, perfect for simple confirmations or
            alerts.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button variant="soft" color="gray">
                Cancel
              </Button>
            </Dialog.Close>
            <Button>Confirm</Button>
          </div>
        </Dialog.Content>
      </Dialog.Root>

      <Dialog.Root>
        <Dialog.Trigger>
          <Button variant="soft" color="gray">
            Wide
          </Button>
        </Dialog.Trigger>
        <Dialog.Content width="600px">
          <Dialog.Title>Wide Dialog</Dialog.Title>
          <Dialog.Description>
            This dialog has a custom wide width of 600px, allowing for more complex layouts and
            content.
          </Dialog.Description>
          <div className="mt-4 p-4 bg-gray-50 rounded">
            <p className="text-sm text-gray-600">
              This extra space can be used for forms, tables, or other complex content that needs
              more room.
            </p>
          </div>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button variant="soft" color="gray">
                Cancel
              </Button>
            </Dialog.Close>
            <Button>Save</Button>
          </div>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  ),
}

/**
 * Confirmation dialog.
 */
export const Confirmation: Story = {
  render: () => (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button color="red">Delete Item</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Confirm Deletion</Dialog.Title>
        <Dialog.Description>
          Are you sure you want to delete this item? This action cannot be undone.
        </Dialog.Description>
        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded">
          <p className="text-sm text-red-700">
            <strong>Warning:</strong> This will permanently remove the item and all associated data.
          </p>
        </div>
        <div className="flex justify-end gap-2 mt-4">
          <Dialog.Close>
            <Button variant="soft" color="gray">
              Cancel
            </Button>
          </Dialog.Close>
          <Button color="red">Delete</Button>
        </div>
      </Dialog.Content>
    </Dialog.Root>
  ),
}

/**
 * Form dialog.
 */
export const Form: Story = {
  render: () => (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button color="green">Add User</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Add New User</Dialog.Title>
        <Dialog.Description>
          Fill in the details below to create a new user account.
        </Dialog.Description>

        <form className="mt-4 space-y-4">
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
              Full Name
            </label>
            <input
              type="text"
              id="name"
              className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter full name"
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
              Email Address
            </label>
            <input
              type="email"
              id="email"
              className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter email address"
            />
          </div>

          <div>
            <label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-1">
              Role
            </label>
            <select
              id="role"
              className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Select a role</option>
              <option value="admin">Administrator</option>
              <option value="user">User</option>
              <option value="viewer">Viewer</option>
            </select>
          </div>
        </form>

        <div className="flex justify-end gap-2 mt-6">
          <Dialog.Close>
            <Button variant="soft" color="gray">
              Cancel
            </Button>
          </Dialog.Close>
          <Button color="green">Create User</Button>
        </div>
      </Dialog.Content>
    </Dialog.Root>
  ),
}

/**
 * Information dialog.
 */
export const Information: Story = {
  render: () => (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button>View Details</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Project Information</Dialog.Title>
        <Dialog.Description>
          Detailed information about the current project and its status.
        </Dialog.Description>

        <div className="mt-4 space-y-3">
          <div className="flex justify-between">
            <span className="text-sm font-medium text-gray-600">Project Name:</span>
            <span className="text-sm">Design System</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm font-medium text-gray-600">Status:</span>
            <span className="text-sm text-green-600">Active</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm font-medium text-gray-600">Created:</span>
            <span className="text-sm">January 15, 2024</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm font-medium text-gray-600">Last Updated:</span>
            <span className="text-sm">March 20, 2024</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm font-medium text-gray-600">Team Members:</span>
            <span className="text-sm">12</span>
          </div>
        </div>

        <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
          <p className="text-sm text-blue-700">
            This project is currently in active development with regular updates and improvements.
          </p>
        </div>

        <div className="flex justify-end gap-2 mt-4">
          <Dialog.Close>
            <Button variant="soft" color="gray">
              Close
            </Button>
          </Dialog.Close>
          <Button>Edit Project</Button>
        </div>
      </Dialog.Content>
    </Dialog.Root>
  ),
}

/**
 * Alert dialog.
 */
export const Alert: Story = {
  render: () => (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button color="yellow">Show Alert</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Important Notice</Dialog.Title>
        <Dialog.Description>
          Your session will expire in 5 minutes. Please save your work to avoid losing any unsaved
          changes.
        </Dialog.Description>

        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded">
          <div className="flex items-center">
            <span className="text-yellow-600 mr-2">⚠️</span>
            <p className="text-sm text-yellow-700">
              <strong>Warning:</strong> Any unsaved changes will be lost when the session expires.
            </p>
          </div>
        </div>

        <div className="flex justify-end gap-2 mt-4">
          <Dialog.Close>
            <Button variant="soft" color="gray">
              Dismiss
            </Button>
          </Dialog.Close>
          <Button color="yellow">Extend Session</Button>
        </div>
      </Dialog.Content>
    </Dialog.Root>
  ),
}

/**
 * Dialog with custom alignment.
 */
export const CustomAlignment: Story = {
  render: () => (
    <div className="flex gap-4">
      <Dialog.Root>
        <Dialog.Trigger>
          <Button variant="soft" color="gray">
            Center Aligned
          </Button>
        </Dialog.Trigger>
        <Dialog.Content align="center">
          <Dialog.Title>Center Aligned Dialog</Dialog.Title>
          <Dialog.Description>This dialog is center aligned (default behavior).</Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>

      <Dialog.Root>
        <Dialog.Trigger>
          <Button variant="soft" color="gray">
            Start Aligned
          </Button>
        </Dialog.Trigger>
        <Dialog.Content align="start">
          <Dialog.Title>Start Aligned Dialog</Dialog.Title>
          <Dialog.Description>
            This dialog is start aligned, appearing at the top of the viewport.
          </Dialog.Description>
          <div className="flex justify-end gap-2 mt-4">
            <Dialog.Close>
              <Button variant="soft" color="gray">
                Close
              </Button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  ),
}