// play-screen.jsx — active team's acting screen (server-driven timer)
// Exports: PlayScreen

function PlayScreen({ cards, teamName, metaphor, timeLeft, cardStates, activeCardIndex, bufferTimeLeft, onGuessed, onEndTurn }) {
  const { useEffect, useRef, useState } = React;
  const prevStatusesRef = useRef(null);
  const prevTimeRef = useRef(null);
  const prevBufferRef = useRef(0);
  const [cardExploding, setCardExploding] = useState(false);

  // Blast SFX — detect when a card transitions to 'blasted'
  useEffect(() => {
    if (!cardStates) { prevStatusesRef.current = null; return; }
    const statuses = cardStates.map(s => s.status);
    const prev = prevStatusesRef.current;
    prevStatusesRef.current = statuses;
    if (!prev) return;
    const newBlast = statuses.some((s, i) => prev[i] !== 'blasted' && s === 'blasted');
    if (newBlast) window.sfx && window.sfx.blast();
  }, [cardStates]);

  // Detect buffer start for blasted card → trigger card explosion animation
  useEffect(() => {
    const prev = prevBufferRef.current;
    prevBufferRef.current = bufferTimeLeft;
    if (prev === 0 && bufferTimeLeft > 0) {
      const ai = activeCardIndex != null ? activeCardIndex : 0;
      if (cardStates && cardStates[ai] && cardStates[ai].status === 'blasted') {
        setCardExploding(true);
        setTimeout(() => setCardExploding(false), 900);
      } else if (cardStates && cardStates[ai] && cardStates[ai].status === 'guessed') {
        window.sfx && window.sfx.cheer();
      }
    }
  }, [bufferTimeLeft]); // eslint-disable-line react-hooks/exhaustive-deps

  // Tick / urgent SFX — triggered by each 1s decrement from server
  useEffect(() => {
    if (bufferTimeLeft > 0) return; // no tick SFX during buffer
    const prev = prevTimeRef.current;
    prevTimeRef.current = timeLeft;
    if (prev === null || timeLeft >= prev || timeLeft <= 0) return;
    if (timeLeft <= 4) window.sfx && window.sfx.urgent();
    else window.sfx && window.sfx.tick();
  }, [timeLeft, bufferTimeLeft]);

  // Wake lock — keep screen on during actor's turn
  useEffect(() => {
    let lock = null;
    let released = false;
    async function acquire() {
      try {
        if ('wakeLock' in navigator) {
          lock = await navigator.wakeLock.request('screen');
          lock.addEventListener('release', () => {
            if (!released && document.visibilityState === 'visible') acquire();
          });
        }
      } catch (_) {}
    }
    acquire();
    return () => {
      released = true;
      if (lock) lock.release().catch(() => {});
    };
  }, []);

  if (!cards || !cardStates) return null;

  const total = cards.length;
  const ai = Math.min(activeCardIndex, total - 1);
  const card = cards[ai];
  const state = cardStates[ai];
  const inBuffer = bufferTimeLeft > 0;
  const wasBlasted = inBuffer && state?.status === 'blasted';
  const wasGuessed = inBuffer && state?.status === 'guessed';
  const pct = card ? Math.max(0, Math.min(1, timeLeft / card.slotTime)) : 0;
  const urgent = timeLeft <= 4 && state && state.status === 'active';
  const allDone = cardStates.every((s) => s.status === 'guessed' || s.status === 'blasted');

  const guessedCount = cardStates.filter((s) => s.status === 'guessed').length;
  const points = cardStates.reduce((sum, s, i) => sum + (s.status === 'guessed' ? cards[i].pts : 0), 0);

  const particles = [
    { color: 'var(--accent)',   size: 11, anim: 'particleFly0' },
    { color: 'var(--accent-2)', size: 9,  anim: 'particleFly1' },
    { color: 'var(--bad)',      size: 12, anim: 'particleFly2' },
    { color: 'var(--accent)',   size: 8,  anim: 'particleFly3' },
    { color: 'var(--accent-2)', size: 10, anim: 'particleFly4' },
    { color: 'var(--fg)',       size: 8,  anim: 'particleFly5' },
    { color: 'var(--bad)',      size: 11, anim: 'particleFly6' },
    { color: 'var(--accent)',   size: 9,  anim: 'particleFly7' },
  ];

  return (
    <div className="screen fade-in" style={{ paddingTop: 10, gap: 14 }}>
      {wasGuessed && <Confetti />}
      {/* Header */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '4px 0',
      }}>
        <div>
          <div className="eyebrow">ACTING</div>
          <div style={{
            fontFamily: 'var(--font-arcade)',
            fontSize: 16,
            color: urgent ? 'var(--bad)' : 'var(--accent)',
            letterSpacing: 2,
          }}>{teamName}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="eyebrow">CARD</div>
          <div style={{
            fontFamily: 'var(--font-arcade)',
            fontSize: 16,
            color: 'var(--fg)',
            letterSpacing: 1,
          }}>{Math.min(ai + 1, total)}/{total}</div>
        </div>
      </div>

      {/* Card status strip */}
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
        {cardStates.map((s, i) => {
          const bg = s.status === 'guessed' ? 'var(--good)'
                   : s.status === 'blasted'  ? 'var(--bad)'
                   : s.status === 'active'   ? 'var(--accent)'
                   : 'rgba(255,255,255,0.1)';
          return (
            <span key={i} style={{
              width: 36, height: 6,
              background: bg,
              borderRadius: 4,
              transition: 'background 200ms',
              boxShadow: s.status === 'active' ? '0 0 12px var(--accent)' : 'none',
            }} />
          );
        })}
      </div>

      {/* Card area */}
      <div style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        gap: 12,
      }}>
        {/* ── Buffer state ── */}
        {inBuffer && !allDone && card && (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, width: 'min(92vw, 400px)' }}>
            {wasBlasted ? (
              <div style={{ position: 'relative', width: '100%', height: 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {cardExploding && (
                  <div className="sprite-explosion">
                    {particles.map((p, i) => (
                      <div key={i} style={{
                        position: 'absolute',
                        width: p.size, height: p.size,
                        borderRadius: 2,
                        background: p.color,
                        border: '1.5px solid var(--fg)',
                        animationName: p.anim,
                        animationDuration: '0.75s',
                        animationFillMode: 'forwards',
                        animationTimingFunction: 'cubic-bezier(0.15, 0.8, 0.3, 1)',
                      }} />
                    ))}
                  </div>
                )}
                <div style={{
                  fontFamily: 'var(--font-arcade)',
                  fontSize: 22,
                  color: 'var(--bad)',
                  letterSpacing: 3,
                  opacity: cardExploding ? 0 : 0.6,
                  transition: 'opacity 0.3s',
                  textDecoration: 'line-through',
                  textDecorationColor: 'var(--bad)',
                }}>
                  {card.word}
                </div>
              </div>
            ) : wasGuessed ? (
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 52, lineHeight: 1, marginBottom: 8 }}>✓</div>
                <div style={{
                  fontFamily: 'var(--font-arcade)',
                  fontSize: 20,
                  color: 'var(--good)',
                  letterSpacing: 3,
                }}>
                  {card.word}
                </div>
              </div>
            ) : null}

            <div style={{
              fontFamily: 'var(--font-arcade)',
              fontSize: 10,
              letterSpacing: 2,
              color: 'var(--fg-quiet)',
              textAlign: 'center',
            }}>
              NEXT CARD IN {bufferTimeLeft}...
            </div>
          </div>
        )}

        {/* ── Normal play state ── */}
        {!inBuffer && !allDone && card ? (
          <div style={{
            position: 'relative',
            width: 'min(92vw, 400px)',
            maxWidth: '100%',
          }}>
            <Card
              word={card.word}
              pts={card.pts}
              diff={card.difficulty}
              time={card.slotTime}
              metaphor={metaphor}
              size="lg"
              state="active"
              showTime={false}
              fontScale={card.word.length > 12 ? 0.72 : card.word.length > 8 ? 0.88 : 1}
              style={{
                animation: urgent ? 'wiggle 0.4s ease-in-out infinite' : undefined,
              }}
            />
            {/* Drain bar at card bottom */}
            <div style={{
              position: 'absolute',
              left: 14, right: 14, bottom: 18,
              height: 8, borderRadius: 4,
              background: 'rgba(0,0,0,0.15)',
              border: '1.5px solid var(--paper-ink)',
              overflow: 'hidden',
              boxShadow: '0 2px 0 var(--paper-ink)',
            }}>
              <div style={{
                height: '100%',
                width: `${pct * 100}%`,
                background: urgent ? 'var(--bad)' : 'var(--accent)',
                transition: 'width 0.95s linear, background 0.2s',
              }} />
            </div>
            {/* Big seconds counter */}
            <div style={{
              position: 'absolute',
              top: -26, right: -6,
              background: urgent ? 'var(--bad)' : 'var(--ink)',
              color: '#fff',
              fontFamily: 'var(--font-arcade)',
              fontSize: 28,
              padding: '12px 16px',
              borderRadius: 14,
              border: '2px solid var(--paper-ink)',
              boxShadow: '0 4px 0 var(--paper-ink), 0 0 24px ' + (urgent ? 'rgba(255,79,94,.6)' : 'rgba(255,94,58,.4)'),
              animation: urgent ? 'tickPulse 0.6s ease-in-out infinite' : undefined,
              minWidth: 64,
              textAlign: 'center',
            }}>
              {String(timeLeft).padStart(2, '0')}
            </div>
          </div>
        ) : !inBuffer && allDone ? (
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 6,
          }}>
            <div style={{ fontSize: 64 }}>{guessedCount === total ? '🎉' : guessedCount > 0 ? '🙌' : '💥'}</div>
            <div className="eyebrow">TURN OVER</div>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 56,
              color: 'var(--accent)',
              lineHeight: 1,
            }}>+{points}</div>
            <div style={{ color: 'var(--fg-dim)', fontSize: 14 }}>
              {guessedCount}/{total} guessed
            </div>
          </div>
        ) : null}
      </div>

      {/* Action buttons — hidden once all done or in buffer */}
      {!allDone && (
        <button
          className="btn go"
          style={{
            fontSize: 15,
            padding: '20px 22px',
            ...(inBuffer ? { opacity: 0.35, cursor: 'not-allowed' } : {}),
          }}
          disabled={inBuffer}
          onClick={onGuessed}
        >
          ✓ GUESSED · +{card ? card.pts : 0}
        </button>
      )}
      {!allDone && (
        <button className="btn ghost" disabled={inBuffer} style={inBuffer ? { opacity: 0.35 } : {}} onClick={onEndTurn}>
          End Turn Early
        </button>
      )}

      <style>{`
        @keyframes wiggle {
          0%,100% { transform: rotate(0); }
          25% { transform: rotate(-1.5deg) translateY(-2px); }
          75% { transform: rotate(1.5deg) translateY(-2px); }
        }
        @keyframes tickPulse {
          0%,100% { transform: scale(1); }
          50% { transform: scale(1.08); }
        }
      `}</style>
    </div>
  );
}

window.PlayScreen = PlayScreen;