frontend/src/components/ActiveMovesPanel.jsx

import React from "react";
import { ArrowRightLeft } from "lucide-react";
import { CHIP_CONFIG, getPlayerPrice } from "../utils/fplLogic";

export const ActiveMovesPanel = ({
  activeGW,
  manualOverrides,
  globalPlayers,
  chipsByGw,
  transfersByGw
}) => {
  const activeLock = manualOverrides[activeGW] || {};
  const manualTransfers = activeLock.manualTransfers || {};
  const chip = chipsByGw[activeGW];
  const tData = transfersByGw[activeGW] || { count: 0, netDelta: 0 };

  const moveEntries = Object.entries(manualTransfers);
  const hasMoves = moveEntries.length > 0;

  return (
    <div className="w-full bg-slate-950 border border-slate-800 rounded-2xl flex flex-col shadow-2xl overflow-hidden shrink-0 transition-all duration-300">
      
      {/* Header */}
      <div className="border-b border-slate-800 px-4 py-3 bg-slate-900/80 flex justify-between items-center">
        <h2 className="text-xs font-black uppercase tracking-widest text-slate-300 flex items-center gap-2">
          <ArrowRightLeft size={14} className="text-cyan-400" />
          GW {activeGW} Moves Made So Far
        </h2>
        {chip && CHIP_CONFIG[chip] && (
          <span className={`text-[9px] font-black px-1.5 py-0.5 rounded ${CHIP_CONFIG[chip].badge}`}>
            {CHIP_CONFIG[chip].short}
          </span>
        )}
      </div>

      {/* Body */}
      <div className="p-4 flex flex-col gap-2">
        {!hasMoves ? (
          <div className="text-center text-slate-500 text-[10px] italic py-2">
            No active transfers made for GW {activeGW}.
          </div>
        ) : (
          moveEntries.map(([inIdStr, outPlayer], idx) => {
            const isBlankIn = inIdStr.startsWith("blank_");
            const inPlayer = !isBlankIn ? globalPlayers.find(p => String(p.ID) === inIdStr) : null;

            return (
              <div key={idx} className="flex items-center justify-between bg-slate-900/50 border border-slate-800/80 rounded-lg p-2.5 font-mono text-xs shadow-inner">
                
                {/* Outgoing Player */}
                <div className="flex-1 min-w-0 flex flex-col">
                  <span className="text-red-400 truncate font-bold">{outPlayer?.Name || "Unknown"}</span>
                  <span className="text-slate-500 text-[9px]">£{(outPlayer ? getPlayerPrice(outPlayer) : 0).toFixed(1)}m</span>
                </div>

                <span className="text-slate-600 font-black px-3">»</span>

                {/* Incoming Player */}
                <div className="flex-1 min-w-0 flex flex-col items-end text-right">
                  {isBlankIn ? (
                    <>
                      <span className="text-yellow-500/70 italic truncate text-[11px] mt-0.5">Select Player...</span>
                    </>
                  ) : (
                    <>
                      <span className="text-emerald-400 truncate font-bold">{inPlayer?.Name || inIdStr}</span>
                      <span className="text-slate-500 text-[9px]">£{(inPlayer ? getPlayerPrice(inPlayer) : 0).toFixed(1)}m</span>
                    </>
                  )}
                </div>

              </div>
            );
          })
        )}

        {/* Summary Footer */}
        {hasMoves && (
          <div className="mt-2 pt-3 border-t border-slate-800/80 flex justify-between items-center text-[10px] font-bold">
            <span className="text-slate-400 uppercase tracking-wider">
              Total Moves: <span className="text-cyan-400 font-mono text-xs ml-1">{tData.count}</span>
            </span>
            <span className="text-slate-400 uppercase tracking-wider">
              Bank Delta: 
              <span className={`font-mono text-xs ml-1 ${tData.netDelta >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                {tData.netDelta > 0 ? '+' : ''}{tData.netDelta.toFixed(1)}m
              </span>
            </span>
          </div>
        )}
      </div>
    </div>
  );
};