import { createSignal, Show } from "solid-js";
import { Dialog } from "pettyui/dialog";
import { AlertDialog } from "pettyui/alert-dialog";
import { Drawer } from "pettyui/drawer";
import { Popover } from "pettyui/popover";
import { TooltipRoot, TooltipTrigger, TooltipContent } from "pettyui/tooltip";
import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from "pettyui/hover-card";
import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "pettyui/dropdown-menu";
import { ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "pettyui/context-menu";
import { CommandPalette } from "pettyui/command-palette";
import { ComponentDemo } from "../component-demo";

const triggerBtn = "px-3 py-1.5 text-sm font-medium rounded border border-gray-300 hover:bg-gray-50";
const overlayBg = "fixed inset-0 bg-black/40 z-40";
const panelBase = "bg-white rounded-lg shadow-xl p-6 z-50";
const modalPos = "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96";

/** Dialog demo with modal overlay. */
function DialogDemo() {
  const content = (
    <Dialog>
      <Dialog.Trigger class={triggerBtn}>Open Dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay class={overlayBg} />
        <Dialog.Content class={`${modalPos} ${panelBase}`}>
          <Dialog.Title class="text-lg font-semibold mb-1">Dialog Title</Dialog.Title>
          <Dialog.Description class="text-sm text-gray-500 mb-4">
            This is a modal dialog. Press Escape or click Close to dismiss.
          </Dialog.Description>
          <Dialog.Close class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700">Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  );
  return content;
}

/** AlertDialog demo with confirm/cancel actions. */
function AlertDialogDemo() {
  const content = (
    <AlertDialog>
      <AlertDialog.Trigger class={triggerBtn}>Delete Item</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay class={overlayBg} />
        <AlertDialog.Content class={`${modalPos} ${panelBase}`}>
          <AlertDialog.Title class="text-lg font-semibold mb-1">Are you sure?</AlertDialog.Title>
          <AlertDialog.Description class="text-sm text-gray-500 mb-4">This action cannot be undone.</AlertDialog.Description>
          <div class="flex justify-end gap-2">
            <AlertDialog.Cancel class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50">Cancel</AlertDialog.Cancel>
            <AlertDialog.Action class="px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700">Delete</AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog>
  );
  return content;
}

/** Drawer demo sliding in from the right edge. */
function DrawerDemo() {
  const content = (
    <Drawer>
      <Drawer.Trigger class={triggerBtn}>Open Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay class={overlayBg} />
        <Drawer.Content class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 p-6">
          <Drawer.Title class="text-lg font-semibold mb-1">Drawer Panel</Drawer.Title>
          <Drawer.Description class="text-sm text-gray-500 mb-4">This drawer slides in from the right.</Drawer.Description>
          <Drawer.Close class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50">Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer>
  );
  return content;
}

/** Popover demo with floating content panel. */
function PopoverDemo() {
  const content = (
    <Popover>
      <Popover.Trigger class={triggerBtn}>Toggle Popover</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content class="bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50 w-64">
          <p class="text-sm text-gray-700 mb-2">This is a popover with interactive content.</p>
          <Popover.Close class="text-xs text-indigo-600 hover:underline">Dismiss</Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover>
  );
  return content;
}

/** Tooltip demo that appears on hover. */
function TooltipDemo() {
  const content = (
    <TooltipRoot>
      <TooltipTrigger class={triggerBtn}>Hover me</TooltipTrigger>
      <TooltipContent class="bg-gray-900 text-white text-xs rounded px-2 py-1 z-50 shadow">
        This is a tooltip
      </TooltipContent>
    </TooltipRoot>
  );
  return content;
}

/** HoverCard demo with rich preview on hover. */
function HoverCardDemo() {
  const content = (
    <HoverCardRoot>
      <HoverCardTrigger class="text-sm text-indigo-600 underline cursor-pointer">@pettyui</HoverCardTrigger>
      <HoverCardContent class="bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50 w-64">
        <p class="font-medium text-sm">PettyUI</p>
        <p class="text-xs text-gray-500 mt-1">AI-native headless UI for SolidJS. 44 components.</p>
      </HoverCardContent>
    </HoverCardRoot>
  );
  return content;
}

/** DropdownMenu demo with action items. */
function DropdownMenuDemo() {
  const content = (
    <DropdownMenuRoot>
      <DropdownMenuTrigger class={triggerBtn}>Actions ▾</DropdownMenuTrigger>
      <DropdownMenuContent class="border border-gray-200 rounded bg-white shadow-lg z-50 min-w-40 py-1">
        <DropdownMenuItem class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer">Edit</DropdownMenuItem>
        <DropdownMenuItem class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer">Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator class="h-px bg-gray-200 my-1" />
        <DropdownMenuItem class="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 cursor-pointer">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuRoot>
  );
  return content;
}

/** ContextMenu demo with right-click trigger area. */
function ContextMenuDemo() {
  const content = (
    <ContextMenuRoot>
      <ContextMenuTrigger class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center text-sm text-gray-500">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent class="border border-gray-200 rounded bg-white shadow-lg z-50 min-w-40 py-1">
        <ContextMenuItem class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer">Copy</ContextMenuItem>
        <ContextMenuItem class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer">Paste</ContextMenuItem>
        <ContextMenuItem class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer">Inspect</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuRoot>
  );
  return content;
}

/** CommandPalette demo with searchable commands. */
function CommandPaletteDemo() {
  const [open, setOpen] = createSignal(false);
  const content = (
    <div>
      <button type="button" class={triggerBtn} onClick={() => setOpen((v) => !v)}>
        {open() ? "Close" : "Open"} Command Palette
      </button>
      <Show when={open()}>
        <CommandPalette class={`${modalPos} bg-white border border-gray-200 rounded-lg shadow-xl z-50`}>
          <CommandPalette.Input placeholder="Type a command..." class="w-full px-4 py-3 text-sm border-b border-gray-200 focus:outline-none" />
          <CommandPalette.List class="max-h-60 overflow-y-auto p-2">
            <CommandPalette.Group>
              <CommandPalette.Item value="new-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">New File</CommandPalette.Item>
              <CommandPalette.Item value="open-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Open File</CommandPalette.Item>
              <CommandPalette.Item value="save" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Save</CommandPalette.Item>
            </CommandPalette.Group>
            <CommandPalette.Empty class="px-3 py-4 text-sm text-gray-400 text-center">No results found</CommandPalette.Empty>
          </CommandPalette.List>
        </CommandPalette>
      </Show>
    </div>
  );
  return content;
}

/** Overlays section showcasing all overlay and modal components. */
export function OverlaysSection() {
  const content = (
    <>
      <ComponentDemo name="Dialog" description="Modal overlay that interrupts the user with important content requiring acknowledgment">
        <DialogDemo />
      </ComponentDemo>
      <ComponentDemo name="AlertDialog" description="Modal dialog for critical confirmations that requires explicit user action to dismiss">
        <AlertDialogDemo />
      </ComponentDemo>
      <ComponentDemo name="Drawer" description="Panel that slides in from the edge of the screen">
        <DrawerDemo />
      </ComponentDemo>
      <ComponentDemo name="Popover" description="Floating content panel anchored to a trigger element">
        <PopoverDemo />
      </ComponentDemo>
      <ComponentDemo name="Tooltip" description="Floating label that appears on hover/focus to describe an element">
        <TooltipDemo />
      </ComponentDemo>
      <ComponentDemo name="HoverCard" description="Card that appears on hover to preview linked content">
        <HoverCardDemo />
      </ComponentDemo>
      <ComponentDemo name="DropdownMenu" description="Menu of actions triggered by a button">
        <DropdownMenuDemo />
      </ComponentDemo>
      <ComponentDemo name="ContextMenu" description="Right-click context menu with keyboard navigation">
        <ContextMenuDemo />
      </ComponentDemo>
      <ComponentDemo name="CommandPalette" description="Search-driven command menu for finding and executing actions">
        <CommandPaletteDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
