// Quiz screen — multi-question Beyza & Emin trivia
const { useState: useStateQz } = React;

const QUESTIONS = [
  {
    q: 'Beyza ve Emin ilk nerede tanıştı?',
    options: ['Lise koridorunda', 'Bir konser kuyruğunda', 'İlkokul sıralarında', 'Bir düğünde'],
    correct: 2,
    fact: 'Aynı sokakta büyüdüler — birbirini ilkokulda Müdür Yardımcısı\'nın odasında tanıdılar.'
  },
  {
    q: 'Emin\'in en sevdiği yemek?',
    options: ['Mantı', 'Karnıyarık', 'Lahmacun', 'Kuru fasulye'],
    correct: 0,
    fact: 'Beyza\'nın annesinin mantısı. Üç tabak az.'
  },
  {
    q: 'İlk tatile beraber nereye gittiler?',
    options: ['Bozcaada', 'Datça', 'Kapadokya', 'Eskişehir'],
    correct: 3,
    fact: 'Eskişehir. Plansız bir hafta sonuydu, sonra her sene tekrar ettiler.'
  },
  {
    q: 'Beyza\'nın gizli yeteneği?',
    options: ['Bağlama çalıyor', '7 dilde merhaba diyor', 'Hızlı okuma', 'Kuş sesleri taklit'],
    correct: 1,
    fact: '7 dilde merhaba diyebilir — biri "Wolof", arkadaşı Senegalliydi.'
  },
  {
    q: 'İlk birlikte aldıkları şey?',
    options: ['Ev anahtarı', 'Bir bitki', 'Birgün arabası', 'Aynı tişört (yanlışlıkla)'],
    correct: 1,
    fact: 'Bir devetabanı. Hâlâ hayatta — büyük ihtimalle nikahta yanlarında olacak.'
  },
  {
    q: 'Düğünde "first dance" şarkısı kim seçti?',
    options: ['Beyza', 'Emin', 'DJ Malik', 'Anneanne'],
    correct: 2,
    fact: 'DJ Malik. "Bunu çalıyoruz, tartışma yok" dedi. Çalıyoruz.'
  },
];

function Quiz({ onBack }) {
  const [stage, setStage] = useStateQz('intro'); // intro | playing | done
  const [idx, setIdx] = useStateQz(0);
  const [answers, setAnswers] = useStateQz([]); // selected idx per question
  const [revealed, setRevealed] = useStateQz(false);

  const start = () => { setStage('playing'); setIdx(0); setAnswers([]); setRevealed(false); };
  const pick = (i) => {
    if (revealed) return;
    setAnswers([...answers, i]);
    setRevealed(true);
  };
  const next = () => {
    if (idx === QUESTIONS.length - 1) { setStage('done'); return; }
    setIdx(idx + 1); setRevealed(false);
  };

  const score = answers.filter((a, i) => a === QUESTIONS[i].correct).length;

  /* Intro */
  if (stage === 'intro') {
    return (
      <ScreenShell onBack={onBack} kicker="07 · QUIZ" title="bizi tanıyor musun">
        <p className="body-sm" style={{opacity:0.85, marginBottom:22}}>
          {QUESTIONS.length} soru. Düşünmeden cevapla, her şey eğlence için.
          Bitirenler arasında üç kişi DJ Malik tarafından sahneye davet edilebilir.
        </p>

        <div style={qzStyles.heroIntro}>
          <Icons.Sparkle size={28}/>
          <div className="hand" style={{fontSize:42, lineHeight:0.95, margin:'8px 0 0'}}>
            başla<br/>bakalım
          </div>
        </div>

        <button onClick={start} style={qzStyles.cta}>
          <span className="label">Quiz'i Başlat</span>
          <Icons.Arrow size={18}/>
        </button>

        <div className="label-sm" style={{opacity:0.6, marginTop:18, textAlign:'center'}}>
          ETHICAL DISCLAIMER · CEVAPLAR ŞAKADIR
        </div>
      </ScreenShell>
    );
  }

  /* Done */
  if (stage === 'done') {
    const verdict = score >= 5 ? { title:'sen aileden', msg:'Neredeyse hepsini bildin. Bizi bizden iyi biliyorsun.' }
                  : score >= 3 ? { title:'fena değilsin', msg:'Daha çok beraber vakit geçirmemiz lazım belli.' }
                  : { title:'hımm', msg:'Eyvallah geldiğin için. Tanışmak için bütün geceyi ayırıyoruz.' };
    return (
      <ScreenShell onBack={onBack} kicker="07 · QUIZ · SONUÇ" title={verdict.title}>
        <div style={qzStyles.scoreCard}>
          <div className="label" style={{color:'var(--burgundy)', opacity:0.7}}>SKORUN</div>
          <div className="hand" style={{fontSize:90, lineHeight:0.95, color:'var(--burgundy)', margin:'4px 0 4px'}}>
            {score}<span style={{fontSize:42, opacity:0.6}}>/{QUESTIONS.length}</span>
          </div>
          <div className="body-sm" style={{color:'var(--burgundy)', opacity:0.85}}>{verdict.msg}</div>
        </div>

        <div className="label" style={{opacity:0.7, margin:'24px 0 12px'}}>CEVAP ANAHTARI</div>
        {QUESTIONS.map((q, i) => (
          <div key={i} style={qzStyles.reviewRow}>
            <div style={{
              ...qzStyles.reviewBadge,
              background: answers[i] === q.correct ? 'var(--pink)' : 'transparent',
              borderColor: answers[i] === q.correct ? 'var(--pink)' : 'rgba(255,185,201,0.4)',
              color: answers[i] === q.correct ? 'var(--burgundy)' : 'var(--pink)',
            }}>
              {answers[i] === q.correct ? <Icons.Check size={14}/> : <Icons.Close size={12}/>}
            </div>
            <div style={{flex:1, minWidth:0}}>
              <div className="body-sm" style={{fontSize:12, opacity:0.85, marginBottom:2}}>{q.q}</div>
              <div className="label-sm" style={{opacity:0.7}}>{q.options[q.correct]}</div>
            </div>
          </div>
        ))}

        <button onClick={start} style={{...qzStyles.cta, marginTop:24}}>
          <span className="label">Tekrar Dene</span>
          <Icons.Sparkle size={16}/>
        </button>
      </ScreenShell>
    );
  }

  /* Playing */
  const q = QUESTIONS[idx];
  const picked = answers[idx];
  return (
    <ScreenShell onBack={onBack} kicker={`SORU ${(idx+1).toString().padStart(2,'0')} / ${QUESTIONS.length.toString().padStart(2,'0')}`} title="">
      {/* Progress dots */}
      <div style={qzStyles.dots}>
        {QUESTIONS.map((_, i) => (
          <div key={i} style={{
            flex:1, height:3, borderRadius:2,
            background: i < idx ? 'var(--pink)' : i === idx ? 'var(--pink)' : 'rgba(255,185,201,0.2)',
          }}/>
        ))}
      </div>

      <div className="hand" style={{fontSize:34, lineHeight:1.05, margin:'18px 0 22px'}}>
        {q.q}
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {q.options.map((opt, i) => {
          const isPicked = picked === i;
          const isCorrect = i === q.correct;
          let bg = 'transparent', bd = 'rgba(255,185,201,0.3)', col = 'var(--pink)';
          if (revealed) {
            if (isCorrect) { bg = 'var(--pink)'; bd = 'var(--pink)'; col = 'var(--burgundy)'; }
            else if (isPicked) { bg = 'rgba(255,185,201,0.1)'; bd = 'rgba(255,185,201,0.55)'; }
            else { col = 'rgba(255,185,201,0.55)'; }
          }
          return (
            <button key={i} onClick={() => pick(i)} disabled={revealed}
              style={{
                ...qzStyles.opt,
                background: bg,
                borderColor: bd,
                color: col,
              }}>
              <div style={{
                ...qzStyles.optLetter,
                background: revealed && isCorrect ? 'var(--burgundy)' : 'transparent',
                color: revealed && isCorrect ? 'var(--pink)' : col,
                borderColor: revealed && isCorrect ? 'var(--burgundy)' : col,
              }}>
                <span className="label-sm" style={{letterSpacing:0}}>{['A','B','C','D'][i]}</span>
              </div>
              <div style={{flex:1, textAlign:'left'}}>{opt}</div>
              {revealed && isCorrect && <Icons.Check size={16}/>}
              {revealed && isPicked && !isCorrect && <Icons.Close size={14}/>}
            </button>
          );
        })}
      </div>

      {revealed && (
        <div style={qzStyles.factBox}>
          <div className="label" style={{opacity:0.75, marginBottom:4}}>GERÇEK CEVAP</div>
          <div className="body-sm" style={{opacity:0.92}}>{q.fact}</div>
        </div>
      )}

      {revealed && (
        <button onClick={next} style={{...qzStyles.cta, marginTop:18}}>
          <span className="label">{idx === QUESTIONS.length-1 ? 'Sonucu Gör' : 'Sıradaki'}</span>
          <Icons.Arrow size={18}/>
        </button>
      )}
    </ScreenShell>
  );
}

const qzStyles = {
  heroIntro:{
    padding:'24px 22px',
    borderRadius:22,
    border:'1.5px dashed rgba(255,185,201,0.4)',
    marginBottom:22,
  },
  cta:{
    display:'flex',alignItems:'center',justifyContent:'center',gap:10,
    width:'100%', padding:'15px 16px',
    borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
  },
  dots:{
    display:'flex',gap:4,marginTop:6,marginBottom:8,
  },
  opt:{
    display:'flex',alignItems:'center',gap:12,
    padding:'14px 16px',
    border:'1.5px solid',
    borderRadius:16,
    fontFamily:"'Manrope',sans-serif",
    fontSize:14,
    transition:'all 0.2s',
    textAlign:'left',
  },
  optLetter:{
    width:28,height:28,borderRadius:999,
    border:'1.5px solid',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0,
  },
  factBox:{
    marginTop:18,
    padding:'14px 16px',
    borderRadius:14,
    background:'rgba(255,185,201,0.08)',
    border:'1px dashed rgba(255,185,201,0.35)',
  },
  scoreCard:{
    background:'var(--pink)', color:'var(--burgundy)',
    borderRadius:22, padding:'22px 22px 26px',
    textAlign:'center',
  },
  reviewRow:{
    display:'flex',alignItems:'flex-start',gap:12,
    padding:'12px 0',
    borderTop:'1px solid rgba(255,185,201,0.12)',
  },
  reviewBadge:{
    width:26,height:26,borderRadius:999,
    border:'1.5px solid',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0, marginTop:2,
  },
};

window.Quiz = Quiz;