import { useEffect, useRef } from 'react'
import { createPortal } from 'react-dom'

export default function ContextMenu({ x, y, items, onClose }) {
  const ref = useRef(null)

  useEffect(() => {
    const onMouseDown = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onClose()
    }
    const onKey = (e) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('mousedown', onMouseDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onMouseDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [onClose])

  // Keep menu inside viewport
  const W    = 192
  const H    = items.length * 34
  const adjX = Math.min(x, window.innerWidth  - W - 8)
  const adjY = Math.min(y, window.innerHeight - H - 8)

  // Portal to document.body — escapes any CSS transform stacking context
  // (e.g. the Drawer slide-in animation uses translateX which traps fixed children)
  return createPortal(
    <div
      ref={ref}
      style={{ position: 'fixed', left: adjX, top: adjY }}
      className="z-[9999] bg-surface-elevated border border-surface-border rounded-xl shadow-2xl py-1.5 min-w-[192px]"
    >
      {items.map((item, i) =>
        item.separator ? (
          <div key={i} className="my-1 border-t border-surface-border/60" />
        ) : (
          <button
            key={i}
            onClick={() => { item.action?.(); onClose() }}
            className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
              item.danger     ? 'text-red-400 hover:bg-red-500/10'    :
              item.highlight  ? 'text-gold hover:bg-gold/10'          :
                                'text-text-primary hover:bg-surface-border/40'
            }`}
          >
            <span className="text-[11px] opacity-70 w-3.5 flex-shrink-0">{item.icon}</span>
            <span className="flex-1">{item.label}</span>
            {item.shortcut && (
              <span className="text-[9px] text-text-muted/40 font-mono ml-2">{item.shortcut}</span>
            )}
          </button>
        )
      )}
    </div>,
    document.body
  )
}