Popover

import {
  autoUpdate,
  type FloatingContext,
  FloatingFocusManager,
  flip,
  hide,
  offset as offsetMiddleware,
  type Placement,
  shift,
  size,
  type UseFloatingOptions,
  type UseInteractionsReturn,
  useClick,
  useDismiss,
  useFloating,
  useInteractions,
  useMergeRefs,
  useRole,
  useTransitionStatus,
} from '@floating-ui/react';
import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr';
import {
  createContext,
  use,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from 'react';

import { Slot } from '@/components/slot';
import { useTopLayer } from '@/foundations/hooks/use-top-layer';
import { Spinner } from '@/components/spinner';
import { cn } from '@/lib/utils/classnames';

type PopoverOrigin = 'trigger' | 'pointer' | [number, number];

interface UsePopoverFloatingOptions {
  open?: boolean;
  onOpenChange?: UseFloatingOptions['onOpenChange'];
  placement?: Placement;
  offset?: number;
  origin?: PopoverOrigin;
  // Cross-axis fallbacks for `flip()`. Useful for nested menus on narrow
  // viewports where neither side has horizontal room — e.g. ['left-start',
  // 'bottom-start', 'top-start'] lets a `right-start` submenu fall back below
  // the trigger.
  flipFallbackPlacements?: Placement[];
  // FloatingTree integration — used by Menu for nested submenu coordination.
  nodeId?: string;
}

const usePopoverFloating = ({
  open: propsOpen,
  onOpenChange: propsOnOpenChange,
  placement = 'bottom',
  offset = 4,
  origin = 'trigger',
  flipFallbackPlacements,
  nodeId,
}: UsePopoverFloatingOptions) => {
  const [internalOpen, setInternalOpen] = useState(false);
  const open = propsOpen ?? internalOpen;

  const setOpen = useCallback<NonNullable<UseFloatingOptions['onOpenChange']>>(
    (open, event, reason) => {
      setInternalOpen(open);
      propsOnOpenChange?.(open, event, reason);
    },
    [propsOnOpenChange]
  );

  const floating = useFloating({
    nodeId,
    placement,
    open,
    onOpenChange: setOpen,
    // Pause `update()` while a text-input descendant of the floating element
    // has focus. iOS fires scroll/resize on `window.visualViewport` when the
    // soft keyboard opens — without this guard, those events trigger
    // `flip()` to re-evaluate against the shrunken viewport, the panel
    // re-renders with a new placement, and the focused input loses focus,
    // dismissing the keyboard in a loop. The listeners live in
    // `whileElementsMounted` so they're tied to floating-ui's lifecycle and
    // don't need a separate `useEffect`.
    whileElementsMounted: (reference, floatingEl, update) => {
      let paused = false;
      const isTextInput = (n: EventTarget | null) =>
        n instanceof HTMLElement &&
        (n.tagName === 'INPUT' ||
          n.tagName === 'TEXTAREA' ||
          n.isContentEditable);
      const onFocusIn = (e: FocusEvent) => {
        if (isTextInput(e.target)) paused = true;
      };
      const onFocusOut = (e: FocusEvent) => {
        if (isTextInput(e.target)) paused = false;
      };
      floatingEl.addEventListener('focusin', onFocusIn);
      floatingEl.addEventListener('focusout', onFocusOut);

      const cleanup = autoUpdate(
        reference,
        floatingEl,
        () => {
          if (paused) return;
          update();
        },
        { layoutShift: false }
      );

      return () => {
        cleanup();
        floatingEl.removeEventListener('focusin', onFocusIn);
        floatingEl.removeEventListener('focusout', onFocusOut);
      };
    },
    middleware: [
      flip({ padding: 8, fallbackPlacements: flipFallbackPlacements }),
      shift({ padding: 8 }),
      offsetMiddleware(offset),
      size({
        apply({ rects, elements, availableHeight }) {
          elements.floating.style.setProperty(
            '--max-height',
            `${availableHeight}px`
          );

          elements.floating.style.setProperty(
            '--width',
            `${rects.reference.width}px`
          );
        },
        padding: 4,
      }),
      hide(),
    ],
  });

  // When origin is an explicit [x, y], pin the floating element to that point
  // via Floating UI's virtual reference pattern. The trigger element stays the
  // interaction reference (focus, dismiss); only positioning changes. We don't
  // reset to null in the 'trigger' / 'pointer' branches: setPositionReference
  // is wired into Floating UI's lower-level setReference, and clearing it
  // after the trigger's ref callback has already registered would break
  // positioning entirely.
  useEffect(() => {
    if (Array.isArray(origin)) {
      const [x, y] = origin;
      floating.refs.setPositionReference({
        getBoundingClientRect: () => ({
          width: 0,
          height: 0,
          x,
          y,
          top: y,
          right: x,
          bottom: y,
          left: x,
        }),
      });
    }
  }, [origin, floating.refs]);

  return useMemo(
    () => ({
      open,
      setOpen,
      origin,
      ...floating,
    }),
    [open, setOpen, origin, floating]
  );
};

// Context

interface ContextType
  extends ReturnType<typeof usePopoverFloating>,
    UseInteractionsReturn {
  modal: boolean;
}

const PopoverContext = createContext<ContextType | null>(null);

const usePopoverContext = () => {
  const context = use(PopoverContext);

  if (context == null) {
    throw new Error('Popover components must be wrapped in <Popover />');
  }

  return context;
};

// Components

interface PopoverProps extends UsePopoverFloatingOptions {
  modal?: boolean;
  children: React.ReactNode;
}
/**
 * Popover allows you to open a floating panel that is attached to a trigger element.
 *
 * Set `modal` to `true` to focus trap the popover.
 *
 * @example
 * ```
 * <Popover>
 *   <Popover.Trigger>
 *     <Button>Open Popover</Button>
 *   </Popover.Trigger>
 *   <Popover.Content>
 *     <p>Popover Content</p>
 *   </Popover.Content>
 * </Popover>
 * ```
 */
const Popover = ({ children, modal = false, ...props }: PopoverProps) => {
  const floating = usePopoverFloating(props);

  const click = useClick(floating.context);
  const dismiss = useDismiss(floating.context);
  const role = useRole(floating.context);

  const interactions = useInteractions([click, dismiss, role]);

  const popoverContextValue = useMemo(
    () => ({
      ...floating,
      ...interactions,
      modal,
    }),
    [floating, interactions, modal]
  );

  return (
    <PopoverContext value={popoverContextValue}>{children}</PopoverContext>
  );
};

interface PopoverTriggerProps extends React.ComponentPropsWithRef<'button'> {
  asChild?: boolean;
}

/**
 * Will open the popover when clicked.
 *
 * Use `asChild` to render as your child element.
 *
 * @example
 * ```
 * <Popover.Trigger>
 *   <Button>Open Popover</Button>
 * </Popover.Trigger>
 *
 * <Popover.Trigger asChild={false}>
 *   Open Popover
 * </Popover.Trigger>
 * ```
 */
const PopoverTrigger = ({
  ref: refProp,
  children,
  asChild = false,
  className,
  ...props
}: PopoverTriggerProps) => {
  const context = usePopoverContext();
  const Comp = asChild ? Slot : 'button';

  const ref = useMergeRefs([context.refs.setReference, refProp]);
  const referenceProps = context.getReferenceProps(props);

  return (
    <Comp
      ref={ref}
      type={asChild ? undefined : 'button'}
      className={cn(!asChild && 'disabled:opacity-40', className)}
      data-state={context.open ? 'open' : 'closed'}
      {...referenceProps}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
        // Pointer mode: capture the click coordinates and pin the floating
        // panel there. Keyboard-triggered clicks have clientX/Y of 0 — we
        // skip in that case and let positioning fall back to the trigger.
        if (
          context.origin === 'pointer' &&
          !context.open &&
          event.clientX &&
          event.clientY
        ) {
          const x = event.clientX;
          const y = event.clientY;
          context.refs.setPositionReference({
            getBoundingClientRect: () => ({
              width: 0,
              height: 0,
              x,
              y,
              top: y,
              right: x,
              bottom: y,
              left: x,
            }),
          });
        }
        if (typeof referenceProps.onClick === 'function') {
          referenceProps.onClick(event);
        }
      }}
    >
      {children}
    </Comp>
  );
};

/**
 * Will render the popover content.
 *
 * @example
 * ```
 * <Popover.Content>
 *   <p>Popover Content</p>
 * </Popover.Content>
 * ```
 */
const PopoverContent = ({
  ref: refProp,
  className,
  children,
  ...props
}: React.ComponentPropsWithRef<'div'>) => {
  const { context, refs, getFloatingProps, modal, isPositioned } =
    usePopoverContext();

  const ref = useMergeRefs([refs.setFloating, refProp]);

  return (
    <PopoverPanel
      context={context}
      modal={modal}
      isPositioned={isPositioned}
      ref={ref}
      className={cn(
        'z-50 max-h-(--max-height) w-72 overflow-auto rounded-xl border border-border bg-background p-3 font-medium text-foreground shadow-lg outline-none',
        className
      )}
      {...getFloatingProps(props)}
    >
      {children}
    </PopoverPanel>
  );
};

interface PopoverPanelProps extends React.ComponentPropsWithRef<'div'> {
  context: FloatingContext;
  modal?: boolean;
  isPositioned?: boolean;
  initialFocus?: number | React.RefObject<HTMLElement | null>;
  returnFocus?: boolean;
  animate?: boolean;
}

/**
 *
 * PopoverPanel is the actual floating panel that will be positioned relative to the trigger.
 * It's exported for internal purposes only, to avoid duplicating the logic of positioning and transitions.
 * It is not part of the public API as it is included already in the PopoverContent component.
 * @returns
 */
const PopoverPanel = ({
  ref,
  context,
  modal,
  isPositioned = true,
  initialFocus,
  returnFocus,
  animate = true,
  className,
  style,
  ...props
}: PopoverPanelProps) => {
  const { isMounted, status } = useTransitionStatus(context, {
    duration: animate ? 150 : 0,
  });
  const topLayerRef = useTopLayer<HTMLDivElement>(isMounted);

  const mergedRef = useMergeRefs([ref, topLayerRef]);

  if (!isMounted) return null;

  // Hide until floating-ui has computed the position. Otherwise the panel
  // renders at (0, 0) on the first frame and FloatingFocusManager's autofocus
  // makes the browser scroll the document toward that point before the real
  // position is applied.
  const hidden = !isPositioned || context.middlewareData.hide?.referenceHidden;

  return (
    <FloatingFocusManager
      context={context}
      modal={modal}
      initialFocus={initialFocus}
      returnFocus={returnFocus}
    >
      <div
        ref={mergedRef}
        data-state={['open', 'initial'].includes(status) ? 'open' : 'closed'}
        data-side={context.placement.split('-')[0]}
        className={cn(
          animate && [
            'origin-(--transform-origin) transition duration-300 ease-out',
            'data-[state=closed]:data-[side=left]:translate-x-2 data-[state=closed]:data-[side=right]:-translate-x-2 data-[state=closed]:data-[side=bottom]:-translate-y-2 data-[state=closed]:data-[side=top]:translate-y-2',
            'data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=closed]:duration-150',
            'data-[state=open]:translate-x-0 data-[state=open]:translate-y-0 data-[state=open]:scale-100',
          ],
          className
        )}
        style={{
          position: context.strategy,
          top: context.y ?? 0,
          left: context.x ?? 0,
          '--transform-origin': placementToTransformOrigin(context.placement),
          visibility: hidden ? 'hidden' : 'visible',
          ...style,
        }}
        {...props}
      />
    </FloatingFocusManager>
  );
};

// ugly and verbose but easy to reason about and maintain
const placementToTransformOrigin = (placement: Placement) => {
  switch (placement) {
    case 'top':
      return 'bottom';
    case 'bottom':
      return 'top';
    case 'left':
      return 'right';
    case 'right':
      return 'left';
    case 'top-start':
      return 'bottom left';
    case 'top-end':
      return 'bottom right';
    case 'bottom-start':
      return 'top left';
    case 'bottom-end':
      return 'top right';
    case 'left-start':
      return 'right top';
    case 'left-end':
      return 'right bottom';
    case 'right-start':
      return 'left top';
    case 'right-end':
      return 'left bottom';
  }
};

interface PopoverCloseProps extends React.ComponentPropsWithRef<'button'> {
  asChild?: boolean;
}

/**
 * Will close the popover when clicked.
 *
 * Useful to dismiss the popover from within (e.g.: popover with a form and a cancel button).
 *
 * Use `asChild` to render as your child element.
 *
 * @example
 * ```
 * <Popover>
 *   <Popover.Trigger>
 *     <Button>Open Popover</Button>
 *   </Popover.Trigger>
 *   <Popover.Content>
 *     <Popover.Close>
 *       <Button>Cancel</Button>
 *     </Popover.Close>
 *   </Popover.Content>
 * </Popover>
 * ```
 */
const PopoverClose = ({
  asChild = false,
  children,
  ...props
}: PopoverCloseProps) => {
  const { setOpen } = usePopoverContext();
  const Comp = asChild ? Slot : 'button';

  return (
    <Comp
      {...props}
      onClick={(event: React.MouseEvent<HTMLElement>) => {
        props.onClick?.(event as React.MouseEvent<HTMLButtonElement>);
        setOpen(false);
      }}
    >
      {children}
    </Comp>
  );
};

interface PopoverSearchInputProps extends React.ComponentPropsWithRef<'input'> {
  isLoading?: boolean;
}

const PopoverSearchInput = ({
  className,
  isLoading,
  ...props
}: PopoverSearchInputProps) => {
  return (
    <div className="relative flex items-center rounded-t-lg border-border border-b bg-transparent">
      {isLoading ? (
        <Spinner size="sm" className="absolute left-4 text-foreground" />
      ) : (
        <MagnifyingGlassIcon
          weight="bold"
          className="absolute left-4 size-4 shrink-0 text-foreground"
        />
      )}
      <input
        className={cn(
          'h-10 w-full border-0 bg-transparent p-4 pl-10 font-medium text-base outline-none transition-colors placeholder:text-foreground-secondary focus:ring-0',
          className
        )}
        {...props}
      />
    </div>
  );
};

const PopoverEmpty = ({
  children,
  className,
  ...props
}: React.ComponentPropsWithRef<'div'>) => {
  return (
    <div
      className={cn(
        'my-4 text-center text-base text-foreground-secondary',
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
};

const CompoundPopover = Object.assign(Popover, {
  Trigger: PopoverTrigger,
  Content: PopoverContent,
  Close: PopoverClose,
  SearchInput: PopoverSearchInput,
  Empty: PopoverEmpty,
  Panel: PopoverPanel,
});

export type { PopoverOrigin };
export {
  CompoundPopover as Popover,
  PopoverContext,
  usePopoverContext,
  // internal use only
  usePopoverFloating,
};