"use client"

import * as React from "react"

import { LeoAssistSelectionToolbarPreview } from "@/components/design-system/leo-assist-bar-previews"
import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Tip } from "@/components/ui/tip"

export function DialogPreview() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button type="button" variant="outline" size="sm">
          Open dialog
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog title</DialogTitle>
          <DialogDescription>Short blocking confirmation copy.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

export function AlertDialogPreview() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button type="button" variant="outline" size="sm">
          Confirm action
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Archive pattern?</AlertDialogTitle>
          <AlertDialogDescription>
            This removes the pattern from the active catalog view.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Archive</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

export function PopoverPreview() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button type="button" variant="outline" size="sm">
          Open popover
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-56">
        <p className="text-sm text-muted-foreground">Anchored non-modal surface.</p>
      </PopoverContent>
    </Popover>
  )
}

export function HoverCardPreview() {
  return (
    <HoverCard openDelay={200}>
      <HoverCardTrigger asChild>
        <Button type="button" variant="link" className="h-auto p-0">
          Hover for preview
        </Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-64">
        <p className="text-sm">Row identity preview content.</p>
      </HoverCardContent>
    </HoverCard>
  )
}

/** Simple overflow menu (row / toolbar). */
export function DropdownMenuPreview() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button type="button" variant="outline" size="sm">
          Actions
          <i className="fa-light fa-chevron-down" data-icon="inline-end" aria-hidden="true" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="min-w-48">
        <DropdownMenuGroup>
          <DropdownMenuItem shortcut="⌘E">
            <i className="fa-light fa-pen" aria-hidden="true" />
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem shortcut="⌘D">
            <i className="fa-light fa-copy" aria-hidden="true" />
            Duplicate
          </DropdownMenuItem>
          <DropdownMenuItem>
            <i className="fa-light fa-arrow-up-right-from-square" aria-hidden="true" />
            Open in new tab
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <i className="fa-light fa-trash" aria-hidden="true" />
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** Groups, checkboxes, radio, and submenu. */
export function DropdownMenuRichPreview() {
  const [showArchived, setShowArchived] = React.useState(false)
  const [density, setDensity] = React.useState("comfortable")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button type="button" variant="outline" size="sm">
          View options
          <i className="fa-light fa-sliders" data-icon="inline-end" aria-hidden="true" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="min-w-56">
        <DropdownMenuLabel>Display</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuCheckboxItem
            checked={showArchived}
            onCheckedChange={(v) => setShowArchived(v === true)}
          >
            Show archived
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Density</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="spacious">Spacious</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <i className="fa-light fa-share-nodes" aria-hidden="true" />
            Share
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>
              <i className="fa-light fa-link" aria-hidden="true" />
              Copy link
            </DropdownMenuItem>
            <DropdownMenuItem>
              <i className="fa-light fa-envelope" aria-hidden="true" />
              Email coordinators
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem>
          <i className="fa-light fa-download" aria-hidden="true" />
          Export CSV
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** Icon-only trigger (hub row overflow). */
export function DropdownMenuIconPreview() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button type="button" size="icon-sm" variant="ghost" aria-label="More actions">
          <i className="fa-light fa-ellipsis" aria-hidden="true" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="min-w-44">
        <DropdownMenuItem>View details</DropdownMenuItem>
        <DropdownMenuItem>Move to folder</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Remove</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** Right-click contextual menu with groups, shortcuts, and submenu. */
export function ContextMenuPreview() {
  const [bookmarked, setBookmarked] = React.useState(true)
  const [priority, setPriority] = React.useState("normal")

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-28 w-full max-w-md cursor-context-menu items-center justify-center rounded-md border border-dashed border-border px-4 text-center text-sm text-muted-foreground">
        Right-click this surface for the contextual menu
      </ContextMenuTrigger>
      <ContextMenuContent className="min-w-52">
        <ContextMenuLabel>Question</ContextMenuLabel>
        <ContextMenuItem>
          Open
          <ContextMenuShortcut>↵</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Duplicate
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={bookmarked}
          onCheckedChange={(v) => setBookmarked(v === true)}
        >
          Bookmarked
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>Priority</ContextMenuLabel>
        <ContextMenuRadioGroup value={priority} onValueChange={setPriority}>
          <ContextMenuRadioItem value="high">High</ContextMenuRadioItem>
          <ContextMenuRadioItem value="normal">Normal</ContextMenuRadioItem>
          <ContextMenuRadioItem value="low">Low</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Library</ContextMenuItem>
            <ContextMenuItem>Drafts</ContextMenuItem>
            <ContextMenuItem>Archive</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

/** Canonical demo lives on Leo Assist Bar; re-exported for Dropdown Menu docs. */
export function TextSelectionToolbarPreview() {
  return <LeoAssistSelectionToolbarPreview />
}

export function TipPreview() {
  return (
    <Tip label="Icon-only control needs a tip" side="top">
      <Button type="button" size="icon-sm" variant="outline" aria-label="Info">
        <i className="fa-light fa-circle-info" aria-hidden="true" />
      </Button>
    </Tip>
  )
}

export function TooltipPreview() {
  return (
    <Tip label="Prefer Tip in product code" side="top">
      <Button type="button" variant="outline" size="sm">
        Hover me
      </Button>
    </Tip>
  )
}