// ============================================================
// Card.jsx — Hearthstone-ish trading card
// ============================================================
const { useState, useRef, useEffect } = React;

function PlayerCard({ cardId, size = 'md', interactive = true, onClick, selected, layout = 'classic' }) {
  const card = window.CARDS.find(c => c.id === cardId);
  if (!card) return null;
  const type = window.TYPES[card.type];
  const rarity = window.RARITIES[card.rarity];
  const team = window.TEAMS[card.team];

  const [tilt, setTilt] = useState({ x: 0, y: 0, glare: 50 });
  const ref = useRef(null);

  const handleMove = (e) => {
    if (!interactive || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    setTilt({ x: (py - 0.5) * -16, y: (px - 0.5) * 16, glare: px * 100 });
  };
  const reset = () => setTilt({ x: 0, y: 0, glare: 50 });

  const dims = {
    sm: { w: 140, h: 200, scale: 0.58 },
    md: { w: 220, h: 312, scale: 0.92 },
    lg: { w: 280, h: 396, scale: 1.16 },
  }[size];

  const isLeg = card.rarity === 'legendary';
  const isEpic = card.rarity === 'epic';
  const isFoil = isLeg || isEpic;

  if (layout === 'minimal') {
    return (
      <MinimalCard card={card} type={type} rarity={rarity} team={team}
        size={size} dims={dims} onClick={onClick} selected={selected} interactive={interactive} />
    );
  }

  return (
    <div
      ref={ref}
      className="player-card-wrap"
      onMouseMove={handleMove}
      onMouseLeave={reset}
      onClick={onClick}
      style={{
        width: dims.w, height: dims.h,
        perspective: 1000,
        cursor: interactive && onClick ? 'pointer' : 'default',
      }}
    >
      <div
        className={`player-card rarity-${card.rarity} ${selected ? 'selected' : ''}`}
        style={{
          width: '100%', height: '100%',
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition: 'transform 0.15s ease-out, box-shadow 0.3s ease',
          transformStyle: 'preserve-3d',
          borderRadius: 14,
          background: `linear-gradient(155deg, ${rarity.border}22 0%, #0a0d0e 35%, #05070a 100%)`,
          border: `2px solid ${rarity.border}`,
          boxShadow: `
            0 0 0 1px rgba(255,255,255,0.04) inset,
            0 0 24px ${rarity.glow},
            0 12px 32px rgba(0,0,0,0.65)
          `,
          position: 'relative',
          overflow: 'hidden',
          fontFamily: 'var(--font-sans)',
        }}
      >
        {/* corner flourishes */}
        <div style={{
          position: 'absolute', inset: 4, borderRadius: 10,
          border: `1px solid ${rarity.color}33`,
          pointerEvents: 'none',
        }} />

        {/* type watermark */}
        <div style={{
          position: 'absolute', top: -12, right: -12,
          width: 120, height: 120, borderRadius: '50%',
          background: `radial-gradient(circle, ${type.color}55 0%, transparent 70%)`,
          pointerEvents: 'none',
        }} />

        {/* foil shimmer */}
        {isFoil && (
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(${110 + tilt.y*2}deg,
              transparent 30%,
              ${rarity.color}22 ${tilt.glare - 10}%,
              #ffffff33 ${tilt.glare}%,
              ${rarity.color}22 ${tilt.glare + 10}%,
              transparent 70%)`,
            mixBlendMode: 'overlay',
            pointerEvents: 'none',
          }} />
        )}

        {/* Header strip */}
        <div style={{ position: 'relative', padding: `${12*dims.scale}px ${14*dims.scale}px ${8*dims.scale}px`, zIndex: 2 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 38*dims.scale,
                lineHeight: 1,
                color: '#fff',
                fontWeight: 600,
                textShadow: `0 2px 8px ${rarity.glow}`,
              }}>{card.ovr}</div>
              <div style={{
                fontSize: 9*dims.scale,
                color: rarity.color,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                fontWeight: 700,
                marginTop: 2,
              }}>{card.pos}</div>
            </div>
            {/* Type badge */}
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4*dims.scale,
            }}>
              <div style={{
                background: `linear-gradient(135deg, ${type.color}, ${type.color}99)`,
                color: '#0a0d0e',
                fontSize: 9*dims.scale, padding: `${3*dims.scale}px ${8*dims.scale}px`,
                borderRadius: 4, textTransform: 'uppercase', fontWeight: 700, letterSpacing: '0.08em',
                boxShadow: `0 0 12px ${type.glow}`,
              }}>{type.name}</div>
              <div style={{
                fontSize: 8*dims.scale, color: rarity.color,
                textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600,
              }}>◆ {rarity.name}</div>
            </div>
          </div>
        </div>

        {/* Portrait area — placeholder with monogram */}
        <div style={{
          margin: `${4*dims.scale}px ${12*dims.scale}px ${8*dims.scale}px`,
          height: dims.h * 0.36,
          borderRadius: 8,
          background: `
            radial-gradient(ellipse at 30% 30%, ${type.color}55 0%, transparent 60%),
            linear-gradient(155deg, ${team.color}44 0%, #0a0d0e 70%)
          `,
          border: `1px solid ${rarity.border}55`,
          position: 'relative',
          overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* silhouette head+shoulders */}
          <svg viewBox="0 0 100 100" style={{ width: '90%', height: '90%', opacity: 0.28 }}>
            <defs>
              <radialGradient id={`sil-${card.id}`} cx="50%" cy="30%">
                <stop offset="0%" stopColor="#ffffff" stopOpacity="0.9" />
                <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
              </radialGradient>
            </defs>
            <circle cx="50" cy="34" r="16" fill="#ffffff" />
            <path d="M 20 95 Q 20 60 50 55 Q 80 60 80 95 Z" fill="#ffffff" />
            <rect x="0" y="88" width="100" height="12" fill={`url(#sil-${card.id})`} />
          </svg>
          {/* Big jersey number */}
          <div style={{
            position: 'absolute', bottom: -8*dims.scale, right: 6*dims.scale,
            fontFamily: 'var(--font-display)',
            fontSize: 68*dims.scale, fontWeight: 700,
            color: `${rarity.color}44`,
            lineHeight: 1,
            letterSpacing: '-0.04em',
          }}>{card.name.split(' ').map(n=>n[0]).join('')}</div>
        </div>

        {/* Name */}
        <div style={{ padding: `0 ${14*dims.scale}px`, position: 'relative', zIndex: 2 }}>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 17*dims.scale, color: '#fff', fontWeight: 600, lineHeight: 1.05,
            letterSpacing: '-0.01em',
          }}>{card.name}</div>
          <div style={{
            fontSize: 8.5*dims.scale, color: team.color,
            textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 600,
            marginTop: 2, marginBottom: 8*dims.scale,
          }}>{team.name}</div>
        </div>

        {/* Stats */}
        <div style={{
          margin: `0 ${12*dims.scale}px ${10*dims.scale}px`,
          padding: `${8*dims.scale}px ${10*dims.scale}px`,
          background: 'rgba(0,0,0,0.35)',
          borderRadius: 6,
          border: `1px solid ${rarity.border}33`,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: `${3*dims.scale}px ${12*dims.scale}px`,
          fontSize: 10*dims.scale,
          position: 'relative', zIndex: 2,
        }}>
          {[['PAC',card.pac],['SHO',card.sho],['PAS',card.pas],['DEF',card.def]].map(([k,v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ color: '#8a9099', letterSpacing: '0.08em', fontWeight: 600, fontSize: 9*dims.scale }}>{k}</span>
              <span style={{ color: statColor(v), fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{v}</span>
            </div>
          ))}
        </div>

        {/* Ability */}
        {size !== 'sm' && (
          <div style={{
            margin: `0 ${12*dims.scale}px`,
            padding: `${8*dims.scale}px ${10*dims.scale}px`,
            borderTop: `1px solid ${rarity.color}33`,
            position: 'relative', zIndex: 2,
          }}>
            <div style={{
              fontSize: 8.5*dims.scale, color: rarity.color, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 3*dims.scale,
            }}>✦ {card.ability.name}</div>
            <div style={{ fontSize: 9.5*dims.scale, color: '#c4ccd4', lineHeight: 1.4 }}>
              {card.ability.text}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function statColor(v) {
  if (v >= 85) return '#58d07a';
  if (v >= 70) return '#e6e8eb';
  if (v >= 55) return '#c4ccd4';
  return '#8a9099';
}

// Minimal variant — flatter, list-friendly
function MinimalCard({ card, type, rarity, team, size, dims, onClick, selected, interactive }) {
  return (
    <div onClick={onClick} className={`mini-card ${selected ? 'selected' : ''}`} style={{
      width: dims.w, height: dims.h,
      background: '#0e1114',
      border: `1.5px solid ${selected ? rarity.color : '#1e2329'}`,
      borderRadius: 10,
      padding: 12*dims.scale,
      cursor: interactive && onClick ? 'pointer' : 'default',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
      boxShadow: selected ? `0 0 0 2px ${rarity.color}44, 0 0 24px ${rarity.glow}` : 'none',
      transition: 'all 0.18s',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: `linear-gradient(90deg, ${type.color}, ${rarity.color})`,
      }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 4 }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 32*dims.scale, color: '#fff', lineHeight: 1, fontWeight: 600,
        }}>{card.ovr}</div>
        <div style={{
          fontSize: 9*dims.scale, color: rarity.color, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>{card.pos}</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 15*dims.scale, color: '#fff', marginTop: 10*dims.scale, lineHeight: 1.1,
      }}>{card.name}</div>
      <div style={{
        fontSize: 8.5*dims.scale, color: team.color, textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 2, fontWeight: 600,
      }}>{team.short} · {type.name}</div>
      <div style={{ flex: 1 }} />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 4,
        fontSize: 9.5*dims.scale, fontFamily: 'var(--font-mono)',
      }}>
        {[['PAC',card.pac],['SHO',card.sho],['PAS',card.pas],['DEF',card.def]].map(([k,v])=>(
          <div key={k} style={{ textAlign: 'center' }}>
            <div style={{ color: statColor(v), fontWeight: 700 }}>{v}</div>
            <div style={{ color: '#5a6169', fontSize: 7.5*dims.scale, letterSpacing: '0.1em' }}>{k}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PlayerCard = PlayerCard;