botWebWars/frontend/src/components/PlayerList.tsx

import React from 'react';
import type { BoardState, Player } from '../types';

interface PlayerListProps {
  boardState: BoardState;
  selectedPlayer: Player | null;
  onSelectPlayer: (player: Player) => void;
  onRemovePlayer: (id: string) => void;
  onOpenPartyModal?: () => void;
  onDefeatParty?: (partyId: string) => void;
}

export const PlayerList: React.FC<PlayerListProps> = ({
  boardState,
  selectedPlayer,
  onSelectPlayer,
  onRemovePlayer,
  onOpenPartyModal,
  onDefeatParty,
}) => {
  const { players, parties = [], turn } = boardState;
  const currentTurnId = turn.current_player_id;

  const partyMap = new Map<string, string>();
  parties.forEach((p) => {
    p.member_ids.forEach((mid) => partyMap.set(mid, p.name));
  });

  return (
    <div className="flex flex-col h-full bg-slate-900 border-l border-slate-800 w-80">
      {/* Header */}
      <div className="p-4 border-b border-slate-800 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="w-2.5 h-2.5 rounded-full bg-sky-400" />
          <h3 className="font-semibold text-slate-100 text-sm">Active Bots & Parties</h3>
        </div>
        <span className="text-xs font-mono px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700">
          {players.length} Bots
        </span>
      </div>

      {/* Turn & Round Banner */}
      {players.length > 0 && (
        <div className="px-4 py-2.5 bg-slate-950/70 border-b border-slate-800/80 flex items-center justify-between text-xs font-mono">
          <span className="text-slate-400">
            Round <strong className="text-sky-400">{turn.round_number}</strong>
          </span>
          <span className="text-slate-400">
            Turn <strong className="text-amber-400">#{turn.turn_number}</strong>
          </span>
        </div>
      )}

      {/* Parties Section */}
      {parties.length > 0 && (
        <div className="p-3 border-b border-slate-800 bg-slate-950/40">
          <div className="text-[11px] font-mono text-slate-400 uppercase tracking-wider mb-2 flex items-center justify-between">
            <span>🛡️ Active Parties ({parties.length})</span>
          </div>
          <div className="space-y-1.5">
            {parties.map((party) => (
              <div
                key={party.id}
                className="bg-slate-900/90 border border-sky-500/40 rounded-lg p-2 flex items-center justify-between text-xs"
              >
                <div className="min-w-0 flex-1">
                  <div className="font-bold text-sky-300 truncate flex items-center gap-1">
                    <span>👑</span> {party.name}
                  </div>
                  <div className="text-[10px] text-slate-400 font-mono">
                    Leader: <strong className="text-amber-300">{party.leader_name}</strong> •{' '}
                    {party.member_ids.length} members
                  </div>
                </div>
                {onDefeatParty && (
                  <button
                    onClick={() => onDefeatParty(party.id)}
                    className="ml-2 bg-rose-950/80 hover:bg-rose-900 text-rose-300 border border-rose-700/60 px-2 py-1 rounded text-[10px] font-mono transition-all"
                    title="Defeat party: kills leader (-1 pt), leader respawns, remainder elects new leader"
                  >
                    💥 Defeat
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Action to form party */}
      {players.length >= 2 && onOpenPartyModal && (
        <div className="p-2 border-b border-slate-800 bg-slate-950/30">
          <button
            onClick={onOpenPartyModal}
            className="w-full bg-slate-800 hover:bg-sky-700 text-slate-200 hover:text-white py-1.5 px-3 rounded-lg text-xs font-mono border border-slate-700 transition-colors flex items-center justify-center gap-1.5"
          >
            <span>🤝</span> Form / Join Party
          </button>
        </div>
      )}

      {/* Players List */}
      <div className="flex-1 overflow-y-auto p-3 space-y-2">
        {players.length === 0 ? (
          <div className="text-center py-12 px-4 text-slate-500 text-xs">
            <div className="text-2xl mb-2">🤖</div>
            No players registered yet.
            <br />
            Register a player or spawn a random bot to start taking turns!
          </div>
        ) : (
          players.map((player) => {
            const isSelected = selectedPlayer?.id === player.id;
            const isCurrentTurn = currentTurnId === player.id;
            const isLeader = player.is_party_leader;
            const partyName = partyMap.get(player.id);

            return (
              <div
                key={player.id}
                onClick={() => onSelectPlayer(player)}
                className={`group flex items-center justify-between p-2.5 rounded-xl border transition-all cursor-pointer ${
                  isCurrentTurn
                    ? 'bg-amber-950/25 border-amber-500/70 shadow-md shadow-amber-500/10'
                    : isSelected
                    ? 'bg-sky-950/40 border-sky-500 shadow-md shadow-sky-500/10'
                    : 'bg-slate-950/60 border-slate-800 hover:border-slate-700 hover:bg-slate-800/40'
                }`}
              >
                <div className="flex items-center gap-3 min-w-0">
                  <div className="relative">
                    <div
                      className="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold text-xs shadow"
                      style={{
                        backgroundColor: player.color,
                        boxShadow: isLeader
                          ? '0 0 14px #fbbf24'
                          : isCurrentTurn
                          ? '0 0 14px #f59e0b'
                          : `0 0 10px ${player.color}55`,
                      }}
                    >
                      {player.name.slice(0, 2).toUpperCase()}
                    </div>
                    {isLeader && (
                      <span className="absolute -top-2 -right-1 text-[12px] leading-none">
                        👑
                      </span>
                    )}
                  </div>

                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="text-xs font-semibold text-slate-200 truncate">
                        {player.name}
                      </span>
                      <span
                        className={`text-[10px] font-mono px-1.5 py-0.2 rounded ${
                          player.score < 0
                            ? 'bg-rose-950 text-rose-300 border border-rose-800'
                            : player.score > 0
                            ? 'bg-emerald-950 text-emerald-300 border border-emerald-800'
                            : 'bg-slate-800 text-slate-400'
                        }`}
                      >
                        {player.score >= 0 ? `+${player.score}` : player.score} pts
                      </span>
                    </div>
                    <div className="text-[11px] font-mono text-slate-400">
                      pos: <span className="text-emerald-400">({player.x}, {player.y})</span>
                      {partyName && (
                        <span className="ml-1 text-sky-400 truncate font-sans">
                          • {isLeader ? 'Leader' : 'Squad'}
                        </span>
                      )}
                    </div>
                  </div>
                </div>

                <div className="flex items-center gap-1.5 opacity-60 group-hover:opacity-100 transition-opacity">
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onRemovePlayer(player.id);
                    }}
                    title="Remove Bot"
                    className="p-1 rounded text-slate-500 hover:text-red-400 hover:bg-red-950/40 transition-colors text-xs"
                  >
                    ✕
                  </button>
                </div>
              </div>
            );
          })
        )}
      </div>

      {/* Footer Info */}
      <div className="p-3 border-t border-slate-800 bg-slate-950/40 text-[11px] font-mono text-slate-400 flex justify-between items-center">
        <span>Coordinate range:</span>
        <span className="text-sky-400 font-semibold">[0,0] → [64,64]</span>
      </div>
    </div>
  );
};