// @design-system: overlays/Popover
// Registered at /design-system#popover-overlay - Phase 3 (Agent 3E) will render the gallery.

import * as RadixPopover from '@radix-ui/react-popover';
import { cn } from '@/lib/cn';

// ─── Root + Trigger ────────────────────────────────────────────────────────

/** Root popover controller. */
export const Popover = RadixPopover.Root;

/** Trigger element for opening the popover. */
export const PopoverTrigger = RadixPopover.Trigger;

/** Portal wrapper (internal use — not exported). */
const PopoverPortal = RadixPopover.Portal;

/** Anchor element for positioning. */
export const PopoverAnchor = RadixPopover.Anchor;

// ─── Content ──────────────────────────────────────────────────────────────

/** Props for PopoverContent */
export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Content>;

/**
 * Multideal-styled popover panel.
 *
 * @example
 * ```tsx
 * <Popover>
 *   <PopoverTrigger asChild><Button variant="ghost">...</Button></PopoverTrigger>
 *   <PopoverContent>{...}</PopoverContent>
 * </Popover>
 * ```
 */
export function PopoverContent({
  className,
  align = 'center',
  sideOffset = 6,
  children,
  ...props
}: PopoverContentProps) {
  return (
    <PopoverPortal>
      <RadixPopover.Content
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'z-popover',
          'rounded-lg border border-border-default bg-surface-base',
          'shadow-lg',
          'p-4',
          'w-72',
          'focus:outline-none',
          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          'data-[side=bottom]:slide-in-from-top-2',
          'data-[side=top]:slide-in-from-bottom-2',
          'data-[side=start]:slide-in-from-end-2',
          'data-[side=end]:slide-in-from-start-2',
          'motion-reduce:animate-none motion-reduce:transition-none',
          className,
        )}
        {...props}
      >
        {children}
      </RadixPopover.Content>
    </PopoverPortal>
  );
}

/** Close button inside popover. */
export const PopoverClose = RadixPopover.Close;