import React, { useEffect, useRef } from "react";

const T_COLOR  = "#f97316";
const CT_COLOR = "#60a5fa";

const PlayerContextMenu = ({ player, x, y, isLocked, onFollowPlayer, onFollowRotate, onUnlock, onClose }) => {
  const menuRef = useRef();
  const teamColor = player?.m_team === 2 ? T_COLOR : CT_COLOR;
  const teamLabel = player?.m_team === 2 ? "T" : "CT";
  const isDead = player?.m_is_dead === true;

  const MENU_W = 170;
  const MENU_H = isDead ? 80 : (isLocked ? 130 : 110);
  const clampedX = Math.min(x, window.innerWidth  - MENU_W - 8);
  const clampedY = Math.min(y, window.innerHeight - MENU_H - 8);

  useEffect(() => {
    const handle = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
    };
    document.addEventListener("mousedown", handle);
    return () => document.removeEventListener("mousedown", handle);
  }, [onClose]);

  const btnBase = {
    display: "block", width: "100%",
    padding: "6px 10px", borderRadius: 4,
    fontSize: 11, fontWeight: 700,
    fontFamily: "inherit", letterSpacing: "0.05em",
    textAlign: "left", cursor: "pointer",
    border: "1px solid transparent",
    transition: "all 0.12s",
    marginBottom: 2,
  };

  return (
    <div
      ref={menuRef}
      onMouseDown={e => e.stopPropagation()}
      style={{
        position: "fixed", left: clampedX, top: clampedY, zIndex: 9999,
        background: "rgba(10,14,20,0.97)",
        border: "1px solid rgba(255,255,255,0.14)",
        borderRadius: 6, boxShadow: "0 8px 32px rgba(0,0,0,0.75)",
        padding: "6px", minWidth: MENU_W,
        backdropFilter: "blur(10px)", userSelect: "none",
      }}
    >
      <div style={{
        display: "flex", alignItems: "center", gap: 6,
        padding: "4px 6px 6px",
        borderBottom: "1px solid rgba(255,255,255,0.08)", marginBottom: 4,
      }}>
        <div style={{ width: 8, height: 8, borderRadius: "50%", background: teamColor, flexShrink: 0, boxShadow: `0 0 5px ${teamColor}` }} />
        <span style={{ fontSize: 12, fontWeight: 700, color: "#fff", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {player?.m_name || `Player ${player?.m_idx}`}
        </span>
        <span style={{ fontSize: 9, fontWeight: 800, color: teamColor, padding: "1px 4px", borderRadius: 3, background: `${teamColor}22` }}>{teamLabel}</span>
        {isDead && <span style={{ fontSize: 9, color: "rgba(255,255,255,0.35)" }}>💀</span>}
      </div>

      <button
        disabled={isDead}
        onClick={() => { if (!isDead) { onFollowPlayer(player.m_idx); onClose(); } }}
        style={{ ...btnBase, background: !isDead ? "rgba(255,255,255,0.04)" : "transparent", color: !isDead ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.25)", cursor: isDead ? "default" : "pointer" }}
        title={isDead ? "Player is dead" : "Follow this player"}
        onMouseEnter={e => { if (!isDead) e.currentTarget.style.background = "rgba(255,255,255,0.1)"; }}
        onMouseLeave={e => { if (!isDead) e.currentTarget.style.background = "rgba(255,255,255,0.04)"; }}
      >👁 Follow Player</button>

      <button
        disabled={isDead}
        onClick={() => { if (!isDead) { onFollowRotate(player.m_idx); onClose(); } }}
        style={{ ...btnBase, background: !isDead ? "rgba(74,158,255,0.08)" : "transparent", color: !isDead ? "#7dd3fc" : "rgba(255,255,255,0.25)", border: !isDead ? "1px solid rgba(74,158,255,0.2)" : "1px solid transparent", cursor: isDead ? "default" : "pointer" }}
        title={isDead ? "Player is dead" : "Follow + rotate map to player view"}
        onMouseEnter={e => { if (!isDead) e.currentTarget.style.background = "rgba(74,158,255,0.15)"; }}
        onMouseLeave={e => { if (!isDead) e.currentTarget.style.background = "rgba(74,158,255,0.08)"; }}
      >🔄 Follow + Rotate</button>

      {isLocked && (
        <button
          onClick={() => { onUnlock(); onClose(); }}
          style={{ ...btnBase, background: "rgba(239,68,68,0.08)", color: "#fca5a5", border: "1px solid rgba(239,68,68,0.2)" }}
          onMouseEnter={e => { e.currentTarget.style.background = "rgba(239,68,68,0.15)"; }}
          onMouseLeave={e => { e.currentTarget.style.background = "rgba(239,68,68,0.08)"; }}
        >✕ Unfollow</button>
      )}
    </div>
  );
};

export default PlayerContextMenu;
