/* global React, Page, LessonFooter, Wave, Spectrum, Scope, carrierFn */
const { useState: _u4 } = React;

// ============================================================
// 8. SUPERHETERODYNE CALCULATOR
// ============================================================
const SuperhetScreen = ({ onNext, onPrev, onMenu }) => {
  const [fc, setFc] = _u4('1000');
  const fIF = 455;
  const fcNum = parseFloat(fc.replace(',', '.'));
  const valid = !isNaN(fcNum) && fcNum > 0;
  const fLO = valid ? fcNum + fIF : null;
  const fImage = valid ? fcNum + 2 * fIF : null;

  const presets = [
    { fc: '540', name:'Αρχή AM ζώνης' },
    { fc: '1000', name:'Μέση AM' },
    { fc: '1610', name:'Τέλος AM ζώνης' },
  ];

  return (
    <Page eyebrow="L08 · ΥΠΟΛΟΓΙΣΤΗΣ" title="Υπερετερόδυνος δέκτης"
      sub="Ο υπερετερόδυνος μετατρέπει οποιαδήποτε λαμβανόμενη συχνότητα σε σταθερή ενδιάμεση συχνότητα fIF = 455 kHz. Αυτό επιτρέπει σταθερά φίλτρα και μεγάλη επιλεκτικότητα.">

      {/* block diagram */}
      <div className="card" style={{padding:24, marginBottom:24}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(11, auto)', gap:6, alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
          {[
            ['📡','Κεραία'],
            ['→',null],
            ['🔍','Ενισχ. RF\n+ Επιλογή'],
            ['→',null],
            ['⊗','Μίκτης'],
            ['→',null],
            ['🔊',`Ενισχ. IF\n${fIF} kHz`],
            ['→',null],
            ['🎵','Αποδιαμ.'],
            ['→',null],
            ['🔈','Ηχείο'],
          ].map((b, i) => (
            b[1] === null ? (
              <span key={i} style={{color:'var(--cyan)', fontFamily:'var(--font-mono)', padding:'0 4px'}}>{b[0]}</span>
            ) : (
              <div key={i} className="block-node" style={{minWidth:88, padding:'10px 8px', whiteSpace:'pre-line'}}>
                <span className="icon" style={{fontSize:18}}>{b[0]}</span>
                <span style={{fontSize:11}}>{b[1]}</span>
              </div>
            )
          ))}
        </div>

        <div style={{textAlign:'center', marginTop:14, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)'}}>
          ↑ Τοπικός Ταλαντωτής · <span style={{color:'var(--amber)'}}>fLO = fc + 455 kHz</span>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        {/* Calculator */}
        <div className="card card-elev">
          <div className="card-header">
            <div className="card-title">🧮 Υπολογιστής τοπικού ταλαντωτή</div>
            <span className="card-tag tag-cyan">fIF = {fIF} kHz</span>
          </div>

          <div className="formula" style={{width:'100%', textAlign:'center', fontSize:16, marginBottom:20}}>
            <span className="var">fLO</span> <span className="op">=</span> <span className="var">fc</span> <span className="op">+</span> <span className="const">fIF</span>
          </div>

          <div style={{marginBottom:14}}>
            <div className="kpi-label">ΣΥΧΝΟΤΗΤΑ ΣΤΑΘΜΟΥ fc</div>
            <div className="input-row" style={{marginTop:6}}>
              <input className="text-input" value={fc} onChange={e=>setFc(e.target.value)} placeholder="π.χ. 1000"/>
              <span className="mono" style={{color:'var(--text-muted)'}}>kHz</span>
            </div>
          </div>

          <div className="row" style={{gap:8, marginBottom:18}}>
            {presets.map(p => (
              <button key={p.fc} className="btn btn-ghost" style={{flex:1, justifyContent:'center', padding:'8px', flexDirection:'column'}}
                onClick={()=> setFc(p.fc)}>
                <span className="mono" style={{fontSize:12}}>{p.fc} kHz</span>
                <span style={{fontSize:9, color:'var(--text-muted)', letterSpacing:'0.08em'}}>{p.name}</span>
              </button>
            ))}
          </div>

          <div style={{padding:18, borderRadius:10, background:'var(--bg-deep)', border:'1px solid var(--border-soft)'}}>
            <div className="kpi-label">ΣΥΧΝΟΤΗΤΑ ΤΟΠΙΚΟΥ ΤΑΛΑΝΤΩΤΗ fLO</div>
            <div className="kpi" style={{marginTop:6, fontSize:36, color:'var(--cyan)'}}>
              {valid ? fLO.toFixed(0) : '—'} <span style={{fontSize:16, color:'var(--text-muted)'}}>kHz</span>
            </div>
            {valid && (
              <div style={{marginTop:8, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--text-secondary)'}}>
                = {fcNum} + {fIF} kHz
              </div>
            )}
          </div>
        </div>

        {/* Why */}
        <div className="col">
          <div className="card">
            <div className="card-title" style={{marginBottom:14}}>💡 Γιατί fIF = 455 kHz;</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12, color:'var(--text-secondary)', fontSize:14, lineHeight:1.5}}>
              <li className="row" style={{gap:10, alignItems:'flex-start'}}>
                <span style={{color:'var(--lime)', fontWeight:700}}>✓</span>
                <span>Σταθερά φίλτρα IF — βελτιώνουν δραστικά την <b>ευαισθησία</b>.</span>
              </li>
              <li className="row" style={{gap:10, alignItems:'flex-start'}}>
                <span style={{color:'var(--lime)', fontWeight:700}}>✓</span>
                <span>Μεγαλύτερη <b>επιλεκτικότητα</b> — ξεχωρίζει γειτονικούς σταθμούς.</span>
              </li>
              <li className="row" style={{gap:10, alignItems:'flex-start'}}>
                <span style={{color:'var(--lime)', fontWeight:700}}>✓</span>
                <span>Πολύ καλύτερη απόδοση από τον ομόδυνο δέκτη.</span>
              </li>
              <li className="row" style={{gap:10, alignItems:'flex-start'}}>
                <span style={{color:'var(--lime)', fontWeight:700}}>✓</span>
                <span>Η συχνότητα είδωλο πέφτει εκτός της AM ζώνης.</span>
              </li>
            </ul>
          </div>

          <div className="card card-elev" style={{borderColor:'var(--cyan)', background:'rgba(34,211,238,0.04)'}}>
            <div className="kpi-label" style={{color:'var(--cyan)'}}>📖 ΠΑΡΑΔΕΙΓΜΑ</div>
            <div style={{marginTop:10, fontSize:14, color:'var(--text-secondary)', lineHeight:1.6}}>
              Για σταθμό στα <span className="mono" style={{color:'var(--cyan)'}}>fc = 1000 kHz</span>,<br/>
              ο τοπικός ταλαντωτής συντονίζεται στα<br/>
              <span className="mono" style={{color:'var(--lime)', fontSize:18}}>fLO = 1000 + 455 = 1455 kHz</span>
            </div>
          </div>
        </div>
      </div>

      {valid && (
        <div className="card" style={{marginTop:24}}>
          <div className="card-header">
            <div className="card-title">🪞 Συχνότητα είδωλο για αυτόν τον σταθμό</div>
            <span className="card-tag tag-amber">fimage = fc + 2·fIF = {fImage.toFixed(0)} kHz</span>
          </div>
          <div className="scope" style={{padding:'8px 12px'}}>
            <Spectrum
              fmin={Math.min(fcNum, fLO, fImage) - 200}
              fmax={Math.max(fcNum, fLO, fImage) + 200}
              height={160}
              lines={[
                { f: fcNum, label:'fc', sub:`${fcNum} kHz`, color:'var(--cyan)', a: 1 },
                { f: fLO, label:'fLO', sub:`${fLO} kHz`, color:'var(--lime)', a: 0.85 },
                { f: fImage, label:'fΕΙΔΩΛΟ', sub:`${fImage} kHz`, color:'var(--red)', a: 0.7 },
              ]}/>
          </div>
        </div>
      )}

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Δέκτης" nextLabel="AGC & Είδωλο" />
    </Page>
  );
};

// ============================================================
// 9. AGC & IMAGE FREQUENCY
// ============================================================
const AGCScreen = ({ onNext, onPrev, onMenu }) => {
  const [signal, setSignal] = _u4(50);
  const [fc, setFc] = _u4('1000');
  const fIF = 455;
  const fcNum = parseFloat(fc.replace(',','.'));
  const valid = !isNaN(fcNum) && fcNum > 0;
  const fImg = valid ? fcNum + 2*fIF : null;

  // gain inverse to signal
  const gain = Math.round(100 - signal * 0.7);
  const output = Math.min(100, Math.round(signal * 0.5 + gain * 0.45)); // ~stable
  const state = signal > 70 ? { label:'Ισχυρό σήμα', sub:'Μειώνει κέρδος', icon:'📉', color:'var(--cyan)' }
              : signal < 30 ? { label:'Αδύναμο σήμα', sub:'Αυξάνει κέρδος', icon:'📈', color:'var(--amber)' }
              : { label:'Κανονικό σήμα', sub:'Σταθερό κέρδος', icon:'📊', color:'var(--lime)' };

  return (
    <Page eyebrow="L09 · ΘΕΩΡΙΑ + ΑΣΚΗΣΗ" title="AGC και συχνότητα είδωλο"
      sub="Δύο ζητήματα του υπερετερόδυνου δέκτη: ο αυτόματος έλεγχος κέρδους που σταθεροποιεί την έξοδο, και η συχνότητα είδωλο που μπορεί να προκαλέσει συνακρόαση.">

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        {/* AGC */}
        <div className="card card-elev">
          <div className="card-header">
            <div className="card-title">⚡ Αυτόματος έλεγχος κέρδους (AGC)</div>
            <span className={`card-tag`} style={{color: state.color, borderColor: state.color, background:'transparent'}}>
              {state.icon} {state.label}
            </span>
          </div>

          <div style={{fontSize:13, color:'var(--text-secondary)', lineHeight:1.55, marginBottom:18}}>
            Το σήμα εισόδου δεν είναι σταθερό — εξαρτάται από απόσταση, εμπόδια, ατμοσφαιρικά. Ο AGC διατηρεί <b>σταθερή</b> την έξοδο μεταβάλλοντας αντίστροφα το κέρδος.
          </div>

          <div style={{marginBottom:18}}>
            <div className="row between" style={{marginBottom:6}}>
              <span className="kpi-label" style={{margin:0}}>ΣΗΜΑ ΕΙΣΟΔΟΥ</span>
              <span className="mono" style={{fontSize:12, color:'var(--cyan)'}}>{signal} %</span>
            </div>
            <input type="range" className="range" min="10" max="95" value={signal}
              onChange={e=> setSignal(parseInt(e.target.value))}/>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <div style={{padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
              <div className="kpi-label">ΚΕΡΔΟΣ AGC</div>
              <div className="kpi" style={{color:'var(--amber)', fontSize:24, marginTop:4}}>{gain}%</div>
              <div className="pbar" style={{marginTop:8}}>
                <div className="pbar-fill" style={{width:`${gain}%`, background:'var(--amber)'}}></div>
              </div>
            </div>
            <div style={{padding:14, borderRadius:10, background:'var(--bg-deep)'}}>
              <div className="kpi-label">ΕΞΟΔΟΣ ΗΧΟΥ</div>
              <div className="kpi" style={{color:'var(--lime)', fontSize:24, marginTop:4}}>{output}%</div>
              <div className="pbar" style={{marginTop:8}}>
                <div className="pbar-fill" style={{width:`${output}%`}}></div>
              </div>
            </div>
          </div>

          <div style={{marginTop:14, padding:12, borderRadius:8, background:'rgba(163,230,53,0.06)', border:'1px solid rgba(163,230,53,0.2)', fontSize:12, color:'var(--lime)'}}>
            ✓ Η έξοδος παραμένει σχεδόν σταθερή ανεξάρτητα από διακυμάνσεις του σήματος εισόδου.
          </div>
        </div>

        {/* Image freq */}
        <div className="card card-elev">
          <div className="card-header">
            <div className="card-title">🪞 Συχνότητα είδωλο</div>
            <span className="card-tag tag-amber">fimage = fc + 2·fIF</span>
          </div>

          <div style={{fontSize:13, color:'var(--text-secondary)', lineHeight:1.55, marginBottom:14}}>
            Ο υπερετερόδυνος μπορεί να μπερδέψει ένα παρασιτικό σήμα με τον σωστό σταθμό — φαινόμενο «συνακρόασης». Απορρίπτεται από τα φίλτρα RF εισόδου.
          </div>

          <div className="formula" style={{width:'100%', fontSize:14, textAlign:'center', marginBottom:14}}>
            <span className="var">fimage</span> <span className="op">=</span> <span className="var">fc</span> <span className="op">+</span> 2 <span className="op">×</span> <span className="const">fIF</span>
          </div>

          <div style={{marginBottom:14}}>
            <div className="kpi-label">fc (σταθμός)</div>
            <div className="input-row" style={{marginTop:6}}>
              <input className="text-input" value={fc} onChange={e=>setFc(e.target.value)}/>
              <span className="mono" style={{color:'var(--text-muted)'}}>kHz</span>
            </div>
          </div>

          <div style={{padding:16, borderRadius:10, background:'var(--bg-deep)', border:'1px solid var(--border-soft)'}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12, textAlign:'center'}}>
              <div>
                <div className="mono" style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em'}}>fc</div>
                <div className="mono" style={{color:'var(--cyan)', fontSize:18, marginTop:4}}>{valid? fcNum : '—'}</div>
              </div>
              <div>
                <div className="mono" style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em'}}>2·fIF</div>
                <div className="mono" style={{color:'var(--text-secondary)', fontSize:18, marginTop:4}}>+{2*fIF}</div>
              </div>
              <div>
                <div className="mono" style={{fontSize:10, color:'var(--amber)', letterSpacing:'0.1em'}}>fimage</div>
                <div className="mono" style={{color:'var(--amber)', fontSize:18, marginTop:4, fontWeight:700}}>{valid? fImg : '—'}</div>
              </div>
            </div>
          </div>

          <div style={{marginTop:14, fontSize:12, color:'var(--text-muted)', lineHeight:1.5}}>
            π.χ. fc = 1000 kHz, fIF = 455 kHz → <span style={{color:'var(--amber)'}} className="mono">fimage = 1910 kHz</span>
          </div>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Υπερετερόδυνος" nextLabel="Εισαγωγή στο FM" />
    </Page>
  );
};

Object.assign(window, { SuperhetScreen, AGCScreen });