// Big character stage — game-lobby style.
// Entrance animation triggers each time `entity.id` changes (key remount).
// Inner image runs a continuous idle bob. Pose (rotate/scale/flipX/translateY)
// is the resting state the entrance animation lands on.

function poseTransform(p) {
  if (!p) return "none";
  const ty   = p.translateY ?? 0;
  const r    = p.rotate ?? 0;
  const s    = p.scale ?? 1;
  const flip = p.flipX ? " scaleX(-1)" : "";
  return `translateY(${ty}px) rotate(${r}deg) scale(${s})${flip}`;
}

function CharacterStage({ entity, playing }) {
  return (
    <div style={stageStyles.stage}>
      {/* expanding ring on swap */}
      <span key={"ring-" + entity.id} style={stageStyles.ring} />

      {/* ambient glow under the figure */}
      <span style={{ ...stageStyles.glow, opacity: playing ? 0.55 : 0.3 }} />

      {/* character wrap — remounts on swap to retrigger drop-in */}
      <div key={entity.id} style={stageStyles.charWrap}>
        <div style={stageStyles.bob}>
          {entity.video ? (
            <video
              src={entity.video}
              autoPlay loop muted playsInline
              style={{ ...stageStyles.charImg, transform: poseTransform(entity.pose) }}
            />
          ) : (
            <img
              src={entity.figure}
              alt={entity.character.name}
              style={{
                ...stageStyles.charImg,
                filter: entity.tint,
                transform: poseTransform(entity.pose),
              }}
            />
          )}
        </div>
      </div>

      {/* contact shadow */}
      <span style={stageStyles.contactShadow} />

      {/* track / artist badge — top-right of stage */}
      <div style={stageStyles.charBadge}>
        <span style={stageStyles.charBadgeKicker}>Track</span>
        <span key={"name-" + entity.id} style={stageStyles.charBadgeName}>{entity.artist}</span>
      </div>

      {/* now-playing pill — visible when playing */}
      <div style={{
        ...stageStyles.np,
        opacity: playing ? 1 : 0,
        transform: `translate(-50%, ${playing ? "0" : "8px"})`,
      }}>
        <span style={stageStyles.eq}>
          <i style={{ ...stageStyles.bar, animationDelay: "0ms"   }} />
          <i style={{ ...stageStyles.bar, animationDelay: "120ms" }} />
          <i style={{ ...stageStyles.bar, animationDelay: "240ms" }} />
          <i style={{ ...stageStyles.bar, animationDelay: "360ms" }} />
        </span>
        <span style={stageStyles.npLabel}>{entity.nowPlaying}</span>
      </div>

      <style>{`
        @keyframes char-drop-in {
          0%   { transform: translateY(60px) scale(0.86) rotate(-4deg); opacity: 0; }
          55%  { transform: translateY(-10px) scale(1.03) rotate(2deg); opacity: 1; }
          80%  { transform: translateY(2px) scale(0.99) rotate(-0.6deg); }
          100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
        }
        @keyframes char-bob {
          0%, 100% { transform: translateY(0) rotate(-0.4deg); }
          50%      { transform: translateY(-8px) rotate(0.4deg); }
        }
        @keyframes char-ring {
          0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.45; }
          100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0;    }
        }
        @keyframes char-eq {
          0%, 100% { transform: scaleY(0.4); }
          50%      { transform: scaleY(1.0); }
        }
        @keyframes char-name-in {
          0%   { transform: translateY(-8px); opacity: 0; }
          100% { transform: translateY(0);    opacity: 1; }
        }
      `}</style>
    </div>
  );
}

const stageStyles = {
  stage: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden" },

  ring: { position: "absolute", left: "50%", top: "62%", width: 520, height: 520, borderRadius: "50%", boxShadow: "0 0 0 2px rgba(237,27,36,0.4)", animation: "char-ring 700ms cubic-bezier(0.2,0.8,0.2,1) forwards", pointerEvents: "none" },

  glow: { position: "absolute", left: "50%", top: "58%", width: 640, height: 200, transform: "translate(-50%, -50%)", borderRadius: "50%", background: "radial-gradient(ellipse, rgba(237,27,36,0.18), transparent 65%)", filter: "blur(20px)", transition: "opacity 420ms cubic-bezier(0.2,0.8,0.2,1)", pointerEvents: "none" },

  charWrap: { position: "relative", height: "92%", display: "flex", alignItems: "flex-end", animation: "char-drop-in 620ms cubic-bezier(0.2,0.8,0.2,1) both", willChange: "transform" },
  bob:      { animation: "char-bob 3.4s ease-in-out infinite", willChange: "transform" },
  charImg:  { height: "100%", width: "auto", maxHeight: 720, display: "block", transition: "filter 220ms cubic-bezier(0.2,0.8,0.2,1)" },

  contactShadow: { position: "absolute", left: "50%", bottom: "4%", width: 360, height: 36, transform: "translateX(-50%)", borderRadius: "50%", background: "radial-gradient(ellipse, rgba(0,0,0,0.22), transparent 70%)", filter: "blur(2px)", pointerEvents: "none" },

  np:      { position: "absolute", left: "50%", bottom: 28, transform: "translateX(-50%)", display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px 8px 12px", background: "var(--ink)", color: "#fff", borderRadius: 999, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, transition: "opacity 220ms cubic-bezier(0.2,0.8,0.2,1), transform 220ms cubic-bezier(0.2,0.8,0.2,1)", boxShadow: "0 10px 24px rgba(0,0,0,0.18)" },
  eq:      { display: "inline-flex", alignItems: "center", gap: 3, height: 14 },
  bar:     { display: "inline-block", width: 3, height: "100%", background: "var(--signal)", borderRadius: 1, transformOrigin: "center", animation: "char-eq 700ms ease-in-out infinite" },
  npLabel: { whiteSpace: "nowrap" },

  charBadge:       { position: "absolute", top: 24, right: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, zIndex: 4 },
  charBadgeKicker: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" },
  charBadgeName:   { fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 28, letterSpacing: "-0.02em", color: "var(--ink)", animation: "char-name-in 420ms cubic-bezier(0.2,0.8,0.2,1) both" },
};

window.CharacterStage = CharacterStage;