import PipRadar from './PipRadar';
import PlayerCard from './playercard';

/**
 * PipRadarContent is the component rendered inside the PiP window document.
 * Layout: T cards (left) | Radar (centre, flex:1) | CT cards (right)
 * 
 * Player cards use transform: scale(0.7) with a wrapper that compensates
 * for the layout space so cards don't overlap each other.
 */
const PipRadarContent = ({
  playerArray,
  mapData,
  bombData,
  grenadeArray,
  droppedWeaponArray,
  localTeam,
  averageLatency,
  settings,
  roundInfo,
  lockedPlayerIdx = null,
  followYourselfRotation = false,
  onClose,
}) => {
  const terrorists       = playerArray.filter(p => p.m_team === 2);
  const counterTerrorists = playerArray.filter(p => p.m_team === 3);

  const showTCards  = settings?.showTCards  !== false;
  const showCTCards = settings?.showCTCards !== false;

  // Card column width at scale 0.7: natural card ~300px → scaled = 210px
  // We give the column 115px and let the scaled card overflow via transformOrigin
  const CARD_COL_W = 115;

  return (
    <div
      style={{
        display: 'flex',
        width: '100%',
        height: '100%',
        background: '#07141e',
        overflow: 'hidden',
        fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
        boxSizing: 'border-box',
      }}
    >
      {/* ── T cards — left column ─────────────────────────────────────────── */}
      {showTCards && (
        <div
          style={{
            width: CARD_COL_W,
            flexShrink: 0,
            overflowY: 'auto',
            overflowX: 'hidden',
            background: 'rgba(0,0,0,0.25)',
            borderRight: '1px solid rgba(245,166,35,0.18)',
            paddingTop: 4,
            paddingBottom: 4,
            // Hide scrollbar visually but keep scroll
            scrollbarWidth: 'none',
          }}
        >
          {terrorists.map(player => (
            // Wrapper: natural width = CARD_COL_W / 0.7 so scaled result = CARD_COL_W
            // marginBottom compensates for the height reduction from scale
            <div
              key={player.m_idx}
              style={{
                width: `${Math.round(CARD_COL_W / 0.7)}px`,
                transform: 'scale(0.7)',
                transformOrigin: 'top left',
                marginBottom: `${Math.round(74 * -0.3)}px`, // 74px = minHeight of card
              }}
            >
              <PlayerCard
                playerData={player}
                isOnRightSide={false}
                settings={settings}
              />
            </div>
          ))}
        </div>
      )}

      {/* ── Radar centre — takes all remaining space ──────────────────────── */}
      <div
        style={{
          flex: 1,
          position: 'relative',
          overflow: 'hidden',
          minWidth: 0,
        }}
      >
        {mapData ? (
          <PipRadar
            playerArray={playerArray}
            mapData={mapData}
            bombData={bombData}
            grenadeArray={grenadeArray}
            droppedWeaponArray={droppedWeaponArray}
            localTeam={localTeam}
            averageLatency={averageLatency}
            settings={settings}
            roundInfo={roundInfo}
            lockedPlayerIdx={lockedPlayerIdx}
            followYourselfRotation={followYourselfRotation}
          />
        ) : (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
              color: 'rgba(255,255,255,0.35)',
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
            }}
          >
            Loading map...
          </div>
        )}
      </div>

      {/* ── CT cards — right column ───────────────────────────────────────── */}
      {showCTCards && (
        <div
          style={{
            width: CARD_COL_W,
            flexShrink: 0,
            overflowY: 'auto',
            overflowX: 'hidden',
            background: 'rgba(0,0,0,0.25)',
            borderLeft: '1px solid rgba(74,158,255,0.18)',
            paddingTop: 4,
            paddingBottom: 4,
            scrollbarWidth: 'none',
          }}
        >
          {counterTerrorists.map(player => (
            <div
              key={player.m_idx}
              style={{
                width: `${Math.round(CARD_COL_W / 0.7)}px`,
                transform: 'scale(0.7)',
                transformOrigin: 'top right',
                // Shift left so the right edge aligns with column right edge
                marginLeft: `${CARD_COL_W - Math.round(CARD_COL_W / 0.7)}px`,
                marginBottom: `${Math.round(74 * -0.3)}px`,
              }}
            >
              <PlayerCard
                playerData={player}
                isOnRightSide={true}
                settings={settings}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default PipRadarContent;
