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

/**
 * A popover component that displays content in a floating panel.
 *
 * ## Props
 * - `Root`: Container for the popover
 * - `Trigger`: Element that triggers the popover
 * - `Content`: The popover content
 * - `Close`: Close button for the popover
 */
const meta = {
  title: "base/components/Popover",
  component: Popover.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Popover.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic popover with default settings.
 */
export const Default: Story = {
  render: () => (
    <Popover.Root>
      <Popover.Trigger>
        <Button variant="solid">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2">Popover Title</h3>
          <p className="text-gray-600 mb-4">
            This is the content of the popover. You can put any content here.
          </p>
          <div className="flex gap-2">
            <Button size="1" variant="solid">
              Action
            </Button>
            <Popover.Close>
              <Button size="1" variant="outline">
                Close
              </Button>
            </Popover.Close>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  ),
}

/**
 * Popover with different content types.
 */
export const ContentTypes: Story = {
  render: () => (
    <div className="flex gap-4">
      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" color="blue">
            Info
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-4 max-w-xs">
            <h3 className="text-lg font-semibold mb-2">Information</h3>
            <p className="text-gray-600">
              This popover contains informational content with a longer description.
            </p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="outline" color="green">
            Form
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-4 w-80">
            <h3 className="text-lg font-semibold mb-4">Contact Form</h3>
            <form className="space-y-3">
              <div>
                <label htmlFor="name-input" className="block text-sm font-medium mb-1">
                  Name
                </label>
                <input
                  id="name-input"
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="Enter your name"
                />
              </div>
              <div>
                <label htmlFor="email-input" className="block text-sm font-medium mb-1">
                  Email
                </label>
                <input
                  id="email-input"
                  type="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 your email"
                />
              </div>
              <div className="flex gap-2 pt-2">
                <Button size="1" variant="solid">
                  Submit
                </Button>
                <Popover.Close>
                  <Button size="1" variant="outline">
                    Cancel
                  </Button>
                </Popover.Close>
              </div>
            </form>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="soft" color="purple">
            List
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-4">
            <h3 className="text-lg font-semibold mb-3">Options</h3>
            <ul className="space-y-2">
              <li className="cursor-pointer hover:bg-gray-100 p-2 rounded">Option 1</li>
              <li className="cursor-pointer hover:bg-gray-100 p-2 rounded">Option 2</li>
              <li className="cursor-pointer hover:bg-gray-100 p-2 rounded">Option 3</li>
              <li className="cursor-pointer hover:bg-gray-100 p-2 rounded">Option 4</li>
            </ul>
          </div>
        </Popover.Content>
      </Popover.Root>
    </div>
  ),
}

/**
 * Popover with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4">
      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" size="1">
            Small
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-3">
            <p className="text-sm">Small popover content</p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" size="2">
            Medium
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-4">
            <h3 className="text-lg font-semibold mb-2">Medium Popover</h3>
            <p className="text-gray-600">This is a medium-sized popover with more content.</p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" size="3">
            Large
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-6 w-96">
            <h3 className="text-xl font-semibold mb-4">Large Popover</h3>
            <p className="text-gray-600 mb-4">
              This is a large popover with extensive content. It can contain multiple paragraphs,
              forms, or other complex content structures.
            </p>
            <div className="bg-gray-50 p-3 rounded">
              <p className="text-sm text-gray-700">
                Additional information or context can be displayed here.
              </p>
            </div>
          </div>
        </Popover.Content>
      </Popover.Root>
    </div>
  ),
}

/**
 * Popover with different positions.
 */
export const Positions: Story = {
  render: () => (
    <div className="grid grid-cols-2 gap-8 items-center justify-items-center">
      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" color="blue">
            Top
          </Button>
        </Popover.Trigger>
        <Popover.Content side="top">
          <div className="p-4">
            <p>Popover appears on top</p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" color="green">
            Right
          </Button>
        </Popover.Trigger>
        <Popover.Content side="right">
          <div className="p-4">
            <p>Popover appears on right</p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" color="purple">
            Bottom
          </Button>
        </Popover.Trigger>
        <Popover.Content side="bottom">
          <div className="p-4">
            <p>Popover appears on bottom</p>
          </div>
        </Popover.Content>
      </Popover.Root>

      <Popover.Root>
        <Popover.Trigger>
          <Button variant="solid" color="red">
            Left
          </Button>
        </Popover.Trigger>
        <Popover.Content side="left">
          <div className="p-4">
            <p>Popover appears on left</p>
          </div>
        </Popover.Content>
      </Popover.Root>
    </div>
  ),
}

/**
 * Popover with rich content.
 */
export const RichContent: Story = {
  render: () => (
    <Popover.Root>
      <Popover.Trigger>
        <Button variant="solid" color="orange">
          Rich Content
        </Button>
      </Popover.Trigger>
      <Popover.Content>
        <div className="p-6 w-96">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
              U
            </div>
            <div>
              <h3 className="text-lg font-semibold">User Profile</h3>
              <p className="text-sm text-gray-500">user@example.com</p>
            </div>
          </div>

          <div className="space-y-3 mb-4">
            <div className="flex justify-between">
              <span className="text-gray-600">Name:</span>
              <span className="font-medium">John Doe</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Role:</span>
              <span className="font-medium">Administrator</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Status:</span>
              <span className="text-green-600 font-medium">Active</span>
            </div>
          </div>

          <div className="border-t pt-4">
            <div className="flex gap-2">
              <Button size="1" variant="solid">
                Edit Profile
              </Button>
              <Button size="1" variant="outline">
                View Settings
              </Button>
              <Popover.Close>
                <Button size="1" variant="ghost">
                  Close
                </Button>
              </Popover.Close>
            </div>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  ),
}

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

    return (
      <Popover.Root open={open} onOpenChange={setOpen}>
        <Popover.Trigger>
          <Button variant="solid" color="indigo">
            {open ? "Close Popover" : "Open Popover"}
          </Button>
        </Popover.Trigger>
        <Popover.Content>
          <div className="p-4">
            <h3 className="text-lg font-semibold mb-2">Controlled Popover</h3>
            <p className="text-gray-600 mb-4">
              This popover is controlled by React state. The button text changes based on the open
              state.
            </p>
            <div className="flex gap-2">
              <Button size="1" variant="solid" onClick={() => setOpen(false)}>
                Close
              </Button>
              <Button size="1" variant="outline" onClick={() => setOpen(false)}>
                Cancel
              </Button>
            </div>
          </div>
        </Popover.Content>
      </Popover.Root>
    )
  },
}

/**
 * Popover with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <Popover.Root>
      <Popover.Trigger>
        <Button variant="solid" color="crimson">
          Custom Style
        </Button>
      </Popover.Trigger>
      <Popover.Content className="bg-gradient-to-br from-purple-500 to-pink-500 text-white border-0">
        <div className="p-6">
          <h3 className="text-xl font-bold mb-3">Custom Styled Popover</h3>
          <p className="mb-4 opacity-90">
            This popover has custom styling with a gradient background and white text.
          </p>
          <div className="flex gap-2">
            <Button size="1" variant="solid" className="text-purple-600">
              Action
            </Button>
            <Popover.Close>
              <Button size="1" variant="outline">
                Close
              </Button>
            </Popover.Close>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  ),
}