frontend/src/components/DraggablePlayer.jsx

import React from "react";
import { useDraggable, useDroppable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { PlayerCardVisual } from "./PlayerCardVisual"; // Import the visual component we just made

export const DraggablePlayer = ({
  player,
  isBench,
  benchIndex,
  isActiveDrag,
  isValidTarget,
  captainId,
  viceId,
  handleCapChange,
  playerCardGWs,
  fixtures,
  activeGW,
  onPlayerClick,
  onUndo,
  isHighlighted,
  onSolverUndo,
  activeChipType,
}) => {
  const disableBenchGkDrag = Boolean(
    isBench && benchIndex === 0 && player.Pos === "G" && !player.isBlank,
  );
  const { attributes, listeners, setNodeRef, transform, isDragging } =
    useDraggable({
      id: player.ID,
      data: { player, isBench },
      disabled: Boolean(player.isBlank),
    });
  const { setNodeRef: setDropRef, isOver } = useDroppable({
    id: player.ID,
    data: { player, isBench },
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    zIndex: isDragging ? 50 : 20,
    opacity: isDragging ? 0.6 : isActiveDrag && !isValidTarget ? 0.3 : 1,
    filter: isOver && isValidTarget && !isDragging ? "brightness(1.5)" : "none",
    willChange: isDragging ? "transform" : "auto",
    WebkitUserSelect: "none",
    userSelect: "none",
    WebkitTouchCallout: "none",
    touchAction: "none",
    WebkitUserSelect: "none",
    WebkitTransform: CSS.Translate.toString(transform),
    WebkitTapHighlightColor: "transparent",          
    transformOrigin: "center center",
    WebkitUserDrag: "none",       
    userDrag: "none",
  };

  return (
    <div
      ref={(node) => {
        setNodeRef(node);
        setDropRef(node);
      }}
      style={style}
      {...listeners}
      {...attributes}
      draggable="false"
      onDragStart={(e) => e.preventDefault()}
      className={`touch-none select-none rounded-xl transition-[box-shadow,filter] duration-200 ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${isHighlighted ? "transfer-highlight-card ring-2 ring-cyan-400/40" : ""} [&_*]:touch-none [&_*]:[-webkit-user-drag:none]`}
    >
      <PlayerCardVisual
        player={player}
        isBench={isBench}
        captainId={captainId}
        viceId={viceId}
        handleCapChange={handleCapChange}
        playerCardGWs={playerCardGWs}
        fixtures={fixtures}
        activeGW={activeGW}
        onPlayerClick={onPlayerClick}
        onUndo={onUndo}
        onSolverUndo={onSolverUndo}
        activeChipType={activeChipType}
      />
    </div>
  );
};