import { computeAdvisoryState, resolveAdvisoryPlayer } from "../utilities/advisoryUtils";

// ── Advisory config map ───────────────────────────────────────────────────────
const ADVISORY_CONFIG = {
  solesurvivor: {
    icon:  "./assets/advisories/adv-solesurvivor.webp",
    label: "SOLE SURVIVOR",
  },
  planting: {
    icon:  "./assets/advisories/adv-plant.webp",
    label: "PLANTING",
  },
  defusing: {
    icon:  "./assets/advisories/adv-defuse.webp",
    label: "DEFUSING",
  },
};

// ── AdvisoryPanel ─────────────────────────────────────────────────────────────
/**
 * Overlay panel that shows critical in-round events on the radar.
 *
 * Positioned absolute at the top-left of the radar container.
 * zIndex 160 — above map layer (100), below fullscreen top bar (300).
 * pointer-events: none — never blocks zoom/pan interactions.
 *
 * Returns null when AdvisoryState === 'default' (no active advisory).
 *
 * @param {object}       props
 * @param {Array}        props.playerArray  Full player list from WebSocket frame.
 * @param {object|null}  props.bombData     Bomb object.
 * @param {object|null}  props.roundInfo    Round object.
 * @param {boolean}      props.isFullscreen Whether the radar is in fullscreen mode.
 */
const AdvisoryPanel = ({ playerArray, bombData, roundInfo, isFullscreen }) => {
  const state = computeAdvisoryState(playerArray, bombData, roundInfo);

  // No advisory — render nothing
  if (state === "default") return null;

  const config     = ADVISORY_CONFIG[state];
  const playerName = resolveAdvisoryPlayer(state, playerArray, bombData);

  // For planting, append the bomb site to the label when known: "PLANTING [A]" / "PLANTING [B]"
  const siteLabel =
    state === "planting"
      ? bombData?.m_bomb_site === 0
        ? "A"
        : bombData?.m_bomb_site === 1
          ? "B"
          : ""
      : "";
  const displayLabel = siteLabel ? `${config.label} [${siteLabel}]` : config.label;

  // Slightly larger in fullscreen for readability
  const scale = isFullscreen ? 1.15 : 1;

  return (
    <div
      style={{
        position:      "absolute",
        top:           isFullscreen ? 54 : 8,   // clear the fullscreen top bar (44px + gap)
        left:          isFullscreen ? 296 : 8,  // clear the T player panel in fullscreen
        zIndex:        160,
        pointerEvents: "none",
        userSelect:    "none",
        transform:     `scale(${scale})`,
        transformOrigin: "top left",
      }}
    >
      <div
        style={{
          display:        "flex",
          alignItems:     "center",
          gap:            8,
          padding:        "6px 12px 6px 8px",
          borderRadius:   6,
          background:     "rgba(8, 11, 18, 0.82)",
          border:         "1px solid rgba(255, 255, 255, 0.08)",
          backdropFilter: "blur(8px)",
          boxShadow:      "0 2px 12px rgba(0,0,0,0.5)",
          minWidth:       140,
          maxWidth:       240,
        }}
      >
        {/* Advisory icon */}
        <img
          src={config.icon}
          alt={config.label}
          style={{
            width:      36,
            height:     36,
            flexShrink: 0,
            objectFit:  "contain",
          }}
          onError={e => { e.currentTarget.style.display = "none"; }}
        />

        {/* Text column: label + player name */}
        <div
          style={{
            display:       "flex",
            flexDirection: "column",
            gap:           2,
            minWidth:      0,
          }}
        >
          {/* Advisory label — includes site suffix for planting: "PLANTING [A]" */}
          <span
            style={{
              fontSize:      10,
              fontWeight:    800,
              letterSpacing: "0.12em",
              color:         "rgba(255, 255, 255, 0.55)",
              lineHeight:    1,
              textTransform: "uppercase",
            }}
          >
            {displayLabel}
          </span>

          {/* Player name */}
          {playerName && (
            <span
              style={{
                fontSize:      13,
                fontWeight:    700,
                color:         "var(--text-primary, #e8eaf0)",
                lineHeight:    1.2,
                overflow:      "hidden",
                textOverflow:  "ellipsis",
                whiteSpace:    "nowrap",
                maxWidth:      160,
              }}
            >
              {playerName}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};

export default AdvisoryPanel;
