// arcai-onboarding.jsx — ON-04 Placement Assessment, ON-05 Result Reveal

// ── ON-04 Placement Assessment ────────────────────────────────────────────
function ScreenON04({ onNavigate }) {
  const [selected, setSelected] = React.useState(null);
  const stages = ['Foundations', 'Prompting', 'Tools', 'Workflow', 'Building'];
  const activeStage = 1; // 0-indexed

  const options = [
    { id: 'a', text: '"Tolong tulis email maaf untuk client kami."' },
    { id: 'b', text: '"Kamu adalah manajer profesional. Client kami kecewa karena deadline terlewat 2 hari. Tulis email permintaan maaf yang tulus dan sertakan rencana perbaikan."', correct: true },
    { id: 'c', text: '"Buatkan email yang sopan untuk client yang marah tentang keterlambatan."' },
    { id: 'd', text: '"email apology: client kecewa + deadline + maaf + solusi"', mono: true },
  ];

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', paddingTop: 44, display: 'flex', flexDirection: 'column' }}>
      {/* Top progress — 5 segment dots */}
      <div style={{ padding: '16px 20px 12px' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
          {stages.map((s, i) => (
            <div key={s} style={{ flex: 1, height: 4, borderRadius: 4, background: i < activeStage ? 'var(--accent-deep)' : i === activeStage ? 'var(--accent)' : 'var(--surface-2)', transition: 'background 0.3s', position: 'relative', overflow: 'hidden' }}>
              {i === activeStage && (
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)', animation: 'shimmer 2s infinite', backgroundSize: '200% 100%' }} />
              )}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            Stage {activeStage + 1} / {stages.length} · {stages[activeStage]}
          </span>
          <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>~3 stage lagi</span>
        </div>
      </div>

      {/* Question card */}
      <div style={{ flex: 1, padding: '4px 20px 120px' }}>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 18, padding: '20px' }}>
          <EyebrowChip style={{ marginBottom: 14 }}>PROMPTING · BASIC</EyebrowChip>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 700, color: 'var(--text)', lineHeight: 1.35, letterSpacing: '-0.02em', marginBottom: 18 }}>
            Anda ingin ChatGPT membantu menulis email apology ke client. Mana prompt yang paling efektif?
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {options.map(opt => (
              <div key={opt.id} onClick={() => setSelected(opt.id)}
                style={{
                  padding: '14px 16px', borderRadius: 14, cursor: 'pointer',
                  border: `1px solid ${selected === opt.id ? 'var(--accent)' : 'var(--border)'}`,
                  background: selected === opt.id ? 'var(--accent-overlay-soft)' : 'var(--bg-soft)',
                  transition: 'all 0.15s', position: 'relative',
                }}>
                <div style={{
                  fontSize: 13, color: 'var(--text)', lineHeight: 1.5,
                  fontFamily: opt.mono ? 'var(--font-mono)' : 'var(--font-body)',
                }}>
                  {opt.text}
                </div>
                {selected === opt.id && (
                  <div style={{
                    position: 'absolute', top: 10, right: 10,
                    width: 18, height: 18, borderRadius: '50%',
                    background: 'var(--accent)', display: 'flex', alignItems: 'center',
                    justifyContent: 'center', fontSize: 10, color: 'var(--bg)', fontWeight: 700,
                  }}>✓</div>
                )}
              </div>
            ))}
          </div>

          {/* Encouragement */}
          <div style={{ marginTop: 16, fontSize: 12, color: 'var(--text-muted)', fontStyle: 'italic', textAlign: 'center', lineHeight: 1.5 }}>
            Tidak ada jawaban yang sepenuhnya salah — ini untuk mengetahui titik awal Anda.
          </div>
        </div>
      </div>

      {/* Sticky bottom */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px 28px', background: 'linear-gradient(to top, var(--bg) 60%, transparent)', borderTop: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BtnPrimary onClick={() => selected && onNavigate('ON05')} disabled={!selected} fullWidth>
            Lanjut →
          </BtnPrimary>
          <button style={{ fontSize: 12, color: 'var(--text-dim)', background: 'none', border: 'none', cursor: 'pointer', whiteSpace: 'nowrap', padding: '8px 4px' }}>
            Skip
          </button>
        </div>
      </div>
    </div>
  );
}

// ── ON-05 Result Reveal ───────────────────────────────────────────────────
function ScreenON05({ onNavigate }) {
  const [frame, setFrame] = React.useState('A'); // A → B → C

  React.useEffect(() => {
    if (frame === 'A') {
      const t = setTimeout(() => setFrame('B'), 2800);
      return () => clearTimeout(t);
    }
    if (frame === 'B') {
      const t = setTimeout(() => setFrame('C'), 2000);
      return () => clearTimeout(t);
    }
  }, [frame]);

  const radarData = [
    { label: 'Foundations', value: 0.75 },
    { label: 'Prompting', value: 0.88 },
    { label: 'Tools', value: 0.55 },
    { label: 'Workflow', value: 0.38 },
    { label: 'Building', value: 0.22 },
  ];

  const milestones = [
    { icon: '⚡', title: 'Prompt Mastery', desc: '3 lesson · 2 minggu', active: true },
    { icon: '🔧', title: 'AI Tools Intermediate', desc: '4 lesson · 2 minggu', active: false },
    { icon: '🔄', title: 'Workflow Automation', desc: '4 lesson · 2 minggu', active: false },
    { icon: '🏗️', title: 'Build AI Workflow', desc: '5 lesson · 2 minggu', active: false },
  ];

  // Frame A — Calculating
  if (frame === 'A') return (
    <div style={{ height: '100%', background: 'var(--bg-deep)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, position: 'relative', overflow: 'hidden' }}>
      {/* Ambient glow */}
      <div style={{ position: 'absolute', width: 300, height: 300, background: 'radial-gradient(circle, var(--accent-overlay-mid) 0%, transparent 70%)', borderRadius: '50%', animation: 'pulsering 1.8s ease-out infinite' }} />
      {/* Pulse rings */}
      <div style={{ position: 'relative', width: 80, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', width: 80, height: 80, borderRadius: '50%', border: '2px solid var(--accent)', opacity: 0.6, animation: 'pulsering 1.8s ease-out infinite' }} />
        <div style={{ position: 'absolute', width: 60, height: 60, borderRadius: '50%', border: '2px solid var(--accent)', opacity: 0.4, animation: 'pulsering 1.8s 0.4s ease-out infinite' }} />
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--accent-overlay-mid)', border: '2px solid var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg>
        </div>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)', letterSpacing: '0.04em', textAlign: 'center' }}>
        Menganalisa hasil lu...
      </div>
      {/* Stage dots flickering */}
      <div style={{ display: 'flex', gap: 8 }}>
        {['F','P','T','W','B'].map((l, i) => (
          <div key={l} style={{
            width: 28, height: 28, borderRadius: 8, border: '1px solid var(--border)',
            background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700,
            color: 'var(--accent)',
            animation: `pulsering ${1.4 + i * 0.15}s ${i * 0.2}s ease-out infinite`,
          }}>{l}</div>
        ))}
      </div>
    </div>
  );

  // Frame B — Level Reveal
  if (frame === 'B') return (
    <div style={{ height: '100%', background: 'var(--bg-deep)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', padding: '20px' }}>
      {/* Confetti dots */}
      {Array.from({ length: 16 }, (_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${10 + (i * 37 + 11) % 80}%`,
          top: `${20 + (i * 53 + 7) % 60}%`,
          width: 6, height: 6, borderRadius: '50%',
          background: i % 3 === 0 ? 'var(--accent)' : i % 3 === 1 ? 'var(--streak)' : 'var(--success)',
          animation: `confettidot 0.9s ${i * 0.08}s cubic-bezier(0.34,1.56,0.64,1) both`,
          opacity: 0,
        }} />
      ))}
      {/* Level number */}
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 110, fontWeight: 700, lineHeight: 1,
        background: 'linear-gradient(135deg, var(--accent-deep), var(--accent))',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
        animation: 'levelpop 0.7s cubic-bezier(0.34,1.56,0.64,1) both',
      }}>2</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em', marginTop: 4, animation: 'fadein 0.4s 0.4s both', opacity: 0 }}>
        LEVEL 2 — AI-FLUENT
      </div>
      <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 8, textAlign: 'center', lineHeight: 1.55, maxWidth: 260, animation: 'fadein 0.4s 0.6s both', opacity: 0 }}>
        Anda memulai di Level 2. Sudah comfortable menggunakan AI — saatnya naik ke level otomasi.
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 20, animation: 'fadein 0.4s 0.8s both', opacity: 0 }}>
        <XPChip xp="240 XP" />
        <StreakChip days={0} />
      </div>
    </div>
  );

  // Frame C — Context & Next Steps
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', paddingTop: 44 }}>
      {/* Mini reveal header */}
      <div style={{ padding: '16px 20px 0', background: 'var(--bg-deep)', borderBottom: '1px solid var(--border)', textAlign: 'center', paddingBottom: 20 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 700, background: 'linear-gradient(135deg, var(--accent-deep), var(--accent))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', lineHeight: 1 }}>2</div>
        <EyebrowChip style={{ marginTop: 4 }}>LEVEL 2 — AI-FLUENT</EyebrowChip>
      </div>

      <div style={{ padding: '20px 20px 100px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Radar */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 18, padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center', animation: 'fadein 0.5s both' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 4, alignSelf: 'flex-start' }}>Profil Kompetensi Lu</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 12, alignSelf: 'flex-start' }}>5 dimensi AI literacy</div>
          <RadarChart data={radarData} size={220} animated={true} />
          <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
            {radarData.map(d => (
              <span key={d.label} style={{ fontSize: 10, background: d.value > 0.7 ? 'rgba(123,237,111,0.12)' : d.value > 0.5 ? 'var(--accent-overlay-mid)' : 'rgba(255,75,145,0.1)', color: d.value > 0.7 ? 'var(--success)' : d.value > 0.5 ? 'var(--accent)' : 'var(--text-muted)', padding: '3px 8px', borderRadius: 999, fontWeight: 700 }}>
                {d.label}: {d.value > 0.7 ? 'kuat ✓' : d.value > 0.5 ? 'cukup' : 'perlu latihan'}
              </span>
            ))}
          </div>
        </div>

        {/* Artinya apa */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '16px 18px', animation: 'fadein 0.5s 0.15s both', opacity: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>ARTINYA APA?</div>
          <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.65 }}>
            Anda sudah comfortable menggunakan AI tools sehari-hari. Tantangan berikutnya: membangun AI workflow yang mengotomasi pekerjaan repetitif dan menghemat 3–5 jam per minggu.
          </div>
        </div>

        {/* Next 8 minggu */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '16px 18px', animation: 'fadein 0.5s 0.3s both', opacity: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>NEXT 8 MINGGU LU</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {milestones.map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                  background: m.active ? 'var(--accent-overlay-mid)' : 'var(--surface-2)',
                  border: `1px solid ${m.active ? 'var(--accent)' : 'var(--border)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16,
                }}>
                  {m.active ? m.icon : '🔒'}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: m.active ? 'var(--text)' : 'var(--text-dim)' }}>{m.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{m.desc}</div>
                </div>
                {m.active && <div style={{ marginLeft: 'auto' }}><EyebrowChip style={{ fontSize: 9 }}>MULAI</EyebrowChip></div>}
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ animation: 'fadein 0.5s 0.45s both', opacity: 0 }}>
          <BtnPrimary onClick={() => onNavigate('L01')} fullWidth>Pilih Target Level →</BtnPrimary>
          <div style={{ textAlign: 'center', marginTop: 12 }}>
            <button onClick={() => setFrame('A')} style={{ fontSize: 12, color: 'var(--text-dim)', background: 'none', border: 'none', cursor: 'pointer' }}>Lihat animasi lagi ↺</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenON04, ScreenON05 });