/* Pixel-art card system using the 8-bit deck sprite sheet (cards.png).
   Layout: 4 rows × 15 cols. Each card tile is 33×45 px, with 1-px gutters
   (stride 35×47). Top-left card tile origin is (1, 1).
   Sheet row order: 0=hearts, 1=clubs, 2=diamonds, 3=spades.
   Sheet col order: 0=back, 1=2, 2=3, 3=4, 4=5, 5=6, 6=7, 7=8, 8=9, 9=10,
                    10=J, 11=Q, 12=K, 13=A (Ace high), 14=auxiliary art. */

(() => {

const SHEET_URL = 'cards.png';
const SHEET_W   = 534;
const SHEET_H   = 188;
const TILE_W    = 33;
const TILE_H    = 45;
const STRIDE_X  = 35;
const STRIDE_Y  = 47;
const ORIGIN_X  = 1;
const ORIGIN_Y  = 1;

// engine suit (0=club, 1=diamond, 2=heart, 3=spade) → sheet row
const SUIT_ROW = [1, 2, 0, 3];

// engine rank (0=A, 1..9=2..10, 10=J, 11=Q, 12=K) → sheet col.
// Sheet places the Ace at the end, so Ace→13, everything else→rank.
const rankCol = (r) => (r === 0 ? 13 : r);

// Card back lives at row 1, col 0 (the blue-pattern back).
const BACK_COL = 0;
const BACK_ROW = 1;

function ArcadePixelCard({
  card, w = 84, faceDown = false, selected = false, dim = false,
  glow, style, onClick, onMouseEnter, onMouseLeave, attachedJacks = [],
}) {
  const h = w * 1.4;

  const col = (faceDown || !card) ? BACK_COL : rankCol(card.rank);
  const row = (faceDown || !card) ? BACK_ROW : SUIT_ROW[card.suit];
  const tx  = ORIGIN_X + col * STRIDE_X;
  const ty  = ORIGIN_Y + row * STRIDE_Y;

  // Scale the sheet so one tile fills the card's box.
  const sx = w / TILE_W;
  const sy = h / TILE_H;

  const baseStyle = {
    width: w, height: h, position: 'relative',
    cursor: onClick ? 'pointer' : 'default',
    transition: 'transform 220ms cubic-bezier(.2,.8,.2,1), filter 200ms, opacity 200ms',
    transform: selected ? 'translateY(-14px)' : 'translateY(0)',
    opacity: dim ? 0.5 : 1,
    userSelect: 'none',
    filter: selected
      ? `drop-shadow(0 0 8px #ffd23f) drop-shadow(0 6px 0 rgba(0,0,0,0.5))`
      : 'drop-shadow(0 4px 0 rgba(0,0,0,0.4))',
    ...(style || {}),
  };

  const sprite = {
    width: w, height: h, position: 'relative', zIndex: 1,
    backgroundImage: `url(${SHEET_URL})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: `${SHEET_W * sx}px ${SHEET_H * sy}px`,
    backgroundPosition: `-${tx * sx}px -${ty * sy}px`,
    imageRendering: 'pixelated',
  };

  return (
    <div style={baseStyle} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {glow && (
        <div style={{
          position: 'absolute', inset: -2,
          boxShadow: `0 0 0 2px ${glow}, 0 0 14px ${glow}`,
          pointerEvents: 'none', animation: 'pulseGlow 1.4s ease-in-out infinite', zIndex: 0,
        }} />
      )}
      <div style={sprite} />
      {attachedJacks.length > 0 && (
        <div style={{
          position: 'absolute', top: -4, right: -4,
          minWidth: w*0.32, height: w*0.32, padding: `0 ${w*0.06}px`, borderRadius: 0,
          background: '#ffd23f', color: '#1a1410',
          fontFamily: '"VT323", monospace', fontSize: w*0.28, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '2px 2px 0 #1a1410',
          zIndex: 2,
        }}>J{attachedJacks.length > 1 ? attachedJacks.length : ''}</div>
      )}
    </div>
  );
}

window.ArcadePixelCard = ArcadePixelCard;
})();