/* global React, Wave, Spectrum, Scope, Page, LessonFooter, audioFn, carrierFn, amFn, amRawFn, amEnvelope */
const { useState: _u2, useMemo: _m2 } = React;

// ============================================================
// 4. AM WAVEFORM (with m slider)
// ============================================================
const AMWaveScreen = ({ onNext, onPrev, onMenu }) => {
  const [m, setM] = _u2(0.7);

  const status = m < 0.5
    ? { label: 'Χαμηλή διαμόρφωση', desc: 'Καλή ποιότητα — ο ήχος ακούγεται καθαρός, αλλά η ισχύς πληροφορίας είναι μικρή.', color: 'var(--cyan)', tag: 'tag-cyan', icon: '✓' }
    : m <= 1.0
      ? { label: 'Πλήρης διαμόρφωση', desc: 'Ιδανική κατάσταση — μέγιστη μεταφορά πληροφορίας χωρίς παραμόρφωση.', color: 'var(--lime)', tag: 'tag-lime', icon: '⭐' }
      : { label: 'Υπερδιαμόρφωση', desc: 'Παραμόρφωση! Το σήμα κόβεται στα άκρα, χάνεται πληροφορία και προκαλούνται παρεμβολές σε γειτονικούς σταθμούς.', color: 'var(--red)', tag: 'tag-amber', icon: '✕' };

  const presets = [
    { v: 0.3, label: 'm = 0.3', sub: 'Χαμηλή' },
    { v: 1.0, label: 'm = 1.0', sub: 'Ιδανική' },
    { v: 1.5, label: 'm > 1', sub: 'Υπερδιαμ.' },
  ];

  return (
    <Page eyebrow="L03 · ΕΡΓΑΣΤΗΡΙΟ" title="Διαμόρφωση πλάτους — AM"
      sub="Στη διαμόρφωση AM, το σήμα πληροφορίας μεταβάλλει το πλάτος του φέροντος. Η συχνότητα του φέροντος παραμένει σταθερή. Κίνησε το slider για να δεις πώς αλλάζει η κυματομορφή.">

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
        {/* Left: scopes */}
        <div className="col">
          <div>
            <div className="row between" style={{marginBottom:8}}>
              <span className="kpi-label" style={{margin:0}}>CH1 · ΣΗΜΑ ΠΛΗΡΟΦΟΡΙΑΣ d(t)</span>
              <span className="mono" style={{fontSize:11, color:'var(--text-muted)'}}>20 Hz – 15 kHz</span>
            </div>
            <Scope label="" color="var(--lime)" height={100}>
              <Wave fn={audioFn} color="var(--lime)" height={100} />
            </Scope>
          </div>
          <div>
            <div className="row between" style={{marginBottom:8}}>
              <span className="kpi-label" style={{margin:0}}>CH2 · ΦΕΡΟΝ s(t)</span>
              <span className="mono" style={{fontSize:11, color:'var(--text-muted)'}}>fc = 1.0 MHz</span>
            </div>
            <Scope label="" color="var(--cyan)" height={100}>
              <Wave fn={carrierFn(36)} color="var(--cyan)" height={100} />
            </Scope>
          </div>
          <div>
            <div className="row between" style={{marginBottom:8}}>
              <span className="kpi-label" style={{margin:0, color: status.color}}>CH3 · ΣΗΜΑ AM (αποτέλεσμα)</span>
              <span className="mono" style={{fontSize:11, color: status.color}}>m = {m.toFixed(2)}</span>
            </div>
            <Scope label="" color={status.color} height={140}>
              <Wave fn={amRawFn(m, 36, 2)} color={status.color} height={140} strokeWidth={1.6} />
              {/* envelope overlay */}
              <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:0.35}}>
                <Wave fn={(t)=> amEnvelope(m,2)(t) * 0.95} color={status.color} height={140} strokeWidth={1} glow={false} />
                <div style={{transform:'scaleY(-1)', marginTop:-140}}>
                  <Wave fn={(t)=> amEnvelope(m,2)(t) * 0.95} color={status.color} height={140} strokeWidth={1} glow={false} />
                </div>
              </div>
            </Scope>
          </div>
        </div>

        {/* Right: control + status */}
        <div className="col">
          <div className="card card-elev">
            <div className="card-header">
              <div className="card-title">Βαθμός διαμόρφωσης m</div>
              <span className={`card-tag ${status.tag}`}>{status.icon} {status.label}</span>
            </div>

            <div className="formula" style={{ width: '100%', textAlign:'center', fontSize: 14, color: 'var(--text-secondary)', marginBottom: 18 }}>
              <span className="var">m</span> <span className="op">=</span> (<span className="var">A_max</span> <span className="op">−</span> <span className="var">A_min</span>) <span className="op">/</span> (<span className="var">A_max</span> <span className="op">+</span> <span className="var">A_min</span>)
            </div>

            <div style={{position:'relative', padding: '8px 0 28px'}}>
              <input type="range" className="range" min="0" max="1.5" step="0.01" value={m}
                onChange={(e) => setM(parseFloat(e.target.value))} />
              <div style={{display:'flex', justifyContent:'space-between', marginTop: 8,
                fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--text-muted)'}}>
                <span>0.0</span><span>0.5</span><span>1.0</span><span>1.5</span>
              </div>
              {/* threshold marker at 1.0 */}
              <div style={{position:'absolute', left: `${(1/1.5)*100}%`, top: 8, height: 16, width:1, background:'var(--amber)', opacity:0.6}}></div>
            </div>

            <div className="row" style={{gap:8, marginTop:8}}>
              {presets.map(p => (
                <button key={p.v} className="btn btn-ghost" style={{flex:1, justifyContent:'center', padding:'10px 8px', flexDirection:'column', gap:2}}
                  onClick={() => setM(p.v)}>
                  <span className="mono" style={{fontSize:13}}>{p.label}</span>
                  <span style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em'}}>{p.sub}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="card" style={{borderColor: status.color, background: `color-mix(in srgb, ${status.color} 6%, var(--bg-panel))`}}>
            <div className="row" style={{gap:14, alignItems:'flex-start'}}>
              <div style={{
                width:36, height:36, borderRadius:8, background:status.color, color:'#000',
                display:'grid', placeItems:'center', fontSize:18, fontWeight:800, flexShrink:0
              }}>{status.icon}</div>
              <div>
                <div style={{fontSize:15, fontWeight:600, marginBottom:4, color: status.color}}>{status.label}</div>
                <div style={{fontSize:14, color:'var(--text-secondary)', lineHeight:1.5}}>{status.desc}</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="kpi-label">ΕΞΙΣΩΣΗ ΣΗΜΑΤΟΣ AM</div>
            <div className="formula" style={{marginTop:8, width:'100%', fontSize:13}}>
              y(t) = [<span className="const">A</span> + <span className="var">B</span>·sin(2π<span className="var">f</span>t)] · cos(2π<span className="const">F</span>t)
            </div>
            <div style={{fontSize:12, color:'var(--text-muted)', marginTop:10, lineHeight:1.6}}>
              <b style={{color:'var(--text-secondary)'}}>F</b> = συχνότητα φέροντος · <b style={{color:'var(--text-secondary)'}}>f</b> = συχνότητα ήχου · <b style={{color:'var(--text-secondary)'}}>A</b> = πλάτος φέροντος · <b style={{color:'var(--text-secondary)'}}>B</b> = πλάτος ήχου
            </div>
          </div>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Σήματα" nextLabel="Φάσμα AM" />
    </Page>
  );
};

// ============================================================
// 5. SPECTRUM ACTIVITY
// ============================================================
const SpectrumScreen = ({ onNext, onPrev, onMenu }) => {
  const [fmax, setFmax] = _u2(4.5);
  const [answer, setAnswer] = _u2('');
  const [feedback, setFeedback] = _u2(null);

  const fc = 1000; // illustrative center, we'll show in kHz
  const lines = [
    { f: 50 - fmax, label: `fc − fm`, sub: `${(fc - fmax).toFixed(1)} kHz`, color: 'var(--lime)', a: 0.55 },
    { f: 50, label: `fc`, sub: `${fc} kHz`, color: 'var(--cyan)', a: 1 },
    { f: 50 + fmax, label: `fc + fm`, sub: `${(fc + fmax).toFixed(1)} kHz`, color: 'var(--lime)', a: 0.55 },
  ];

  const check = () => {
    const v = parseFloat(answer.replace(',', '.'));
    if (isNaN(v)) { setFeedback({ ok:false, msg:'Συμπλήρωσε αριθμητική τιμή σε kHz.' }); return; }
    const correct = 2 * fmax;
    if (Math.abs(v - correct) < 0.05) {
      setFeedback({ ok:true, msg:`Σωστά! BW = 2 × fmax = 2 × ${fmax} kHz = ${correct} kHz.` });
    } else {
      setFeedback({ ok:false, msg:`Όχι ακριβώς. BW = 2 × fmax — δοκίμασε πάλι.` });
    }
  };

  return (
    <Page eyebrow="L04 · ΑΣΚΗΣΗ" title="Φάσμα σήματος AM"
      sub="Το AM σήμα έχει τρεις φασματικές ακτίνες: το φέρον fc και τις δύο πλευρικές fc±fm. Το συνολικό εύρος ζώνης είναι BW = 2·fmax.">

      <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:24}}>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Φάσμα |S(f)|</div>
            <span className="card-tag tag-cyan">SPECTRUM</span>
          </div>
          <div className="scope" style={{padding:'8px 12px'}}>
            <Spectrum lines={lines.map(l => ({...l, f: ((l.f - 50)*8) + 50}))} fmin={0} fmax={100} height={220}/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginTop:18}}>
            {[
              {l:'Φέρουσα fc', d:`Σταθερή συχνότητα εκπομπής σταθμού.`, c:'var(--cyan)', i:'🎯'},
              {l:'Κάτω πλευρική LSB', d:`fc − fm. Περιέχει την πληροφορία.`, c:'var(--lime)', i:'⬅'},
              {l:'Άνω πλευρική USB', d:`fc + fm. Ίδια πληροφορία με LSB.`, c:'var(--lime)', i:'➡'},
              {l:'Εύρος ζώνης BW', d:`BW = 2·fmax. Για AM ραδιόφωνο: 9 kHz.`, c:'var(--amber)', i:'📏'},
            ].map((x,i) => (
              <div key={i} style={{padding:12, borderRadius:10, background:'var(--bg-elev)', border:'1px solid var(--border-subtle)'}}>
                <div className="mono" style={{fontSize:10, color:x.c, letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:6}}>{x.i} {x.l}</div>
                <div style={{fontSize:12, color:'var(--text-secondary)', lineHeight:1.5}}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="col">
          <div className="card card-elev">
            <div className="card-header">
              <div className="card-title">⚙ Πείραμα · Ρύθμισε fmax</div>
              <span className="mono" style={{color:'var(--cyan)'}}>{fmax.toFixed(1)} kHz</span>
            </div>
            <input type="range" className="range" min="1" max="8" step="0.5" value={fmax}
              onChange={(e)=> setFmax(parseFloat(e.target.value))} />
            <div className="row between" style={{marginTop:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)'}}>
              <span>1 kHz</span><span>8 kHz</span>
            </div>
            <div style={{marginTop:18, padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
              <div className="kpi-label">ΥΠΟΛΟΓΙΣΜΕΝΟ BW</div>
              <div className="kpi" style={{color:'var(--cyan)', marginTop:4}}>{(2*fmax).toFixed(1)} <span style={{fontSize:14, color:'var(--text-muted)'}}>kHz</span></div>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div className="card-title">📝 Άσκηση</div>
              <span className="card-tag tag-amber">ΕΡΩΤΗΣΗ</span>
            </div>
            <div style={{fontSize:14, color:'var(--text-secondary)', lineHeight:1.6, marginBottom:16}}>
              Αν η μέγιστη συχνότητα του ηχητικού σήματος είναι <span className="mono" style={{color:'var(--lime)'}}>fmax = 4.5 kHz</span>, ποιο είναι το εύρος ζώνης του AM σήματος;
            </div>
            <div className="input-row">
              <input className="text-input" placeholder="π.χ. 9" value={answer}
                onChange={e=>{setAnswer(e.target.value); setFeedback(null);}}
                onKeyDown={e=> e.key==='Enter' && check()} />
              <span className="mono" style={{color:'var(--text-muted)'}}>kHz</span>
              <button className="btn btn-primary" onClick={check}>Έλεγχος</button>
            </div>
            {feedback && (
              <div className="fade-in" style={{
                marginTop: 14, padding: 14, borderRadius: 10,
                background: feedback.ok ? 'rgba(163,230,53,0.08)' : 'rgba(251,113,133,0.08)',
                border: `1px solid ${feedback.ok ? 'var(--lime)' : 'var(--red)'}`,
                color: feedback.ok ? 'var(--lime)' : 'var(--red)',
                fontSize: 13, lineHeight: 1.5
              }}>{feedback.ok ? '✓' : '✕'} {feedback.msg}</div>
            )}
          </div>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Διαμόρφωση AM" nextLabel="Βαθμός m" />
    </Page>
  );
};

// ============================================================
// M-DEGREE explainer (lighter version of waveform screen)
// ============================================================
const MDegreeScreen = ({ onNext, onPrev, onMenu }) => {
  const cards = [
    { v: 0.3, title:'m = 0.3 (30%)', label:'Χαμηλή Διαμόρφωση', desc:'Το πλάτος αλλάζει λίγο. Μικρές παραμορφώσεις. Ο ήχος ακούγεται καθαρός.', tag:'Καλή ποιότητα', icon:'✓', color:'var(--cyan)', tagClass:'tag-cyan' },
    { v: 1.0, title:'m = 1.0 (100%)', label:'Πλήρης Διαμόρφωση', desc:'Το πλάτος φτάνει ως το μηδέν. Μέγιστη μεταφορά πληροφορίας. Άριστη ποιότητα.', tag:'Ιδανική κατάσταση', icon:'⭐', color:'var(--lime)', tagClass:'tag-lime' },
    { v: 1.5, title:'m > 1.0 (>100%)', label:'Υπερδιαμόρφωση', desc:'Το σήμα κόβεται στα άκρα. Χάνεται πληροφορία. Προκαλεί παρεμβολές σε γειτονικούς σταθμούς.', tag:'Παραμόρφωση', icon:'✕', color:'var(--red)', tagClass:'tag-amber' },
  ];
  return (
    <Page eyebrow="L05 · ΕΡΓΑΣΤΗΡΙΟ" title="Βαθμός διαμόρφωσης m"
      sub="Ο βαθμός διαμόρφωσης δείχνει πόσο «δυνατά φωνάζει» το σήμα πληροφορίας πάνω στο φέρον.">
      <div className="card card-elev" style={{marginBottom:24}}>
        <div className="row" style={{gap:24, justifyContent:'space-between', flexWrap:'wrap'}}>
          <div className="formula" style={{fontSize:16}}>
            <span className="var">m</span> <span className="op">=</span> (<span className="var">A_max</span> <span className="op">−</span> <span className="var">A_min</span>) <span className="op">/</span> (<span className="var">A_max</span> <span className="op">+</span> <span className="var">A_min</span>)
          </div>
          <div style={{color:'var(--text-secondary)', fontSize:14, maxWidth:480, lineHeight:1.5}}>
            💡 <b>Αναλογία:</b> Αν ο σταθμός φωνάζει δυνατά → μεγάλο m. Αν μιλά σιγά → μικρό m.
          </div>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
        {cards.map((c,i) => (
          <div key={i} className="card" style={{borderColor: c.color === 'var(--red)' ? undefined : undefined}}>
            <div className="card-header">
              <div>
                <div className="mono" style={{fontSize:11, color:'var(--text-muted)', letterSpacing:'0.12em'}}>{c.title}</div>
                <div className="card-title" style={{marginTop:4, color:c.color}}>{c.label}</div>
              </div>
              <span className={`card-tag ${c.tagClass}`}>{c.icon} {c.tag}</span>
            </div>
            <Scope label="" color={c.color} height={120}>
              <Wave fn={amRawFn(c.v, 30, 2)} color={c.color} height={120} strokeWidth={1.5}/>
              <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:0.3}}>
                <Wave fn={(t)=> amEnvelope(c.v,2)(t)*0.95} color={c.color} height={120} strokeWidth={1} glow={false}/>
              </div>
            </Scope>
            <div style={{marginTop:14, fontSize:13, color:'var(--text-secondary)', lineHeight:1.55}}>{c.desc}</div>
          </div>
        ))}
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Φάσμα AM" nextLabel="Πομπός AM" />
    </Page>
  );
};

Object.assign(window, { AMWaveScreen, SpectrumScreen, MDegreeScreen });