// Screen 2: Quiz with card swipe-out animation
function QuizScreen({ answers, setAnswers, onComplete }) {
  const idx = answers.length;
  const q = QUESTIONS[idx];
  const [exiting, setExiting] = React.useState(null); // 'left' | 'right' | null
  const [pendingAnswer, setPendingAnswer] = React.useState(null);
  const [hover, setHover] = React.useState(null); // 'left' | 'right' | null for tilt preview

  const choose = (side) => {
    if (exiting) return;
    setExiting(side);
    setPendingAnswer(side === 'right' ? 1 : 0);
    setTimeout(() => {
      const newAnswers = [...answers, side === 'right' ? 1 : 0];
      if (newAnswers.length >= QUESTIONS.length) {
        onComplete(newAnswers);
      } else {
        setAnswers(newAnswers);
        setExiting(null);
        setPendingAnswer(null);
        setHover(null);
      }
    }, 380);
  };

  // Progress: which dimensions are unlocked
  const progress = { DE: 0, RA: 0, SO: 0, PM: 0 };
  QUESTIONS.forEach((qq, i) => { if (i < idx) progress[qq.dim]++; });

  if (!q) return null;
  const dim = DIMS[q.dim];

  // Card transform based on exit / hover
  let cardStyle = {
    transform: 'translateX(0) rotate(0deg)',
    opacity: 1,
    transition: 'transform 380ms cubic-bezier(.5,.05,.3,1), opacity 380ms ease',
  };
  if (exiting === 'left') {
    cardStyle = { transform: 'translateX(-130%) rotate(-18deg)', opacity: 0, transition: 'transform 380ms cubic-bezier(.5,.05,.3,1), opacity 380ms ease' };
  } else if (exiting === 'right') {
    cardStyle = { transform: 'translateX(130%) rotate(18deg)', opacity: 0, transition: 'transform 380ms cubic-bezier(.5,.05,.3,1), opacity 380ms ease' };
  } else if (hover === 'left') {
    cardStyle = { transform: 'translateX(-12px) rotate(-3deg)', opacity: 1, transition: 'transform 220ms ease' };
  } else if (hover === 'right') {
    cardStyle = { transform: 'translateX(12px) rotate(3deg)', opacity: 1, transition: 'transform 220ms ease' };
  }

  // Next card peek
  const nextQ = QUESTIONS[idx + 1];

  return (
    <div style={{
      width: '100%', minHeight: '100vh', position: 'relative',
      background: '#FAF4E9',
      display: 'flex', flexDirection: 'column',
      paddingTop: 40, paddingBottom: 30,
    }}>
      {/* Header — progress dots */}
      <div style={{ padding: '20px 16px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#9C7A52', fontWeight: 600, whiteSpace: 'nowrap', flexShrink: 0 }}>
          {idx + 1} / {QUESTIONS.length}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {Object.entries(DIMS).map(([k, d]) => {
            const filled = progress[k];
            const isCurrent = k === q.dim;
            return (
              <div key={k} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: filled === 3 ? d.color : (filled > 0 ? d.color + '55' : '#fff'),
                  border: `1.5px solid ${filled > 0 ? d.color : '#E8DCC8'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 14, opacity: isCurrent || filled > 0 ? 1 : 0.5,
                  transform: isCurrent ? 'scale(1.1)' : 'scale(1)',
                  transition: 'all 240ms ease',
                  boxShadow: isCurrent ? `0 4px 10px ${d.color}50` : 'none',
                }}>{d.emoji}</div>
                <div style={{ display: 'flex', gap: 2 }}>
                  {[0,1,2].map(i => (
                    <div key={i} style={{
                      width: 6, height: 2, borderRadius: 1,
                      background: i < filled ? d.color : '#E8DCC8',
                    }} />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Question card stack */}
      <div style={{
        flex: 1, position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '0 24px',
      }}>
        {/* Next card peek behind */}
        {nextQ && (
          <div style={{
            position: 'absolute', top: '50%', left: 24, right: 24,
            transform: 'translateY(-50%) scale(0.94)',
            height: 380, borderRadius: 24,
            background: '#fff', boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
            opacity: 0.55,
          }} />
        )}

        {/* Active card */}
        <div key={idx} style={{
          position: 'relative', width: '100%', height: 380,
          ...cardStyle,
        }}>
          <div style={{
            width: '100%', height: '100%', borderRadius: 24,
            background: '#fff',
            boxShadow: '0 12px 40px rgba(42,31,20,0.12), 0 2px 6px rgba(42,31,20,0.06)',
            border: `2px solid ${dim.color}22`,
            padding: '28px 24px',
            display: 'flex', flexDirection: 'column',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Dim chip */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
              padding: '6px 12px', borderRadius: 999,
              background: dim.color + '15', color: dim.color,
              fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600,
            }}>
              <span>{dim.emoji}</span>
              <span>{dim.name}</span>
            </div>

            {/* Question number — large */}
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 92, fontWeight: 800,
              color: dim.color + '12',
              position: 'absolute', right: 16, top: 8,
              lineHeight: 1, letterSpacing: -2,
            }}>{String(idx + 1).padStart(2, '0')}</div>

            {/* Scene */}
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', paddingTop: 24, position: 'relative', zIndex: 1 }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700,
                color: '#2A1F14', lineHeight: 1.4, textWrap: 'pretty',
              }}>{q.scene}</div>
            </div>

            {/* Hint */}
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 11, color: '#A89378',
              textAlign: 'center', letterSpacing: 1,
            }}>选一个更像你家的</div>

            {/* Swipe direction overlays */}
            {hover === 'left' && (
              <div style={{
                position: 'absolute', top: 24, left: 24,
                padding: '6px 12px', borderRadius: 8,
                background: '#2A1F14', color: '#FFD9A8',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
                transform: 'rotate(-8deg)', letterSpacing: 1,
              }}>← A</div>
            )}
            {hover === 'right' && (
              <div style={{
                position: 'absolute', top: 24, right: 24,
                padding: '6px 12px', borderRadius: 8,
                background: '#2A1F14', color: '#FFD9A8',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
                transform: 'rotate(8deg)', letterSpacing: 1,
              }}>B →</div>
            )}
          </div>
        </div>
      </div>

      {/* Two option buttons */}
      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 10 }}>
        <button
          onClick={() => choose('left')}
          onMouseEnter={() => !exiting && setHover('left')}
          onMouseLeave={() => setHover(null)}
          style={{
            flex: 1, padding: '16px 14px', borderRadius: 18,
            background: '#fff', border: `1.5px solid ${hover === 'left' ? dim.color : '#E8DCC8'}`,
            color: '#2A1F14', textAlign: 'left', cursor: 'pointer',
            fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.4,
            boxShadow: hover === 'left' ? `0 6px 16px ${dim.color}30` : '0 2px 6px rgba(0,0,0,0.04)',
            transition: 'all 200ms ease',
            minHeight: 88, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: dim.color, letterSpacing: 1 }}>← A</div>
          <div style={{ fontWeight: 500 }}>{q.a}</div>
        </button>
        <button
          onClick={() => choose('right')}
          onMouseEnter={() => !exiting && setHover('right')}
          onMouseLeave={() => setHover(null)}
          style={{
            flex: 1, padding: '16px 14px', borderRadius: 18,
            background: '#fff', border: `1.5px solid ${hover === 'right' ? dim.color : '#E8DCC8'}`,
            color: '#2A1F14', textAlign: 'right', cursor: 'pointer',
            fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.4,
            boxShadow: hover === 'right' ? `0 6px 16px ${dim.color}30` : '0 2px 6px rgba(0,0,0,0.04)',
            transition: 'all 200ms ease',
            minHeight: 88, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: dim.color, letterSpacing: 1 }}>B →</div>
          <div style={{ fontWeight: 500 }}>{q.b}</div>
        </button>
      </div>
    </div>
  );
}

window.QuizScreen = QuizScreen;