/* global React, Page, LessonFooter */
const { useState: _u6 } = React;

const QUESTIONS = [
  {
    q: 'Γιατί χρειαζόμαστε διαμόρφωση για ραδιοφωνική εκπομπή;',
    options: [
      'Για να αυξήσουμε την ισχύ του μικροφώνου',
      'Για να εκπεμφθεί ο ήχος μέσω μικρής κεραίας σε υψηλή συχνότητα',
      'Για να μειώσουμε τη συχνότητα του φέροντος',
      'Για να μετατρέψουμε τον ήχο σε ψηφιακό',
    ],
    correct: 1,
    topic: 'Γιατί διαμόρφωση',
  },
  {
    q: 'Στη διαμόρφωση AM, τι μεταβάλλεται στο φέρον σήμα;',
    options: ['Η συχνότητα', 'Η φάση', 'Το πλάτος', 'Τίποτα — μένει ίδιο'],
    correct: 2,
    topic: 'Διαμόρφωση AM',
  },
  {
    q: 'Πόσες φασματικές ακτίνες έχει ένα AM σήμα;',
    options: ['Μία', 'Δύο', 'Τρεις', 'Τέσσερις'],
    correct: 2,
    topic: 'Φάσμα AM',
  },
  {
    q: 'Αν fmax = 5 kHz, ποιο είναι το εύρος ζώνης BW του AM σήματος;',
    options: ['5 kHz', '10 kHz', '15 kHz', '2.5 kHz'],
    correct: 1,
    topic: 'Φάσμα / BW',
  },
  {
    q: 'Τι σημαίνει βαθμός διαμόρφωσης m > 1;',
    options: [
      'Άριστη ποιότητα ήχου',
      'Καμία αλλαγή στο σήμα',
      'Υπερδιαμόρφωση — παραμόρφωση και παρεμβολές',
      'Πιο μικρή κεραία',
    ],
    correct: 2,
    topic: 'Βαθμός m',
  },
  {
    q: 'Ποιο είναι ο ρόλος του ταλαντωτή στον πομπό AM;',
    options: [
      'Παράγει το φέρον σήμα',
      'Ενισχύει τον ήχο',
      'Αποδιαμορφώνει το σήμα',
      'Ακτινοβολεί το σήμα στο χώρο',
    ],
    correct: 0,
    topic: 'Πομπός AM',
  },
  {
    q: 'Στον δέκτη AM, τι κάνει η αποδιαμόρφωση;',
    options: [
      'Ενισχύει το RF σήμα',
      'Επιλέγει τον σωστό σταθμό',
      'Αφαιρεί το φέρον και κρατά μόνο τον ήχο',
      'Μετατρέπει τον ήχο σε ηλεκτρικό σήμα',
    ],
    correct: 2,
    topic: 'Δέκτης AM',
  },
  {
    q: 'Η σταθερή ενδιάμεση συχνότητα του υπερετερόδυνου είναι:',
    options: ['100 kHz', '455 kHz', '1 MHz', '10.7 MHz'],
    correct: 1,
    topic: 'Υπερετερόδυνος',
  },
  {
    q: 'Για σταθμό fc = 800 kHz, πού συντονίζεται ο τοπικός ταλαντωτής (fIF=455);',
    options: ['345 kHz', '455 kHz', '1255 kHz', '1710 kHz'],
    correct: 2,
    topic: 'Υπερετερόδυνος',
  },
  {
    q: 'Σε σχέση με το AM, το FM:',
    options: [
      'Έχει μικρότερο εύρος ζώνης και χειρότερη ποιότητα',
      'Αλλάζει συχνότητα, έχει μεγαλύτερο BW και καλύτερη ποιότητα',
      'Αλλάζει πλάτος αντί συχνότητας',
      'Δεν χρειάζεται φέρον',
    ],
    correct: 1,
    topic: 'AM vs FM',
  },
];

// ============================================================
// 12. QUIZ
// ============================================================
const QuizScreen = ({ onFinish, onMenu }) => {
  const [idx, setIdx] = _u6(0);
  const [answers, setAnswers] = _u6([]);  // index of selected per question
  const [revealed, setRevealed] = _u6(false);

  const q = QUESTIONS[idx];
  const selected = answers[idx];
  const isLast = idx === QUESTIONS.length - 1;

  const select = (i) => {
    if (revealed) return;
    const a = [...answers]; a[idx] = i; setAnswers(a);
    setRevealed(true);
  };
  const next = () => {
    setRevealed(false);
    if (isLast) {
      const score = answers.reduce((s, a, i) => s + (a === QUESTIONS[i].correct ? 1 : 0), 0);
      const wrong = QUESTIONS.filter((qq, i) => answers[i] !== qq.correct).map(qq => qq.topic);
      onFinish({ score, total: QUESTIONS.length, wrong, answers });
    } else {
      setIdx(idx + 1);
    }
  };

  return (
    <Page eyebrow={`ΕΡΩΤΗΣΗ ${idx+1} / ${QUESTIONS.length}`} title="Quiz: AM &amp; FM"
      sub={null}>
      <div className="pbar" style={{marginBottom:32}}>
        <div className="pbar-fill" style={{width:`${((idx)/QUESTIONS.length)*100}%`}}></div>
      </div>

      <div className="card card-elev fade-in" key={idx} style={{padding:32}}>
        <div className="row between" style={{marginBottom:24}}>
          <span className="card-tag tag-pink">{q.topic}</span>
          <span className="mono" style={{fontSize:11, color:'var(--text-muted)'}}>+1 βαθμός</span>
        </div>
        <h2 style={{fontSize:24, fontWeight:600, lineHeight:1.35, marginBottom:28, letterSpacing:'-0.01em'}}>{q.q}</h2>

        <div className="col" style={{gap:10}}>
          {q.options.map((o, i) => {
            const letter = String.fromCharCode(65 + i);
            const isCorrect = revealed && i === q.correct;
            const isWrong = revealed && i === selected && i !== q.correct;
            const klass = isCorrect ? 'correct' : isWrong ? 'wrong' : (selected === i ? 'selected' : '');
            return (
              <button key={i} className={`quiz-option ${klass}`} disabled={revealed} onClick={()=>select(i)}>
                <span className="letter">{letter}</span>
                <span style={{flex:1}}>{o}</span>
                {isCorrect && <span style={{color:'var(--lime)', fontSize:18}}>✓</span>}
                {isWrong && <span style={{color:'var(--red)', fontSize:18}}>✕</span>}
              </button>
            );
          })}
        </div>

        {revealed && (
          <div className="fade-in" style={{
            marginTop: 22, padding: 16, borderRadius: 10,
            background: selected === q.correct ? 'rgba(163,230,53,0.08)' : 'rgba(251,113,133,0.06)',
            border: `1px solid ${selected === q.correct ? 'var(--lime)' : 'var(--red)'}`,
            display:'flex', alignItems:'center', justifyContent:'space-between', gap:16
          }}>
            <div style={{fontSize:14, color: selected === q.correct ? 'var(--lime)' : 'var(--red)'}}>
              {selected === q.correct
                ? '✓ Σωστά! Πάμε στην επόμενη.'
                : `✕ Λάθος. Η σωστή απάντηση ήταν: ${String.fromCharCode(65 + q.correct)}.`}
            </div>
            <button className="btn btn-primary" onClick={next}>{isLast ? 'Δες τα αποτελέσματα' : 'Επόμενη →'}</button>
          </div>
        )}
      </div>

      <div className="row between" style={{marginTop:24}}>
        <button className="btn btn-ghost" onClick={onMenu}>← Έξοδος από το Quiz</button>
        <span className="mono" style={{fontSize:12, color:'var(--text-muted)'}}>
          {answers.filter((a, i) => a === QUESTIONS[i]?.correct).length} σωστές μέχρι τώρα
        </span>
      </div>
    </Page>
  );
};

// ============================================================
// 13. RESULTS
// ============================================================
const ResultsScreen = ({ result, onRetry, onMenu }) => {
  const pct = Math.round((result.score / result.total) * 100);
  const grade = pct >= 90 ? { l:'Άριστα', c:'var(--lime)', icon:'🏆' }
              : pct >= 70 ? { l:'Πολύ καλά', c:'var(--cyan)', icon:'⭐' }
              : pct >= 50 ? { l:'Καλά — προσπάθησε πάλι', c:'var(--amber)', icon:'📚' }
              : { l:'Χρειάζεται περισσότερη μελέτη', c:'var(--red)', icon:'📖' };

  // unique weak topics
  const weakTopics = [...new Set(result.wrong)];

  return (
    <Page eyebrow="ΟΛΟΚΛΗΡΩΘΗΚΕ" title="Αποτελέσματα Quiz" sub={null}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:24}}>
        <div className="card card-elev" style={{padding:32, textAlign:'center'}}>
          <div style={{fontSize:54, marginBottom:12}}>{grade.icon}</div>
          <div className="kpi-label" style={{margin:'0 0 8px'}}>ΒΑΘΜΟΛΟΓΙΑ</div>
          <div style={{fontSize:64, fontWeight:800, color:grade.c, fontFamily:'var(--font-mono)', letterSpacing:'-0.04em', lineHeight:1}}>
            {result.score}<span style={{color:'var(--text-faint)', fontSize:32}}>/{result.total}</span>
          </div>
          <div className="mono" style={{fontSize:14, color:grade.c, marginTop:12}}>{pct}%</div>
          <div style={{marginTop:16, fontSize:18, fontWeight:600, color:grade.c}}>{grade.l}</div>

          <div className="pbar" style={{marginTop:24}}>
            <div className="pbar-fill" style={{width:`${pct}%`, background:grade.c, boxShadow:`0 0 10px ${grade.c}`}}></div>
          </div>
        </div>

        <div className="col">
          <div className="card">
            <div className="card-title" style={{marginBottom:16}}>📊 Σύνοψη</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
              <div style={{padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
                <div className="kpi-label">ΣΩΣΤΕΣ</div>
                <div className="kpi" style={{color:'var(--lime)', fontSize:24}}>{result.score}</div>
              </div>
              <div style={{padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
                <div className="kpi-label">ΛΑΘΟΣ</div>
                <div className="kpi" style={{color:'var(--red)', fontSize:24}}>{result.total - result.score}</div>
              </div>
              <div style={{padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
                <div className="kpi-label">ΣΥΝΟΛΟ</div>
                <div className="kpi" style={{color:'var(--text-secondary)', fontSize:24}}>{result.total}</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-title" style={{marginBottom:16}}>🎯 Θέματα που χρειάζονται προσοχή</div>
            {weakTopics.length === 0 ? (
              <div style={{padding:14, borderRadius:10, background:'rgba(163,230,53,0.06)', border:'1px solid rgba(163,230,53,0.2)', color:'var(--lime)', fontSize:14}}>
                ✓ Τέλεια! Δεν εντοπίστηκαν αδυναμίες — απάντησες σωστά σε όλα τα θέματα.
              </div>
            ) : (
              <div className="row" style={{flexWrap:'wrap', gap:8}}>
                {weakTopics.map((t,i) => (
                  <span key={i} className="chip" style={{borderColor:'var(--amber)', color:'var(--amber)', background:'rgba(251,191,36,0.06)'}}>⚠ {t}</span>
                ))}
              </div>
            )}
          </div>

          <div className="row" style={{gap:12}}>
            <button className="btn btn-primary" style={{flex:1, justifyContent:'center'}} onClick={onRetry}>↺ Δοκίμασε ξανά</button>
            <button className="btn btn-secondary" style={{flex:1, justifyContent:'center'}} onClick={onMenu}>← Πίσω στα μαθήματα</button>
          </div>
        </div>
      </div>
    </Page>
  );
};

Object.assign(window, { QuizScreen, ResultsScreen, QUESTIONS });