// result-screen.jsx — Hand reveal · count up
// Exports: ResultScreen

function ResultScreen({ cards, guessed, teams, teamIndex, metaphor, onNext, isLast }) {
  const earned = cards.reduce((s, c, i) => s + (guessed[i] ? c.pts : 0), 0);
  const okCount = guessed.filter(Boolean).length;

  return (
    <div className="screen fade-in" style={{ paddingTop: 14, gap: 14 }}>
      <div style={{ textAlign: "center" }}>
        <div className="eyebrow">— Round Result —</div>
        <div style={{
          fontFamily: "var(--font-arcade)",
          fontSize: 14,
          letterSpacing: 2,
          color: "var(--fg-dim)",
          marginTop: 8,
        }}>
          <span style={{ color: "var(--accent)" }}>{teams[teamIndex].name}</span> banked
        </div>
        <div className="score-big" style={{
          color: "var(--accent)",
          marginTop: 4,
          textShadow: "0 0 28px rgba(255,94,58,0.5)",
        }}>
          +<CountUp to={earned} />
        </div>
        <div style={{ color: "var(--fg-dim)", fontSize: 13 }}>
          {okCount}/{cards.length} cards guessed
        </div>
      </div>

      {/* Hand reveal — fanned mini cards */}
      <div className="fan-container">
        {cards.map((c, i) => {
          const t = (i - (cards.length - 1) / 2) / (cards.length - 1 || 1);
          const rot = t * 18;
          const yOff = Math.abs(t) * 14;
          const xPct = 50 + t * 24;
          const ok = guessed[i];
          return (
            <div
              key={i}
              className="fan-card"
              style={{
                left: `${xPct}%`,
                top: yOff,
                transform: `translateX(-50%) rotate(${rot}deg)`,
                animation: `fanIn 480ms cubic-bezier(.2,.7,.3,1.3) ${100 + i * 130}ms both`,
                zIndex: 10 + i,
              }}
            >
              <Card
                word={c.word}
                pts={c.pts}
                diff={c.difficulty}
                time={c.slotTime}
                metaphor={metaphor}
                size="sm"
                state={ok ? "won" : "blasted"}
                showTime={false}
                fontScale={c.word.length > 10 ? 0.6 : 0.8}
              />
            </div>
          );
        })}
      </div>

      <ScoreStrip teams={teams} activeIdx={teamIndex} />

      <div className="spacer" />

      <button
        className={"btn " + (isLast ? "" : "go")}
        onClick={() => { window.sfx && window.sfx.woosh(); onNext(); }}
      >
        {isLast ? "🏆 Final Scores" : "Next Team →"}
      </button>

      <style>{`
        @keyframes fanIn {
          from { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(0) scale(0.6); }
          to   { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

window.ResultScreen = ResultScreen;