/* ─────────────────────────────────────────────
   PLACEMENT TEST — adaptive, in groups of 5
   Six bands (A1→C2). Pass a band (4/5) → move up.
   Fail → the test stops and reports your level.
   Exposes: window.PlacementTest, window.PLACEMENT_BANDS,
            window.LEVEL_COLORS, window.LEVEL_NAMES
   ───────────────────────────────────────────── */

const LEVEL_COLORS = { A1:'#1a7a5e', A2:'#2E8B57', B1:'#2E6DB4', B2:'#C8922A', C1:'#b06520', C2:'#7a2a1f' };
const LEVEL_NAMES = {
  A1:{ en:'Beginner', ar:'مبتدئ', tr:'Başlangıç' },
  A2:{ en:'Elementary', ar:'تأسيسي', tr:'Temel' },
  B1:{ en:'Intermediate', ar:'متوسط', tr:'Orta' },
  B2:{ en:'Upper-Intermediate', ar:'فوق المتوسط', tr:'Orta-Üstü' },
  C1:{ en:'Advanced', ar:'متقدم', tr:'İleri' },
  C2:{ en:'Proficient', ar:'إتقان', tr:'Yetkin' },
};

/* skill: vocab | grammar | reading — every band mixes all three */
const PLACEMENT_BANDS = [
  { id:'A1', questions:[
    { skill:'grammar', q:'I ___ an engineer.', options:['is','am','are','be'], a:1 },
    { skill:'vocab', q:'The opposite of “big” is ___.', options:['tall','old','small','fast'], a:2 },
    { skill:'grammar', q:'___ name is Ahmed.', options:['My','Me','I','Mine'], a:0 },
    { skill:'vocab', q:'You use a ___ to write.', options:['cup','pen','door','chair'], a:1 },
    { skill:'reading', passage:'Sara is a student. She studies computer engineering. She has classes every morning.',
      q:'When does Sara have classes?', options:['At night','On weekends','In the evening','In the morning'], a:3 },
  ]},
  { id:'A2', questions:[
    { skill:'grammar', q:'She ___ to work by bus every day.', options:['go','going','goes','went'], a:2 },
    { skill:'vocab', q:'A “deadline” is ___.', options:['a type of meeting','the last day to finish something','a work tool','a long holiday'], a:1 },
    { skill:'grammar', q:'There isn\u2019t ___ milk in the fridge.', options:['some','a','many','any'], a:3 },
    { skill:'vocab', q:'A “colleague” is a person who ___.', options:['works with you','sells food','drives the bus','lives next door'], a:0 },
    { skill:'reading', passage:'Omar works in a factory. Yesterday the main machine stopped, so the team finished work late. Today a technician is coming to repair it.',
      q:'Why did the team finish late?', options:['Omar was sick','The factory closed early','A machine stopped working','The technician was late'], a:2 },
  ]},
  { id:'B1', questions:[
    { skill:'grammar', q:'I have worked here ___ 2022.', options:['for','since','from','at'], a:1 },
    { skill:'vocab', q:'If a plan is “flexible”, it ___.', options:['is very expensive','is already finished','cannot change','can change easily'], a:3 },
    { skill:'grammar', q:'If it rains tomorrow, we ___ the test inside.', options:['will do','would do','did','are doing'], a:0 },
    { skill:'vocab', q:'To “postpone” a meeting means to ___.', options:['cancel it forever','move it to a later time','start it early','forget about it'], a:1 },
    { skill:'reading', passage:'The company introduced a new system to track projects. At first, many employees found it confusing, but after a short training most agreed it saved them time.',
      q:'How did employees feel at first?', options:['Excited','Bored','Confused','Angry'], a:2 },
  ]},
  { id:'B2', questions:[
    { skill:'grammar', q:'By the time the client arrived, we ___ the demo.', options:['already prepare','have already prepared','had already prepared','are already preparing'], a:2 },
    { skill:'vocab', q:'A “bottleneck” in a process is ___.', options:['a point that slows everything down','the fastest step','the final result','an extra budget'], a:0 },
    { skill:'grammar', q:'The report ___ by the quality team before it was published.', options:['reviewed','has reviewed','is reviewing','was reviewed'], a:3 },
    { skill:'vocab', q:'“Feasible” is closest in meaning to ___.', options:['expensive','achievable','impossible','optional'], a:1 },
    { skill:'reading', passage:'Although the prototype passed most tests, engineers remained cautious. The results, while promising, came from a controlled lab environment — and field conditions are rarely so forgiving.',
      q:'Why are the engineers cautious?', options:['The prototype failed most tests','The lab made mistakes','Real conditions may differ from the lab','The project lost its funding'], a:2 },
  ]},
  { id:'C1', questions:[
    { skill:'vocab', q:'An “inherent” risk is one that ___.', options:['was added by mistake','is a natural part of the situation','can be fully removed','comes only from outside'], a:1 },
    { skill:'grammar', q:'___ the budget cuts, the team delivered the project on schedule.', options:['Despite','Although','Because','Unless'], a:0 },
    { skill:'vocab', q:'To “corroborate” findings means to ___.', options:['publish them quickly','question their value','summarize them briefly','confirm them with more evidence'], a:3 },
    { skill:'grammar', q:'Not until the final tests were completed ___ the results.', options:['the team announced','did the team announce','the team did announce','announced the team'], a:1 },
    { skill:'reading', passage:'The committee\u2019s report stops short of assigning blame, noting instead that the failure emerged from an accumulation of minor, individually reasonable decisions — none of which, on its own, would have raised concern.',
      q:'What does the report say caused the failure?', options:['One person\u2019s clear mistake','Deliberate misconduct','Many small decisions adding up','A single unreasonable decision'], a:2 },
  ]},
  { id:'C2', questions:[
    { skill:'vocab', q:'A “paradigm shift” refers to ___.', options:['a minor technical update','a fundamental change in approach','a return to older methods','a temporary trend'], a:1 },
    { skill:'grammar', q:'Had the sensors been calibrated correctly, the anomaly ___ much earlier.', options:['was detected','would be detected','had been detected','would have been detected'], a:3 },
    { skill:'vocab', q:'“Ubiquitous” most nearly means ___.', options:['present everywhere','extremely rare','poorly understood','recently invented'], a:0 },
    { skill:'vocab', q:'If evidence is “circumstantial”, it ___.', options:['proves guilt definitively','suggests but does not prove directly','was collected at the scene','has been fabricated'], a:1 },
    { skill:'reading', passage:'That the model performs well on historical data is, by itself, unremarkable; the more telling question — and the one the authors conspicuously decline to address — is whether its assumptions survive contact with genuinely novel conditions.',
      q:'What is the author\u2019s criticism?', options:['The model performs poorly on historical data','The assumptions are clearly stated but wrong','The authors address too many questions at once','The authors avoid discussing how the model handles new conditions'], a:3 },
  ]},
];

const PT_PASS = 4; // correct answers (of 5) needed to move up a band
const PT_SKILLS = [
  { id:'vocab', emoji:'📖', en:'Vocabulary', ar:'المفردات', tr:'Kelime' },
  { id:'grammar', emoji:'🧩', en:'Grammar', ar:'القواعد', tr:'Dil bilgisi' },
  { id:'reading', emoji:'📕', en:'Reading', ar:'القراءة', tr:'Okuma' },
];

function PlacementTest({ t, lang, onFinish, onClose }) {
  const [phase, setPhase] = React.useState('intro'); // intro | quiz | between | result
  const [bandIdx, setBandIdx] = React.useState(0);
  const [qIdx, setQIdx] = React.useState(0);
  const [curCorrect, setCurCorrect] = React.useState(0);
  const [scores, setScores] = React.useState([]);          // [{id, correct, total}]
  const [skills, setSkills] = React.useState({ vocab:[0,0], grammar:[0,0], reading:[0,0] });
  const [picked, setPicked] = React.useState(null);
  const [result, setResult] = React.useState(null);

  const band = PLACEMENT_BANDS[bandIdx];
  const q = band.questions[qIdx];
  const totalQ = PLACEMENT_BANDS.length * 5;
  const answeredSoFar = bandIdx * 5 + qIdx;

  const computeResult = (allScores, allSkills) => {
    let level = 'A1', passedAny = false;
    allScores.forEach(b => { if (b.correct >= PT_PASS) { level = b.id; passedAny = true; } });
    return {
      level,
      starter: !passedAny,
      at: Date.now(),
      bands: allScores,
      skills: allSkills,
    };
  };

  const finish = (allScores, allSkills) => {
    const res = computeResult(allScores, allSkills);
    setResult(res);
    setPhase('result');
    if (onFinish) onFinish(res);
  };

  const answer = (i) => {
    if (picked !== null) return;
    setPicked(i);
    const ok = i === q.a;
    const nextSkills = { ...skills, [q.skill]: [skills[q.skill][0] + (ok ? 1 : 0), skills[q.skill][1] + 1] };
    setSkills(nextSkills);
    const nextCorrect = curCorrect + (ok ? 1 : 0);

    setTimeout(() => {
      setPicked(null);
      if (qIdx < band.questions.length - 1) {
        setCurCorrect(nextCorrect);
        setQIdx(qIdx + 1);
      } else {
        const bandScore = { id: band.id, correct: nextCorrect, total: band.questions.length };
        const nextScores = [...scores, bandScore];
        setScores(nextScores);
        const passed = nextCorrect >= PT_PASS;
        if (passed && bandIdx < PLACEMENT_BANDS.length - 1) {
          setPhase('between');
        } else {
          finish(nextScores, nextSkills);
        }
      }
    }, 420);
  };

  const nextBandGo = () => {
    setBandIdx(bandIdx + 1);
    setQIdx(0);
    setCurCorrect(0);
    setPhase('quiz');
  };

  const restart = () => {
    setBandIdx(0); setQIdx(0); setCurCorrect(0);
    setScores([]); setSkills({ vocab:[0,0], grammar:[0,0], reading:[0,0] });
    setPicked(null); setResult(null); setPhase('quiz');
  };

  /* ── INTRO ── */
  if (phase === 'intro') return (
    <div className="practice-wrap" style={{alignItems:'center',justifyContent:'center',textAlign:'center'}}>
      <div style={{maxWidth:560,margin:'0 auto',display:'flex',flexDirection:'column',gap:16}}>
        <img src="assets/images/mascot-nour-teaching.png" alt="Nour explains the test"
             style={{height:150, width:'auto', borderRadius:14, margin:'0 auto', boxShadow:'0 12px 30px rgba(13,31,60,.18)'}} />
        <div style={{fontFamily:'var(--font-d)',fontSize:30,fontWeight:700,color:'var(--navy)',lineHeight:1.2}}>
          {t('Find your English level','اكتشف مستواك في الإنجليزية','İngilizce seviyeni keşfet')}
        </div>
        <div style={{fontSize:14.5,color:'var(--text-mid)',lineHeight:1.7,fontWeight:300}}>
          {t('A short adaptive test of vocabulary, grammar and reading. It comes in parts of 5 questions — answer 4 correctly and you move up to harder questions. When a part is too hard, the test stops and tells you your level.',
             'اختبار قصير متكيّف يقيس المفردات والقواعد والقراءة. يأتي على أجزاء من 5 أسئلة — أجب على 4 بشكل صحيح لتنتقل إلى أسئلة أصعب. عندما يصبح الجزء صعباً، يتوقف الاختبار ويخبرك بمستواك.',
             'Kelime, dil bilgisi ve okumayı ölçen kısa, uyarlanabilir bir test. 5 soruluk bölümler halinde gelir — 4 doğru yaparsan daha zor sorulara geçersin. Bölüm zorlaştığında test durur ve seviyeni söyler.')}
        </div>
        <div style={{display:'flex',gap:8,justifyContent:'center',flexWrap:'wrap'}}>
          <span className="spk-chip" style={{cursor:'default'}}>🧩 {t('Up to 6 parts','حتى 6 أجزاء','En fazla 6 bölüm')}</span>
          <span className="spk-chip" style={{cursor:'default'}}>⏱ {t('10–15 minutes','10–15 دقيقة','10–15 dakika')}</span>
          <span className="spk-chip" style={{cursor:'default'}}>🎯 {t('Stops automatically','يتوقف تلقائياً','Otomatik durur')}</span>
        </div>
        <div style={{fontSize:12.5,color:'var(--text-lt)'}}>
          {t('Tip: don\u2019t guess wildly — an honest result gives you a better learning plan.',
             'نصيحة: لا تخمّن عشوائياً — النتيجة الصادقة تمنحك خطة تعلّم أفضل.',
             'İpucu: rastgele tahmin etme — dürüst bir sonuç sana daha iyi bir plan verir.')}
        </div>
        <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap',marginTop:6}}>
          <button className="spk-start" style={{margin:0}} onClick={()=>setPhase('quiz')}>▶ {t('Start the test','ابدأ الاختبار','Testi başlat')}</button>
          <button className="quiz-btn ghost" onClick={onClose}>{t('Not now','ليس الآن','Şimdi değil')}</button>
        </div>
      </div>
    </div>
  );

  /* ── BETWEEN BANDS ── */
  if (phase === 'between') {
    const nextBand = PLACEMENT_BANDS[bandIdx + 1];
    return (
      <div className="practice-wrap" style={{alignItems:'center',justifyContent:'center',textAlign:'center'}}>
        <div style={{maxWidth:480,margin:'0 auto',display:'flex',flexDirection:'column',gap:14}}>
          <div style={{fontSize:52}}>⬆️</div>
          <div style={{fontFamily:'var(--font-d)',fontSize:28,fontWeight:700,color:'var(--navy)'}}>
            {t('Part passed!','اجتزت هذا الجزء!','Bölümü geçtin!')}
          </div>
          <div style={{fontSize:15,color:'var(--text-mid)',lineHeight:1.6}}>
            {t('You answered','أجبت على','Cevapladın:')} <strong style={{color:'var(--teal)'}}>{scores[scores.length-1].correct} / 5</strong> {t('at level','في مستوى','seviyesinde —')} <strong>{band.id}</strong>.{' '}
            {t('Moving up to','ننتقل الآن إلى','Sıradaki seviye:')} <strong style={{color:LEVEL_COLORS[nextBand.id]}}>{nextBand.id} · {lang==='ar'?LEVEL_NAMES[nextBand.id].ar:lang==='tr'?LEVEL_NAMES[nextBand.id].tr:LEVEL_NAMES[nextBand.id].en}</strong>.
          </div>
          <div><button className="spk-start" style={{margin:0}} onClick={nextBandGo}>{t('Continue','متابعة','Devam et')} →</button></div>
        </div>
      </div>
    );
  }

  /* ── RESULT ── */
  if (phase === 'result' && result) {
    const lvlName = lang==='ar' ? LEVEL_NAMES[result.level].ar : lang==='tr' ? LEVEL_NAMES[result.level].tr : LEVEL_NAMES[result.level].en;
    return (
      <div className="practice-wrap" style={{textAlign:'center'}}>
        <div style={{maxWidth:560,margin:'auto',width:'100%'}}>
          <img src="assets/images/mascot-nour-celebrating.png" alt="Nour celebrates your result"
               style={{height:140, width:'auto', borderRadius:14, margin:'0 auto 18px', display:'block', boxShadow:'0 12px 30px rgba(13,31,60,.18)'}} />
          <div style={{fontSize:12,fontWeight:700,letterSpacing:2,textTransform:'uppercase',color:'var(--gold)',marginBottom:18}}>
            {t('Your result','نتيجتك','Sonucun')}
          </div>
          <div className="pt-lvlcircle" style={{background:LEVEL_COLORS[result.level]}}>{result.level}</div>
          <div style={{fontFamily:'var(--font-d)',fontSize:30,fontWeight:700,color:'var(--navy)',marginBottom:8}}>{lvlName}</div>
          <div style={{fontSize:14.5,color:'var(--text-mid)',lineHeight:1.65,marginBottom:26,fontWeight:300}}>
            {result.starter
              ? t('You\u2019re at the very beginning — perfect. Start with the A1 lessons and word cards, and your plan will build from there.',
                  'أنت في البداية تماماً — ممتاز. ابدأ بدروس A1 وبطاقات الكلمات، وستُبنى خطتك من هناك.',
                  'Tam başlangıçtasın — harika. A1 dersleri ve kelime kartlarıyla başla; planın buradan gelişecek.')
              : t('Focus your lessons, reading and vocabulary around this level — and stretch one level up when it feels easy.',
                  'ركّز دروسك وقراءتك ومفرداتك حول هذا المستوى — وارتقِ مستوى واحداً عندما تشعر بالسهولة.',
                  'Derslerini, okumanı ve kelimeleri bu seviyeye odakla — kolay gelince bir seviye yukarı çık.')}
          </div>

          <div className="pt-skill-lbl">{t('Skill breakdown','تفصيل المهارات','Beceri dökümü')}</div>
          <div className="hm-skills" style={{marginBottom:26,textAlign:'start'}}>
            {PT_SKILLS.map(s => {
              const [c, tot] = result.skills[s.id];
              const pct = tot ? Math.round((c / tot) * 100) : 0;
              return (
                <div key={s.id} className="hm-skill">
                  <span>{s.emoji} {t(s.en, s.ar, s.tr)}</span>
                  <span className="bar"><i style={{width:pct+'%'}}></i></span>
                  <span style={{textAlign:'end'}}>{c}/{tot}</span>
                </div>
              );
            })}
          </div>

          <div className="pt-skill-lbl">{t('Your path through the test','مسارك في الاختبار','Testteki yolun')}</div>
          <div className="pt-bands" style={{justifyContent:'center',marginBottom:28}}>
            {result.bands.map(b => (
              <span key={b.id} className={'pt-band ' + (b.correct >= PT_PASS ? 'done' : '')}>
                {b.correct >= PT_PASS ? '✓' : '•'} {b.id} — {b.correct}/5
              </span>
            ))}
          </div>

          <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
            <button className="spk-start" style={{margin:0}} onClick={onClose}>🗓 {t('Set up my plan','جهّز خطتي','Planımı kur')} →</button>
            <button className="quiz-btn ghost" onClick={restart}>↻ {t('Retake the test','أعد الاختبار','Testi tekrarla')}</button>
          </div>
        </div>
      </div>
    );
  }

  /* ── QUIZ ── */
  const skillObj = PT_SKILLS.find(s => s.id === q.skill);
  return (
    <div className="practice-wrap">
      <div className="practice-head" style={{marginBottom:18}}>
        <div className="practice-titlewrap">
          <div className="ptype">📐 {t('Level test','اختبار المستوى','Seviye testi')} · {skillObj.emoji} {t(skillObj.en, skillObj.ar, skillObj.tr)}</div>
          <div className="ptitle">{t('Part','الجزء','Bölüm')} {bandIdx + 1} — {band.id} · {t('Question','سؤال','Soru')} {qIdx + 1}/5</div>
        </div>
        <button className="act-btn" onClick={onClose}>✕ {t('Quit','خروج','Çık')}</button>
      </div>

      <div className="pt-bands">
        {PLACEMENT_BANDS.map((b, i) => (
          <span key={b.id} className={'pt-band ' + (i < bandIdx ? 'done' : i === bandIdx ? 'cur' : '')}>
            {i < bandIdx ? '✓ ' : ''}{b.id}
          </span>
        ))}
      </div>
      <div className="pt-progress"><i style={{width: (answeredSoFar / totalQ * 100) + '%'}}></i></div>

      {q.passage && <div className="pt-passage">{q.passage}</div>}
      <div className="quiz-word" style={{fontSize:'clamp(22px,3vw,32px)',fontStyle:q.passage?'normal':'inherit',marginBottom:24}}>{q.q}</div>

      <div className="quiz-options" style={{maxWidth:680}}>
        {q.options.map((opt, i) => (
          <button key={i}
                  className={'quiz-opt' + (picked === i ? ' flash' : '')}
                  disabled={picked !== null}
                  onClick={() => answer(i)}>{opt}</button>
        ))}
      </div>
      <div style={{fontSize:12,color:'var(--text-lt)',marginTop:'auto',paddingTop:16}}>
        {t('Answers are not shown during the test — keep going!','لا تظهر الإجابات أثناء الاختبار — واصل!','Test sırasında cevaplar gösterilmez — devam et!')}
      </div>
    </div>
  );
}

Object.assign(window, { PlacementTest, PLACEMENT_BANDS, LEVEL_COLORS, LEVEL_NAMES });