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

// ============================================================
// 6. AM TRANSMITTER — clickable block diagram
// ============================================================
const TX_BLOCKS = {
  mic: { title:'Μικρόφωνο', icon:'🎤', sub:'INPUT', section:'AF', desc:'Μετατρέπει τον ήχο (μηχανικό κύμα) σε ηλεκτρικό σήμα χαμηλής συχνότητας. Το πλάτος του ηλεκτρικού σήματος αντιστοιχεί στην ένταση του ήχου.' },
  preamp: { title:'Προενισχυτής ΑΣ', icon:'📈', sub:'CLASS A', section:'AF', desc:'Πρώτη βαθμίδα ενίσχυσης ακουστικών συχνοτήτων. Λειτουργεί σε τάξη A — μέγιστη πιστότητα, χαμηλός θόρυβος, μικρή ισχύς εξόδου.' },
  pa: { title:'Ενισχυτής Ισχύος ΑΣ', icon:'🔊', sub:'CLASS B / AB', section:'AF', desc:'Ενισχύει το ακουστικό σήμα ώστε να φτάσει την ισχύ που απαιτείται για να διαμορφώσει αποτελεσματικά το φέρον.' },
  osc: { title:'Ταλαντωτής', icon:'∿', sub:`PRODUCES fc`, section:'RF', desc:'Παράγει το φέρον σήμα — ένα καθαρό ημιτονοειδές κύμα σταθερής συχνότητας fc και σταθερού πλάτους. Καθορίζει τη συχνότητα εκπομπής του σταθμού.' },
  rfamp: { title:'Ενισχυτής RF', icon:'⚡', sub:'CLASS C', section:'RF', desc:'Ενισχύει το φέρον υψηλής συχνότητας. Η τάξη C δίνει υψηλή απόδοση — απαραίτητο για RF ισχύος.' },
  mod: { title:'Διαμορφωτής', icon:'⊕', sub:'AM MIX', section:'RF', desc:'Συνδυάζει το ακουστικό σήμα με το RF φέρον. Το πλάτος του φέροντος μεταβάλλεται σύμφωνα με το ακουστικό σήμα — προκύπτει το AM σήμα.' },
  ant: { title:'Κεραία', icon:'📡', sub:'OUTPUT', section:'RF', desc:'Ακτινοβολεί το AM σήμα στον χώρο ως ηλεκτρομαγνητικό κύμα. Το μήκος της σχετίζεται με τη συχνότητα του φέροντος.' },
};

const TXScreen = ({ onNext, onPrev, onMenu }) => {
  const [active, setActive] = _u3('mod');
  const block = TX_BLOCKS[active];

  const Block = ({ id }) => {
    const b = TX_BLOCKS[id];
    return (
      <button className={`block-node ${active === id ? 'active' : ''}`}
        onClick={() => setActive(id)} style={{ width: '100%' }}>
        <span className="icon">{b.icon}</span>
        {b.title}
        <div className="sub">{b.sub}</div>
      </button>
    );
  };

  return (
    <Page eyebrow="L06 · ΔΙΑΓΡΑΜΜΑ" title="Πομπός AM"
      sub="Ο πομπός AM αποτελείται από δύο μονοπάτια — το ακουστικό (AF) και το ραδιοσυχνότητας (RF) — που συναντιούνται στον διαμορφωτή. Πάτα κάθε μπλοκ για περιγραφή.">

      <div className="card" style={{padding:32}}>
        {/* RF row */}
        <div style={{display:'flex', alignItems:'stretch', gap:8, marginBottom:18}}>
          <div className="mono" style={{
            writingMode:'vertical-rl', transform:'rotate(180deg)',
            fontSize:10, letterSpacing:'0.2em', color:'var(--cyan)',
            padding:'8px 4px', borderLeft:'2px solid var(--cyan)',
            display:'flex', alignItems:'center', justifyContent:'center'
          }}>RF · ΥΨΗΛΩΝ ΣΥΧΝΟΤΗΤΩΝ</div>
          <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr auto 1fr auto 1fr', gap:8, alignItems:'center'}}>
            <Block id="osc"/>
            <Arrow color="var(--cyan)"/>
            <Block id="rfamp"/>
            <Arrow color="var(--cyan)"/>
            <Block id="mod"/>
          </div>
        </div>

        {/* connector down (AF → modulator) */}
        <div style={{display:'flex', justifyContent:'flex-end', paddingRight:'13%', marginBottom:-2}}>
          <Arrow direction="up" length={28} color="var(--lime)"/>
        </div>

        {/* AF row */}
        <div style={{display:'flex', alignItems:'stretch', gap:8, marginBottom:24}}>
          <div className="mono" style={{
            writingMode:'vertical-rl', transform:'rotate(180deg)',
            fontSize:10, letterSpacing:'0.2em', color:'var(--lime)',
            padding:'8px 4px', borderLeft:'2px solid var(--lime)',
            display:'flex', alignItems:'center', justifyContent:'center'
          }}>AF · ΑΚΟΥΣΤΙΚΩΝ ΣΥΧΝΟΤΗΤΩΝ</div>
          <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr auto 1fr auto 1fr auto 1fr', gap:8, alignItems:'center'}}>
            <Block id="mic"/>
            <Arrow color="var(--lime)"/>
            <Block id="preamp"/>
            <Arrow color="var(--lime)"/>
            <Block id="pa"/>
            <Arrow color="var(--lime)"/>
            <div style={{visibility:'hidden'}}><Block id="mod"/></div>
          </div>
        </div>

        {/* Output → antenna */}
        <div style={{display:'grid', gridTemplateColumns:'1fr auto 200px', gap:8, alignItems:'center', justifyItems:'end'}}>
          <span/>
          <Arrow color="var(--pink)" length={48}/>
          <Block id="ant"/>
        </div>
      </div>

      {/* Active description */}
      <div className="card card-elev fade-in" key={active} style={{marginTop:20}}>
        <div className="row" style={{gap:20, alignItems:'flex-start'}}>
          <div style={{
            width:64, height:64, borderRadius:14,
            background: block.section === 'RF' ? 'rgba(34,211,238,0.12)' : 'rgba(163,230,53,0.12)',
            border: `1px solid ${block.section === 'RF' ? 'var(--cyan)' : 'var(--lime)'}`,
            display:'grid', placeItems:'center', fontSize:30, flexShrink:0
          }}>{block.icon}</div>
          <div style={{flex:1}}>
            <div className="row" style={{gap:10, marginBottom:6}}>
              <span className="mono" style={{fontSize:11, color:'var(--text-muted)', letterSpacing:'0.15em'}}>{block.sub}</span>
              <span className={`card-tag ${block.section==='RF'?'tag-cyan':'tag-lime'}`}>{block.section} ΤΜΗΜΑ</span>
            </div>
            <div style={{fontSize:20, fontWeight:600, marginBottom:8}}>{block.title}</div>
            <div style={{color:'var(--text-secondary)', fontSize:14, lineHeight:1.6}}>{block.desc}</div>
          </div>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Βαθμός m" nextLabel="Δέκτης AM" />
    </Page>
  );
};

// ============================================================
// 7. AM RECEIVER — drag-to-order activity
// ============================================================
const RX_CORRECT = ['ant', 'select', 'amp', 'demod', 'afamp', 'speaker'];
const RX_INFO = {
  ant: { title:'Κεραία', icon:'📡', desc:'Δέχεται όλους τους σταθμούς ταυτόχρονα.' },
  select: { title:'Επιλογή (LC)', icon:'🔍', desc:'Συντονισμένο κύκλωμα LC — επιλέγει τον σωστό σταθμό.' },
  amp: { title:'Ενίσχυση RF', icon:'🔊', desc:'Ενισχύει το πολύ ασθενές σήμα της κεραίας (μV).' },
  demod: { title:'Αποδιαμόρφωση', icon:'🎵', desc:'Αφαιρεί το φέρον — κρατά μόνο τον ήχο.' },
  afamp: { title:'Ενισχυτής ΑΣ', icon:'📢', desc:'Ενισχύει τον ήχο για να οδηγήσει τα ηχεία.' },
  speaker: { title:'Ηχείο', icon:'🔈', desc:'Μετατρέπει το ηλεκτρικό σήμα ξανά σε ήχο.' },
};

const RXScreen = ({ onNext, onPrev, onMenu }) => {
  const [order, setOrder] = _u3(() => {
    const a = [...RX_CORRECT];
    // Shuffle deterministically: swap a few
    return ['select', 'ant', 'demod', 'amp', 'speaker', 'afamp'];
  });
  const [checked, setChecked] = _u3(false);
  const [dragIdx, setDragIdx] = _u3(null);

  const move = (from, to) => {
    if (from === to || to == null) return;
    const a = [...order];
    const [it] = a.splice(from, 1);
    a.splice(to, 0, it);
    setOrder(a);
    setChecked(false);
  };
  const reset = () => { setOrder(['select', 'ant', 'demod', 'amp', 'speaker', 'afamp']); setChecked(false); };
  const solve = () => { setOrder([...RX_CORRECT]); setChecked(true); };

  const allCorrect = order.every((id, i) => id === RX_CORRECT[i]);

  return (
    <Page eyebrow="L07 · ΑΣΚΗΣΗ" title="Δέκτης AM"
      sub="Ο δέκτης κάνει το αντίστροφο του πομπού: συλλέγει το σήμα από την κεραία και το «ξεφορτώνει» — αφήνοντας μόνο τον ήχο. Τοποθέτησε τα μπλοκ στη σωστή σειρά.">

      <div className="card card-elev" style={{padding:24, marginBottom:20}}>
        <div className="row between" style={{marginBottom:16}}>
          <div className="card-title">📚 Σειρά λειτουργίας του δέκτη AM</div>
          <div className="row" style={{gap:8}}>
            <button className="btn btn-ghost" onClick={reset}>↺ Reset</button>
            <button className="btn btn-secondary" onClick={solve}>👁 Δείξε λύση</button>
            <button className={`btn ${checked && allCorrect ? 'btn-lime' : 'btn-primary'}`}
              onClick={() => setChecked(true)}>Έλεγχος</button>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:8, alignItems:'stretch'}}>
          {order.map((id, idx) => {
            const info = RX_INFO[id];
            const isCorrect = checked && id === RX_CORRECT[idx];
            const isWrong = checked && id !== RX_CORRECT[idx];
            return (
              <div
                key={id}
                draggable
                onDragStart={() => setDragIdx(idx)}
                onDragOver={(e) => e.preventDefault()}
                onDrop={() => { move(dragIdx, idx); setDragIdx(null); }}
                style={{
                  background:'var(--bg-elev)',
                  border: `1.5px solid ${isCorrect ? 'var(--lime)' : isWrong ? 'var(--red)' : 'var(--border-strong)'}`,
                  borderRadius:10, padding:'14px 10px', textAlign:'center', cursor:'grab',
                  position:'relative',
                  background: isCorrect ? 'rgba(163,230,53,0.08)' : isWrong ? 'rgba(251,113,133,0.08)' : 'var(--bg-elev)'
                }}>
                <div className="mono" style={{position:'absolute', top:6, left:8, fontSize:10, color:'var(--text-muted)'}}>{idx+1}</div>
                <div style={{fontSize:24, marginBottom:4, marginTop:4}}>{info.icon}</div>
                <div style={{fontSize:12, fontWeight:600}}>{info.title}</div>
                <div style={{fontSize:10, color:'var(--text-muted)', marginTop:4, lineHeight:1.4}}>{info.desc}</div>
              </div>
            );
          })}
        </div>

        {checked && (
          <div className="fade-in" style={{
            marginTop:16, padding:14, borderRadius:10,
            background: allCorrect ? 'rgba(163,230,53,0.08)' : 'rgba(251,191,36,0.08)',
            border: `1px solid ${allCorrect ? 'var(--lime)' : 'var(--amber)'}`,
            color: allCorrect ? 'var(--lime)' : 'var(--amber)', fontSize:13
          }}>
            {allCorrect ? '✓ Τέλεια! Σωστή σειρά λειτουργίας του δέκτη AM.'
                       : '⚠ Δεν είναι ακόμα σωστή. Σύρε τα μπλοκ στη σειρά: Κεραία → Επιλογή → Ενίσχυση → Αποδιαμόρφωση → ΑΣ Ενισχυτής → Ηχείο.'}
          </div>
        )}
      </div>

      {/* 3 functions */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
        {[
          { n:'1', t:'Διαχωρισμός (Επιλογή)', icon:'🔍', d:'Στην κεραία φτάνουν πολλοί σταθμοί μαζί. Το συντονισμένο κύκλωμα LC επιλέγει μόνο αυτόν που θέλουμε — σαν να στρίβεις τον ρυθμιστή.', tag:'LC ΚΥΚΛΩΜΑ', col:'var(--cyan)' },
          { n:'2', t:'Ενίσχυση', icon:'🔊', d:'Το σήμα φτάνει στην κεραία πολύ ασθενές (μερικά μV — σχεδόν αόρατο). Ο ενισχυτής RF το κάνει αρκετά δυνατό για να επεξεργαστεί.', tag:'ΕΝΙΣΧΥΤΗΣ RF', col:'var(--lime)' },
          { n:'3', t:'Αποδιαμόρφωση', icon:'🎵', d:'Αφαιρεί το φέρον υψηλής συχνότητας και κρατά μόνο τον ήχο/μουσική — σαν να ξεφορτώνεις τον επιβάτη από το αυτοκίνητο.', tag:'ΑΠΟΔΙΑΜΟΡΦΩΤΗΣ', col:'var(--pink)' },
        ].map((s,i) => (
          <div key={i} className="card">
            <div className="row" style={{gap:12, marginBottom:14, alignItems:'flex-start'}}>
              <div style={{
                width:32, height:32, borderRadius:8,
                background: s.col, color:'#000', display:'grid', placeItems:'center',
                fontFamily:'var(--font-mono)', fontWeight:700, fontSize:14, flexShrink:0
              }}>{s.n}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:15}}>{s.icon} {s.t}</div>
                <div className="mono" style={{fontSize:10, color:s.col, letterSpacing:'0.12em', marginTop:4}}>{s.tag}</div>
              </div>
            </div>
            <div style={{fontSize:13, color:'var(--text-secondary)', lineHeight:1.55}}>{s.d}</div>
          </div>
        ))}
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Πομπός" nextLabel="Υπερετερόδυνος" />
    </Page>
  );
};

Object.assign(window, { TXScreen, RXScreen });