// Screen 3: Dramatic reveal page
function RevealScreen({ result, onContinue }) {
  const [stage, setStage] = React.useState(0); // 0..4 = which dim card is revealing; 5 = type bombs in; 6 = ready
  const [shake, setShake] = React.useState(false);
  const { code, scores } = result;
  const type = TYPES[code];

  React.useEffect(() => {
    if (stage < 4) {
      const t = setTimeout(() => setStage(stage + 1), 850);
      return () => clearTimeout(t);
    } else if (stage === 4) {
      // big bang
      const t1 = setTimeout(() => { setShake(true); setStage(5); }, 350);
      const t2 = setTimeout(() => setShake(false), 900);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    } else if (stage === 5) {
      const t = setTimeout(() => setStage(6), 1450);
      return () => clearTimeout(t);
    } else if (stage === 6) {
      // auto-advance to result page after a moment so the user isn't stuck
      const t = setTimeout(() => onContinue(), 2200);
      return () => clearTimeout(t);
    }
  }, [stage]);

  const dimKeys = ['DE', 'RA', 'SO', 'PM'];

  // Particles for the big bang — 40 confetti
  const particles = React.useMemo(() => Array.from({ length: 50 }, (_, i) => ({
    id: i,
    angle: (i / 50) * 360 + Math.random() * 12,
    dist: 120 + Math.random() * 180,
    size: 4 + Math.random() * 8,
    delay: Math.random() * 200,
    color: ['#E8804A', '#3F8CCB', '#7D6BC9', '#5BA86F', '#FFD9A8', '#FFF', type.accent][i % 7],
    rot: Math.random() * 720 - 360,
  })), [type.accent]);

  return (
    <div style={{
      width: '100%', minHeight: '100vh', position: 'relative', overflow: 'hidden',
      background: stage >= 5
        ? `radial-gradient(circle at 50% 45%, ${type.accent}33 0%, #1A0F08 70%)`
        : '#1A0F08',
      transition: 'background 600ms ease',
      display: 'flex', flexDirection: 'column',
      paddingTop: 40, paddingBottom: 30,
      transform: shake ? 'translate(2px, -1px)' : 'none',
      animation: shake ? 'shake 80ms infinite' : 'none',
    }}>
      <style>{`
        @keyframes shake { 0%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-2px)} 100%{transform:translate(0,0)} }
        @keyframes flipIn { 0% { transform: perspective(800px) rotateY(90deg) scale(.7); opacity: 0; filter: blur(8px); } 100% { transform: perspective(800px) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } }
        @keyframes lightSweep { 0% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(250%) skewX(-20deg); } }
        @keyframes typePop { 0% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } 70% { transform: scale(.92); } 100% { transform: scale(1); opacity: 1; } }
        @keyframes confettiFly { from { transform: translate(0,0) rotate(0deg); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
        @keyframes glowPulse { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }
        @keyframes label { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>

      {/* Title at top */}
      <div style={{
        textAlign: 'center', padding: '20px 24px',
        fontFamily: 'var(--font-display)', fontSize: 14, color: 'rgba(255,255,255,0.5)',
        letterSpacing: 6, fontWeight: 500,
      }}>
        {stage < 5 ? '正在揭晓' : stage === 5 ? '·  ·  ·' : '你家是 —'}
      </div>

      {/* 4 dimension cards */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        position: 'relative', padding: '0 24px',
      }}>
        {stage < 5 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }}>
            {dimKeys.map((dk, i) => {
              const d = DIMS[dk];
              const score = scores[dk];
              const right = score >= 2;
              const letter = right ? d.rightLetter : d.leftLetter;
              const label = right ? d.rightLabel : d.leftLabel;
              const revealed = stage > i;
              const flipping = stage === i;
              return (
                <div key={dk} style={{
                  height: 64, borderRadius: 16,
                  background: revealed ? d.color : 'rgba(255,255,255,0.04)',
                  border: revealed ? 'none' : '1px solid rgba(255,255,255,0.08)',
                  position: 'relative', overflow: 'hidden',
                  display: 'flex', alignItems: 'center', padding: '0 18px',
                  animation: flipping ? 'flipIn 600ms cubic-bezier(.2,.8,.2,1) forwards' : 'none',
                  opacity: revealed || flipping ? 1 : 0.35,
                  boxShadow: revealed ? `0 8px 24px ${d.color}66` : 'none',
                }}>
                  {revealed && (
                    <div style={{
                      position: 'absolute', top: 0, bottom: 0, width: 60,
                      background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)',
                      animation: flipping || stage === i + 1 ? 'lightSweep 800ms ease-out' : 'none',
                    }} />
                  )}
                  <div style={{ fontSize: 28, marginRight: 14 }}>{d.emoji}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{
                      fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 500,
                      color: revealed ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.4)',
                      letterSpacing: 2,
                    }}>{d.name}</div>
                    <div style={{
                      fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700,
                      color: revealed ? '#fff' : 'rgba(255,255,255,0.3)',
                      animation: revealed ? 'label 400ms ease 200ms both' : 'none',
                    }}>
                      {revealed ? label : '· · ·'}
                    </div>
                  </div>
                  {revealed && (
                    <div style={{
                      width: 44, height: 44, borderRadius: 10,
                      background: 'rgba(0,0,0,0.18)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#fff',
                      animation: 'label 400ms ease 200ms both',
                    }}>{letter}</div>
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Type reveal */}
        {stage >= 5 && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
          }}>
            {/* Halo */}
            <div style={{
              position: 'absolute', width: 360, height: 360,
              borderRadius: '50%',
              background: `radial-gradient(circle, ${type.accent}66 0%, transparent 70%)`,
              animation: 'glowPulse 2s ease-in-out infinite',
            }} />
            {/* Confetti */}
            {particles.map(p => {
              const dx = Math.cos(p.angle * Math.PI / 180) * p.dist;
              const dy = Math.sin(p.angle * Math.PI / 180) * p.dist;
              return (
                <div key={p.id} style={{
                  position: 'absolute',
                  width: p.size, height: p.size * (Math.random() > 0.5 ? 1 : 0.4),
                  background: p.color, borderRadius: 1,
                  '--dx': `${dx}px`, '--dy': `${dy}px`, '--rot': `${p.rot}deg`,
                  animation: `confettiFly 1.4s cubic-bezier(.1,.6,.2,1) ${p.delay}ms forwards`,
                }} />
              );
            })}

            <div style={{
              fontSize: 96, marginBottom: 8, position: 'relative',
              animation: 'typePop 700ms cubic-bezier(.2,1.6,.4,1) 100ms both',
              filter: `drop-shadow(0 8px 30px ${type.accent}99)`,
            }}>{type.emoji}</div>

            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 800,
              color: '#fff', letterSpacing: 1, marginBottom: 16,
              animation: 'typePop 600ms cubic-bezier(.2,1.6,.4,1) 250ms both',
              textShadow: `0 4px 20px ${type.accent}88`,
              position: 'relative',
            }}>{type.name}</div>

            {/* 4-letter blocks */}
            <div style={{
              display: 'flex', gap: 8, position: 'relative',
              animation: 'typePop 500ms cubic-bezier(.2,1.4,.4,1) 450ms both',
            }}>
              {code.split('').map((letter, i) => {
                const dim = DIMS[['DE','RA','SO','PM'][i]];
                return (
                  <div key={i} style={{
                    width: 48, height: 56, borderRadius: 10,
                    background: dim.color,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, color: '#fff',
                    boxShadow: `0 6px 18px ${dim.color}aa`,
                    transform: `rotate(${[-3,1.5,-1.5,3][i]}deg)`,
                  }}>{letter}</div>
                );
              })}
            </div>

            {stage === 6 && (
              <button onClick={onContinue} style={{
                position: 'absolute', bottom: 60,
                padding: '14px 32px', borderRadius: 30,
                background: '#fff', color: '#1A0F08', border: 'none',
                fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600,
                cursor: 'pointer', letterSpacing: 1,
                boxShadow: '0 8px 24px rgba(0,0,0,0.3)',
                animation: 'typePop 400ms ease both',
              }}>查看完整分析 →</button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

window.RevealScreen = RevealScreen;