import React from "react";

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

const ChooseSelfModal = ({ playerArray, localTeam, onSelect, onSkip }) => {
  if (!playerArray || playerArray.length === 0) return null;

  // Filter teammates (same team as local player, not dead)
  const teammates = playerArray.filter(p =>
    p.m_team === localTeam && !p.m_is_dead
  );

  const teamColor   = localTeam === 2 ? T_COLOR  : CT_COLOR;
  const teamLabel   = localTeam === 2 ? "T — Khủng bố" : "CT — Chống khủng bố";

  return (
    <div style={{
      position: "fixed", inset: 0,
      background: "rgba(0,0,0,0.75)",
      backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 9999,
    }}
    onMouseDown={e => e.stopPropagation()}
    >
      <div style={{
        background: "#111827",
        border: "1px solid rgba(255,255,255,0.1)",
        borderRadius: 12,
        padding: "24px 28px",
        width: 360,
        maxWidth: "90vw",
        boxShadow: "0 24px 64px rgba(0,0,0,0.8)",
      }}>
        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 16 }}>
          <div style={{
            fontSize: 11, fontWeight: 800, letterSpacing: "0.22em",
            color: teamColor, textTransform: "uppercase", marginBottom: 6,
          }}>
            {teamLabel}
          </div>
          <h2 style={{
            fontSize: 18, fontWeight: 800, color: "#fff",
            margin: 0, letterSpacing: "0.03em",
          }}>
            Bạn là ai?
          </h2>
          <p style={{
            fontSize: 12, color: "rgba(255,255,255,0.45)",
            margin: "6px 0 0", lineHeight: 1.5,
          }}>
            Chọn tài khoản của bạn để bật tính năng<br />
            <strong style={{ color: teamColor }}>Follow Yourself</strong> và <strong style={{ color: teamColor }}>xoay bản đồ theo góc nhìn</strong>.
          </p>
        </div>

        {/* Player list */}
        <div style={{
          maxHeight: 260, overflowY: "auto",
          border: `1px solid ${teamColor}30`,
          borderRadius: 8, marginBottom: 14,
        }}>
          {teammates.map(player => (
            <div
              key={player.m_idx}
              onClick={() => onSelect({ m_idx: player.m_idx, steam_id: player.m_steam_id })}
              style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "10px 14px",
                cursor: "pointer",
                borderBottom: "1px solid rgba(255,255,255,0.05)",
                transition: "background 0.1s",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = `${teamColor}15`; }}
              onMouseLeave={e => { e.currentTarget.style.background = "transparent"; }}
            >
              {/* Avatar / character icon */}
              <div style={{
                width: 32, height: 32,
                borderRadius: "50%",
                background: `${teamColor}25`,
                border: `2px solid ${teamColor}60`,
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
                fontSize: 11, fontWeight: 800, color: teamColor,
              }}>
                {player.m_name ? player.m_name.charAt(0).toUpperCase() : "?"}
              </div>

              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 13, fontWeight: 700, color: "#fff",
                  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                }}>
                  {player.m_name || `Player ${player.m_idx}`}
                </div>
                {/* Player stats row */}
                <div style={{ display: "flex", gap: 8, marginTop: 2 }}>
                  <span style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }}>
                    HP: {Math.max(0, Math.min(100, player.m_health ?? 100))}
                  </span>
                  {player.m_weapons?.m_active && (
                    <span style={{ fontSize: 10, color: "rgba(255,255,255,0.35)" }}>
                      {player.m_weapons.m_active}
                    </span>
                  )}
                  {/* Highlight if this is the local player (m_idx = 0) */}
                  {player.m_idx === 0 && (
                    <span style={{ fontSize: 10, color: teamColor, fontWeight: 700 }}>
                      YOU
                    </span>
                  )}
                </div>
              </div>

              {/* HP bar */}
              <div style={{
                width: 40, height: 3, borderRadius: 2,
                background: "rgba(255,255,255,0.1)",
                overflow: "hidden", flexShrink: 0,
              }}>
                <div style={{
                  height: "100%", borderRadius: 2,
                  width: `${Math.max(0, Math.min(100, player.m_health ?? 100))}%`,
                  background: teamColor,
                  transition: "width 0.2s",
                }} />
              </div>

              {/* Arrow indicator */}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="rgba(255,255,255,0.3)" strokeWidth="2"
                style={{ flexShrink: 0 }}>
                <polyline points="9 18 15 12 9 6" />
              </svg>
            </div>
          ))}

          {teammates.length === 0 && (
            <div style={{
              padding: "16px 14px", textAlign: "center",
              fontSize: 12, color: "rgba(255,255,255,0.35)",
            }}>
              Không có đồng đội sống
            </div>
          )}
        </div>

        {/* Skip button (danger style) */}
        <button
          onClick={onSkip}
          style={{
            display: "block", width: "100%",
            padding: "9px 0", borderRadius: 6,
            background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.1)",
            color: "rgba(255,255,255,0.4)",
            fontSize: 12, fontWeight: 600, cursor: "pointer",
            fontFamily: "inherit", letterSpacing: "0.06em",
            transition: "all 0.15s",
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
            e.currentTarget.style.color = "rgba(255,255,255,0.6)";
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = "rgba(255,255,255,0.05)";
            e.currentTarget.style.color = "rgba(255,255,255,0.4)";
          }}
        >
          Bỏ qua — đặt sau trong cài đặt
        </button>

        {/* Hint */}
        <p style={{
          fontSize: 10, color: "rgba(255,255,255,0.25)",
          textAlign: "center", margin: "10px 0 0", lineHeight: 1.5,
        }}>
          Bạn có thể thay đổi lựa chọn bất kỳ lúc nào<br />
          trong nút ⚙️ Settings trên radar.
        </p>
      </div>
    </div>
  );
};

export default ChooseSelfModal;