// tdd-guard:skip — context-menu UI (position + outside-click state); no pure logic to test in isolation
'use client'

import { useEffect, useRef, useState } from'react'
import { Edit2, Copy, CheckCircle, Clock, AlertTriangle, XCircle, Trash2, ChevronRight } from'lucide-react'
import type { Assignment, AssignmentStatus } from'@/lib/planning-types'

interface Props {
 assignment: Assignment
 x: number
 y: number
 onClose: () => void
 onEdit: () => void
 onDuplicate: () => void
 onStatusChange: (status: AssignmentStatus) => void
 onDelete: () => void
}

const STATUS_ITEMS: { value: AssignmentStatus; label: string; icon: React.ReactNode; color: string }[] = [
 { value:'fixed', label:'Fest', icon: <CheckCircle size={12} />, color:'#65A30D'},
 { value:'tentative', label:'Vorläufig', icon: <Clock size={12} />, color:'#EAB308'},
 { value:'critical', label:'Kritisch', icon: <AlertTriangle size={12} />, color:'#DC2626'},
 { value:'cancelled', label:'Storniert', icon: <XCircle size={12} />, color:'#6B7280'},
]

export default function AssignmentContextMenu({
 assignment, x, y, onClose, onEdit, onDuplicate, onStatusChange, onDelete,
}: Props) {
 const menuRef = useRef<HTMLDivElement>(null)
 // Tap-Toggle für das Status-Submenu — group-hover allein ist auf iPad unsichtbar (KAR-708)
 const [statusOpen, setStatusOpen] = useState(false)

 // Adjust position so menu stays in viewport
 const adjustedX = x + 200 > window.innerWidth ? x - 200 : x
 const adjustedY = y + 200 > window.innerHeight ? y - 200 : y

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

 return (
 <div
 ref={menuRef}
 className="fixed z-[100] bg-card border border-muted rounded-lg py-1 w-48 text-[12px]"
 style={{ left: adjustedX, top: adjustedY }}
 >
 {/* Edit */}
 <button
 className="w-full flex items-center gap-2.5 px-3 py-1.5 text-foreground hover:bg-muted transition-colors"
 onClick={() => { onEdit(); onClose() }}
 >
 <Edit2 size={13} className="text-muted-foreground"/>
 Bearbeiten
 </button>

 {/* Duplicate */}
 <button
 className="w-full flex items-center gap-2.5 px-3 py-1.5 text-foreground hover:bg-muted transition-colors"
 onClick={() => { onDuplicate(); onClose() }}
 >
 <Copy size={13} className="text-muted-foreground"/>
 Kopieren
 </button>

 <div className="my-1 border-t border-muted"/>

 {/* Status submenu */}
 <div className="relative group">
 <button
 className="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-foreground hover:bg-muted transition-colors"
 onClick={() => setStatusOpen(v => !v)}
 >
 <span className="flex items-center gap-2.5">
 <span
 className="w-2 h-2 rounded-full shrink-0"
 style={{ backgroundColor: STATUS_ITEMS.find((s) => s.value === assignment.status)?.color ??'#999'}}
 />
 Status ändern
 </span>
 <ChevronRight size={12} className="text-muted-foreground"/>
 </button>
 {/* Submenu */}
 <div className={`absolute left-full top-0 ml-0.5 bg-card border border-muted rounded-lg py-1 w-40 ${statusOpen ? 'block' : 'hidden group-hover:block'}`}>
 {STATUS_ITEMS.map((s) => (
 <button
 key={s.value}
 className={`w-full flex items-center gap-2.5 px-3 py-1.5 transition-colors ${
 assignment.status === s.value
 ?'bg-[#EEF5FB] text-primary font-medium'
 :'text-foreground hover:bg-muted'
 }`}
 onClick={() => { onStatusChange(s.value); onClose() }}
 >
 <span style={{ color: s.color }}>{s.icon}</span>
 {s.label}
 </button>
 ))}
 </div>
 </div>

 <div className="my-1 border-t border-muted"/>

 {/* Delete */}
 <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={() => { onDelete(); onClose() }}
 >
 <Trash2 size={13} />
 Löschen
 </button>
 </div>
 )
}