import React from 'react'
import { Edit } from 'lucide-react'

interface SegmentContextMenuProps {
  isOpen: boolean
  position: { x: number; y: number }
  onClose: () => void
  onEdit: () => void
  onCopy?: () => void
  onDelete?: () => void
  onInfo?: () => void
}

export const SegmentContextMenu: React.FC<SegmentContextMenuProps> = ({
  isOpen,
  position,
  onClose,
  onEdit
}) => {
  React.useEffect(() => {
    if (isOpen) {
      const handleClickOutside = () => onClose()
      const handleEscape = (e: KeyboardEvent) => {
        if (e.key === 'Escape') onClose()
      }
      
      document.addEventListener('click', handleClickOutside)
      document.addEventListener('keydown', handleEscape)
      
      return () => {
        document.removeEventListener('click', handleClickOutside)
        document.removeEventListener('keydown', handleEscape)
      }
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div
      className="fixed bg-white border border-gray-200 rounded-lg shadow-lg py-2 z-50 min-w-[160px]"
      style={{
        left: position.x,
        top: position.y,
      }}
      onClick={(e) => e.stopPropagation()}
    >
      <button
        onClick={() => {
          onEdit()
          onClose()
        }}
        className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
      >
        <Edit size={14} />
        重命名
      </button>
    </div>
  )
}
