// SCREEN 3 — Active Lesson (multiple choice challenge)
function ScreenLesson({ accent, accentDeep, onExit, onAnswered }) {
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const [showExit, setShowExit] = React.useState(false);
  const [showHint, setShowHint] = React.useState(false);

  const options = [
    { id: 'A', code: 'Buat caption IG untuk skincare', correct: false, hint: 'Terlalu umum — AI nggak tau tone, target, atau goal.' },
    { id: 'B', code: 'Jadilah copywriter senior skincare 10 tahun. Buat 3 caption IG tone confident, target wanita 25-35 urban, goal: klik link bio.', correct: true, hint: 'Persona + tone + target + goal = jelas banget.' },
    { id: 'C', code: 'Tulis caption yang bagus banget untuk produk skincare terbaru.', correct: false, hint: '"Bagus" itu subjektif — AI ngasal.' },
    { id: 'D', code: 'Generate 5 Instagram captions for skincare.', correct: false, hint: 'Bahasa Inggris, tapi target audience-nya lokal. Output jadi miss.' },
  ];

  const current = selected ? options.find(o => o.id === selected) : null;
  const isCorrect = checked && current && current.correct;
  const isWrong = checked && current && !current.correct;

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      color: '#EAEEF3',
      fontFamily: "'Inter', sans-serif",
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Top progress bar */}
      <div style={{ padding: '10px 16px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <button
            onClick={() => setShowExit(true)}
            style={{
              width: 28, height: 28, borderRadius: 8,
              background: '#141A22', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', padding: 0,
            }}
          >{Icon.x(16, '#8A93A0')}</button>
          <div style={{ flex: 1, height: 10, borderRadius: 5,
            background: 'rgba(255,255,255,0.06)', overflow: 'hidden',
            position: 'relative',
          }}>
            <div style={{
              height: '100%', width: `${(3/7)*100}%`,
              background: `linear-gradient(90deg, ${accentDeep}, ${accent})`,
              borderRadius: 5,
              boxShadow: `0 0 6px ${accent}88`,
              position: 'relative',
            }}>
              {/* shine */}
              <div style={{
                position: 'absolute', top: 1, left: 2, right: 2, height: 2,
                borderRadius: 2, background: 'rgba(255,255,255,0.4)',
              }} />
            </div>
          </div>
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 11, fontWeight: 700, color: accent, minWidth: 20, textAlign: 'right',
          }}>3/7</div>
        </div>
        <div style={{ fontSize: 10, color: '#5A6472', letterSpacing: 1, textTransform: 'uppercase',
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600,
        }}>Persona Technique · Challenge</div>
      </div>

      {/* Prompt */}
      <div style={{ padding: '4px 16px 10px' }}>
        <div style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontSize: 15, fontWeight: 700, letterSpacing: -0.3,
          lineHeight: 1.3, marginBottom: 6,
        }}>Prompt mana yang paling efektif?</div>
        <div style={{ fontSize: 11.5, color: '#8A93A0', lineHeight: 1.45 }}>
          Lu <b style={{ color: '#EAEEF3', fontWeight: 600 }}>marketing manager</b> di brand skincare. Mau AI bikin caption Instagram yang converting.
        </div>
      </div>

      {/* Options */}
      <div style={{
        flex: 1, overflowY: 'auto', padding: '4px 16px 10px',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {options.map(opt => {
          const isSelected = selected === opt.id;
          const showResult = checked && isSelected;
          const borderColor = showResult
            ? (opt.correct ? accent : '#FF4B91')
            : (isSelected ? accent : 'rgba(255,255,255,0.06)');
          const bgColor = showResult
            ? (opt.correct ? `${accent}14` : 'rgba(255, 75, 145, 0.08)')
            : (isSelected ? `${accent}0E` : '#141A22');

          return (
            <button
              key={opt.id}
              onClick={() => !checked && setSelected(opt.id)}
              disabled={checked}
              className="tap-card"
              style={{
                width: '100%',
                textAlign: 'left',
                background: bgColor,
                border: `1.5px solid ${borderColor}`,
                borderRadius: 14,
                padding: '10px 12px',
                cursor: checked ? 'default' : 'pointer',
                display: 'flex', alignItems: 'flex-start', gap: 10,
                transition: 'all 0.15s',
                color: '#EAEEF3',
              }}
            >
              <div style={{
                width: 22, height: 22, minWidth: 22,
                borderRadius: 7,
                background: isSelected ? accent : '#1E2631',
                border: isSelected ? 'none' : '1px solid rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Space Grotesk', sans-serif",
                fontWeight: 700, fontSize: 11,
                color: isSelected ? '#0B0F14' : '#8A93A0',
                marginTop: 1,
              }}>{opt.id}</div>
              <div style={{
                flex: 1,
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontSize: 10.5, lineHeight: 1.5,
                color: isSelected ? '#EAEEF3' : '#B5BDC8',
              }}>{opt.code}</div>
            </button>
          );
        })}

        {/* Hint tray */}
        {showHint && current && (
          <div style={{
            background: 'rgba(255, 196, 0, 0.08)',
            border: '1px solid rgba(255, 196, 0, 0.2)',
            borderRadius: 12, padding: '8px 10px',
            display: 'flex', gap: 8, alignItems: 'flex-start',
          }}>
            <div style={{ marginTop: 1 }}>{Icon.lightbulb(14, '#FFC400')}</div>
            <div style={{ fontSize: 10.5, color: '#EAEEF3', lineHeight: 1.4 }}>
              <b style={{ color: '#FFC400' }}>Hint:</b> {current.hint}
            </div>
          </div>
        )}
      </div>

      {/* Bottom action */}
      <div style={{
        padding: '10px 16px 12px',
        borderTop: `1px solid rgba(255,255,255,0.05)`,
        background: checked ? (isCorrect ? `${accent}10` : 'rgba(255, 75, 145, 0.08)') : 'transparent',
      }}>
        {checked && (
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 13, fontWeight: 700,
            color: isCorrect ? accent : '#FF4B91',
            marginBottom: 8,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            {isCorrect ? '✓ Mantap! Persona lengkap.' : '✗ Belum pas. Coba lagi.'}
          </div>
        )}
        <div style={{ display: 'flex', gap: 8 }}>
          {!checked && (
            <button
              onClick={() => setShowHint(v => !v)}
              disabled={!selected}
              style={{
                padding: '11px 12px',
                borderRadius: 12,
                background: 'transparent',
                border: '1.5px solid rgba(255,255,255,0.08)',
                color: selected ? '#8A93A0' : '#3A4250',
                fontFamily: "'Space Grotesk', sans-serif",
                fontWeight: 600, fontSize: 12,
                cursor: selected ? 'pointer' : 'default',
                display: 'flex', alignItems: 'center', gap: 4,
              }}
            >{Icon.lightbulb(14, selected ? '#FFC400' : '#3A4250')}<span>Hint</span></button>
          )}
          <button
            onClick={() => {
              if (!selected) return;
              if (!checked) setChecked(true);
              else { onAnswered(isCorrect); }
            }}
            disabled={!selected}
            style={{
              flex: 1,
              padding: '11px 16px',
              borderRadius: 12,
              background: !selected ? '#1E2631' : (checked ? (isCorrect ? accent : '#FF4B91') : accent),
              color: !selected ? '#5A6472' : '#0B0F14',
              border: 'none',
              fontFamily: "'Space Grotesk', sans-serif",
              fontWeight: 700, fontSize: 13, letterSpacing: -0.2,
              cursor: selected ? 'pointer' : 'default',
              boxShadow: selected ? `0 4px 0 ${checked ? (isCorrect ? accentDeep : '#C6245D') : accentDeep}` : 'none',
              transition: 'transform 0.1s',
            }}
          >{checked ? (isCorrect ? 'Lanjut' : 'Coba Lagi') : 'Cek Jawaban'}</button>
        </div>
      </div>

      {/* Exit confirmation sheet */}
      {showExit && (
        <div style={{
          position: 'absolute', inset: 0, zIndex: 100,
          background: 'rgba(0,0,0,0.6)',
          display: 'flex', alignItems: 'flex-end',
          backdropFilter: 'blur(4px)',
        }} onClick={() => setShowExit(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%',
            background: '#1E2631',
            borderTopLeftRadius: 24, borderTopRightRadius: 24,
            padding: '18px 16px 22px',
            borderTop: '1px solid rgba(255,255,255,0.08)',
          }}>
            <div style={{
              width: 36, height: 4, borderRadius: 2,
              background: 'rgba(255,255,255,0.15)',
              margin: '0 auto 14px',
            }} />
            <div style={{
              fontFamily: "'Space Grotesk', sans-serif",
              fontSize: 18, fontWeight: 700, marginBottom: 4,
            }}>Yakin keluar?</div>
            <div style={{ fontSize: 12, color: '#8A93A0', marginBottom: 16, lineHeight: 1.4 }}>
              Progress lesson ini bakal hilang. Streak lu aman sampai jam 23:59 WIB.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => setShowExit(false)} style={{
                flex: 1, padding: '11px 16px', borderRadius: 12,
                background: '#2A3442', border: 'none', color: '#EAEEF3',
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 13,
                cursor: 'pointer',
              }}>Lanjut Belajar</button>
              <button onClick={onExit} style={{
                flex: 1, padding: '11px 16px', borderRadius: 12,
                background: '#FF4B91', border: 'none', color: '#0B0F14',
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 13,
                cursor: 'pointer',
                boxShadow: '0 4px 0 #C6245D',
              }}>Keluar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenLesson });