'use client'

import { useEffect, useRef } from'react'
import { Edit2, Copy, Trash2 } from'lucide-react'

interface Props {
 count: number
 x: number
 y: number
 onClose: () => void
 onBulkEdit: () => void
 onBulkCopy: () => void
 onBulkDelete: () => void
}

export default function BulkContextMenu({ count, x, y, onClose, onBulkEdit, onBulkCopy, onBulkDelete }: Props) {
 const menuRef = useRef<HTMLDivElement>(null)
 const adjX = x + 224 > window.innerWidth ? x - 224 : x
 const adjY = y + 120 > window.innerHeight ? y - 120 : y

 useEffect(() => {
 function onClick(e: MouseEvent) {
 if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose()
 }
 function onKey(e: KeyboardEvent) { if (e.key ==='Escape') onClose() }
 document.addEventListener('pointerdown', onClick)
 document.addEventListener('keydown', onKey)
 return () => {
 document.removeEventListener('pointerdown', onClick)
 document.removeEventListener('keydown', onKey)
 }
 }, [onClose])

 return (
 <div
 ref={menuRef}
 className="fixed z-[100] bg-card border border-muted rounded-lg py-1 w-56 text-[12px]"
 style={{ left: adjX, top: adjY }}
 >
 <button
 className="w-full flex items-center gap-2.5 px-3 py-1.5 text-foreground hover:bg-muted transition-colors"
 onClick={() => { onBulkEdit(); onClose() }}
 >
 <Edit2 size={13} className="text-muted-foreground"/>
 Ausgewählte bearbeiten ({count})
 </button>
 <button
 className="w-full flex items-center gap-2.5 px-3 py-1.5 text-foreground hover:bg-muted transition-colors"
 onClick={() => { onBulkCopy(); onClose() }}
 >
 <Copy size={13} className="text-muted-foreground"/>
 Ausgewählte kopieren ({count})
 </button>
 <div className="my-1 border-t border-muted"/>
 <button
 className="w-full flex items-center gap-2.5 px-3 py-1.5 text-destructive hover:bg-status-red-soft transition-colors"
 onClick={() => { onBulkDelete(); onClose() }}
 >
 <Trash2 size={13} />
 Ausgewählte löschen ({count})
 </button>
 </div>
 )
}