'use client'

import { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'

type Props = {
    x: number
    y: number
    onClose: () => void
    onOpenStats: () => void
}

export default function PlayerContextMenu({ x, y, onClose, onOpenStats }: Props) {
    const { t } = useTranslation()
    const panelRef = useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        const onKey = (e: KeyboardEvent) => {
            if (e.key === 'Escape') onClose()
        }
        const onPointer = (e: MouseEvent) => {
            const el = panelRef.current
            if (el && !el.contains(e.target as Node)) onClose()
        }
        document.addEventListener('keydown', onKey)
        document.addEventListener('mousedown', onPointer)
        return () => {
            document.removeEventListener('keydown', onKey)
            document.removeEventListener('mousedown', onPointer)
        }
    }, [onClose])

    useEffect(() => {
        const el = panelRef.current
        if (!el) return
        const rect = el.getBoundingClientRect()
        const pad = 8
        let left = x
        let top = y
        if (left + rect.width > window.innerWidth - pad) {
            left = Math.max(pad, window.innerWidth - rect.width - pad)
        }
        if (top + rect.height > window.innerHeight - pad) {
            top = Math.max(pad, window.innerHeight - rect.height - pad)
        }
        el.style.left = `${left}px`
        el.style.top = `${top}px`
    }, [x, y])

    return (
        <div
            ref={panelRef}
            className="fixed z-[200] min-w-[160px] overflow-hidden rounded-lg border border-white/15 bg-[rgba(23,25,28,0.96)] py-1 shadow-[0_12px_40px_rgba(0,0,0,0.45)] backdrop-blur-sm"
            style={{ left: x, top: y }}
            role="menu"
            onContextMenu={(e) => e.preventDefault()}
        >
            <button
                type="button"
                role="menuitem"
                className="w-full px-3 py-2 text-left text-sm text-white/90 transition-colors hover:bg-white/10"
                onClick={() => {
                    onOpenStats()
                }}
            >
                {t('room.player.contextMenu.stats')}
            </button>
        </div>
    )
}