import React, { useCallback, useRef, useState } from 'react';
import { useDismissablePopover } from '../hooks/useDismissablePopover';

interface ActionMenuProps {
  className?: string;
  panelClassName?: string;
  panelWidth?: 'default' | 'wide';
  renderTrigger: (props: {
    isOpen: boolean;
    toggleMenu: () => void;
  }) => React.ReactNode;
  children: (props: { closeMenu: () => void }) => React.ReactNode;
}

export const ActionMenu: React.FC<ActionMenuProps> = ({
  className,
  panelClassName,
  panelWidth = 'default',
  renderTrigger,
  children,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  // Shared dismissal (outside pointerdown + Escape). The hook consumes the
  // dismissing Escape, so closing an open Options menu no longer also runs
  // the host app's own Escape ladder — one Escape, one rung.
  const dismiss = useCallback(() => setIsOpen(false), []);
  useDismissablePopover({
    enabled: isOpen,
    ref: menuRef,
    onDismiss: dismiss,
  });

  return (
    <div ref={menuRef} className={className ? `relative ${className}` : 'relative'}>
      {renderTrigger({
        isOpen,
        toggleMenu: () => setIsOpen(open => !open),
      })}

      {isOpen && (
        <div
          data-pn-dismissable-popover="true"
          className={panelClassName ?? `absolute top-full right-0 mt-1 ${panelWidth === 'wide' ? 'w-64' : 'w-56'} rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]`}
        >
          {children({ closeMenu: () => setIsOpen(false) })}
        </div>
      )}
    </div>
  );
};

interface ActionMenuItemProps {
  onClick: () => void;
  icon: React.ReactNode;
  label: string;
  subtitle?: string;
  badge?: React.ReactNode;
  disabled?: boolean;
  /** ARIA menu semantics for hosts that render a real `role="menu"` popover
   *  (DecisionControl). Default undefined so existing consumers are unchanged. */
  role?: 'menuitem';
  /** Appended to the row's classes (e.g. a tone token). Default undefined so
   *  existing consumers are byte-identical. */
  className?: string;
}

export const ActionMenuItem: React.FC<ActionMenuItemProps> = ({
  onClick,
  icon,
  label,
  subtitle,
  badge,
  disabled = false,
  role,
  className,
}) => (
  <button
    data-pn-touch-target
    type="button"
    onClick={onClick}
    disabled={disabled}
    role={role}
    className={`flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-transparent${className ? ` ${className}` : ''}`}
  >
    <span className="text-muted-foreground">{icon}</span>
    {subtitle ? (
      <span className="flex flex-1 flex-col gap-0.5">
        <span>{label}</span>
        <span className="text-[10px] text-muted-foreground">{subtitle}</span>
      </span>
    ) : (
      <span className="flex-1">{label}</span>
    )}
    {badge}
  </button>
);

export const ActionMenuDivider: React.FC = () => (
  <div className="my-1 border-t border-border" />
);

export const ActionMenuSectionLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
    {children}
  </div>
);