/* eslint-disable */
// Solitaire playing card — adapted from blackjack with selection/glow support.

const SUITS = {
  '♠': { color: '#0c1611', name: 'spade' },
  '♣': { color: '#0c1611', name: 'club' },
  '♥': { color: '#c0392b', name: 'heart' },
  '♦': { color: '#c0392b', name: 'diamond' }
};

function CardCorner({ rank, suit, flip = false, w = 84 }) {
  const color = SUITS[suit].color;
  const rankFs = rank === '10' ? Math.round(w * 0.19) : Math.round(w * 0.23);
  const suitFs = Math.round(w * 0.19);
  return (
    <div style={{
      position: 'absolute',
      ...(flip ? { bottom: 6, right: 8, transform: 'rotate(180deg)' } : { top: 6, left: 8 }),
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      lineHeight: 1, color
    }}>
      <span style={{
        fontSize: rankFs,
        fontWeight: 700,
        fontFamily: "'Playfair Display', serif",
        letterSpacing: '-.02em'
      }}>{rank}</span>
      <span style={{ fontSize: suitFs, marginTop: 1 }}>{suit}</span>
    </div>
  );
}

function CardFace({ rank, suit, w, h }) {
  return (
    <div style={{
      position:'absolute', inset:0,
      background: '#fffdf6',
      borderRadius: 10,
      boxShadow: '0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(0,0,0,.1), 0 8px 18px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2)',
      overflow:'hidden',
      ...window.CASINO_CARDS.faceStyle(rank, suit)
    }} />
  );
}

function CardBack() {
  return (
    <div style={{
      position:'absolute', inset:0,
      borderRadius: 10,
      background: `
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
        radial-gradient(circle at 50% 50%, #6e1d1d, #3a0f0f 70%)
      `,
      boxShadow: '0 0 0 1px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.06), inset 0 0 0 7px rgba(201,162,106,.5), inset 0 0 0 9px rgba(0,0,0,.25)',
      display:'flex',alignItems:'center',justifyContent:'center',
      overflow:'hidden'
    }}>
      <img src="../assets/logo-96.png" alt="" style={{
        width:'52%', height:'auto',
        filter:'drop-shadow(0 2px 4px rgba(0,0,0,.6))'
      }}/>
    </div>
  );
}

function PlayingCard({
  rank, suit, faceDown = false,
  w = 84, h = 118,
  dealIndex = 0, fromX = 360, fromY = -240,
  glow = false, selected = false,
  onClick, onDoubleClick, dealing = false
}) {
  const animate = dealing;
  return (
    <div
      className={`card-shell ${animate ? 'deal-in' : ''}`}
      onClick={onClick}
      onDoubleClick={onDoubleClick}
      style={{
        width:w, height:h, position:'relative',
        animationDelay: animate ? `${dealIndex * 0.05}s` : undefined,
        '--from-x': `${fromX}px`,
        '--from-y': `${fromY}px`,
        cursor: onClick ? 'pointer' : 'default',
        filter: glow ? 'drop-shadow(0 0 18px rgba(230,197,144,.85))' : 'none',
        transform: selected ? 'translateY(-6px)' : 'none',
        transition: 'transform .15s ease, filter .3s ease'
      }}>
      <div className={`card-flip ${faceDown ? 'face-down' : ''}`} style={{
        width:'100%', height:'100%', position:'relative'
      }}>
        <div className="card-face" style={{
          outline: selected ? '2px solid var(--brass-2)' : 'none',
          outlineOffset: 1,
          borderRadius: 10
        }}>
          <CardFace rank={rank} suit={suit} w={w} h={h} />
        </div>
        <div className="card-back">
          <CardBack />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PlayingCard, CardBack, CardFace, SUITS });