/* ============================================================
   Screens — Part 2
   Card / IRIS / Cash / Mix payment screens
   Confirmation, processing, success, receipt
   All edge cases
   ============================================================ */

/* ============================================================
   CARD payment
   ============================================================ */
const ScreenCardPay = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const amount = window.AppState.amount || 0;
  const [stage, setStage] = React.useState('insert'); // insert | processing

  React.useEffect(() => {
    if (stage === 'insert') {
      const t1 = setTimeout(() => setStage('processing'), 4000);
      return () => clearTimeout(t1);
    }
    if (stage === 'processing') {
      const t1 = setTimeout(() => {
        // 90% success, 10% fail (deterministic via demo flag)
        if (window.AppState.forceCardDecline) { window.AppState.forceCardDecline = false; go('cardDeclined'); }
        else go('success');
      }, 2400);
      return () => clearTimeout(t1);
    }
  }, [stage]);

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{stage === 'insert' ? t.cardInsert : t.cardProcessing}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1200 }}>{stage === 'insert' ? t.cardInsertSub : t.cardProcessingSub}</p>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 56 }}>
          <div style={{ width: 600, height: 380, background: 'linear-gradient(135deg, #1a1a1a, #404040)', borderRadius: 32, padding: 48, color: '#fff', position: 'relative', boxShadow: 'var(--shadow-xl)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>PAX IM30</div>
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: stage === 'processing' ? 'var(--success)' : 'var(--mc-red)', boxShadow: '0 0 12px currentColor' }}/>
            </div>
            <div style={{ position: 'absolute', bottom: 48, left: 48, right: 48 }}>
              <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{lang === 'el' ? 'Ποσό' : 'Amount'}</div>
              <div style={{ fontSize: 64, fontWeight: 700, fontFamily: 'var(--font-mono)', lineHeight: 1 }}>{fmtEUR(amount, lang)}</div>
              {stage === 'processing' && <div style={{ marginTop: 24, display: 'flex', gap: 12, alignItems: 'center' }}><span className="pulse-dots"><span/><span/><span/></span> {t.cardProcessing}</div>}
            </div>
          </div>

          <div style={{ display: 'flex', gap: 32, alignItems: 'center', color: 'var(--n-500)' }} className="t-body-lg">
            <Icon name="card" size={48}/> Visa · Mastercard · Maestro · Apple Pay · Google Pay
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--ghost" style={{ flex: '0 0 320px' }} onClick={() => { window.AppState.forceCardDecline = true; setStage('processing'); }}>
          {lang === 'el' ? 'Demo: απόρριψη' : 'Demo: decline'}
        </button>
        <button className="btn btn--secondary" style={{ flex: 1 }} onClick={() => go('cancelConfirm')}>{t.cancel}</button>
      </div>
    </div>
  );
};
window.ScreenCardPay = ScreenCardPay;

/* ============================================================
   IRIS payment
   ============================================================ */
const ScreenIrisPay = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const amount = window.AppState.amount || 0;
  const [secs, setSecs] = React.useState(180);
  const [seed, setSeed] = React.useState('IRIS-' + Date.now());

  React.useEffect(() => {
    if (secs <= 0) { go('irisExpired'); return; }
    const t1 = setTimeout(() => setSecs(s => s - 1), 1000);
    return () => clearTimeout(t1);
  }, [secs]);

  const mins = Math.floor(secs / 60), ss = String(secs % 60).padStart(2,'0');

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.irisScan}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1200 }}>{t.irisScanSub}</p>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40 }}>
          <div className="qr-frame"><QRPlaceholder seed={seed} /></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, color: secs < 30 ? 'var(--error)' : 'var(--n-700)' }}>
            <Icon name="clock" size={32}/>
            <span className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{t.irisExpiresIn}{mins}:{ss}</span>
          </div>
          <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 32, display: 'flex', justifyContent: 'space-between', width: '100%', maxWidth: 800 }}>
            <span className="t-h4">{t.amount}</span>
            <span className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{fmtEUR(amount, lang)}</span>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--ghost" style={{ flex: '0 0 280px' }} onClick={() => { setSecs(180); setSeed('IRIS-' + Date.now()); }}><Icon name="refresh" size={24}/> {t.irisGenerate}</button>
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('success')}>
          <span style={{ flex: 1, textAlign: 'left' }}>{lang === 'el' ? 'Demo: επιτυχία' : 'Demo: success'}</span>
          <span className="btn-arrow"><Icon name="check" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenIrisPay = ScreenIrisPay;

/* ============================================================
   CASH payment
   ============================================================ */
const ScreenCashPay = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const amount = window.AppState.amount || 0;
  const [inserted, setInserted] = React.useState(0);

  const remaining = Math.max(0, amount - inserted);
  const change = Math.max(0, inserted - amount);
  const denoms = [5, 10, 20, 50, 100];

  const insert = (v) => setInserted(i => i + v);

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.cashInsert}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 40px', maxWidth: 1200 }}>{t.cashInsertSub}</p>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32, flex: 1 }}>
          {/* Live counter */}
          <div style={{ background: 'var(--mc-ink)', color: '#fff', borderRadius: 32, padding: 56, display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div>
              <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.cashInserted}</div>
              <div style={{ fontSize: 96, fontWeight: 700, fontFamily: 'var(--font-mono)', lineHeight: 1 }}>{fmtEUR(inserted, lang)}</div>
            </div>
            <div style={{ height: 2, background: 'rgba(255,255,255,.15)' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.amount}</div>
                <div className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{fmtEUR(amount, lang)}</div>
              </div>
              {remaining > 0 ? (
                <div style={{ textAlign: 'right' }}>
                  <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.cashRemaining}</div>
                  <div className="t-h3" style={{ fontFamily: 'var(--font-mono)', color: 'var(--mc-red)' }}>{fmtEUR(remaining, lang)}</div>
                </div>
              ) : (
                <div style={{ textAlign: 'right' }}>
                  <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.cashChange}</div>
                  <div className="t-h3" style={{ fontFamily: 'var(--font-mono)', color: 'var(--success)' }}>{fmtEUR(change, lang)}</div>
                </div>
              )}
            </div>

            {/* "Slot" visual */}
            <div style={{ marginTop: 'auto', background: 'rgba(255,255,255,.08)', borderRadius: 16, padding: 24, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 64, height: 8, background: '#fff', borderRadius: 4 }}/>
              <span className="t-body" style={{ color: 'rgba(255,255,255,.7)' }}>{lang === 'el' ? 'Σχισμή χαρτονομισμάτων Cashmatic VP27' : 'Cashmatic VP27 banknote slot'}</span>
            </div>
          </div>

          {/* Demo denominations */}
          <div style={{ background: 'var(--n-50)', borderRadius: 32, padding: 40, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="t-label">{lang === 'el' ? 'Demo: εισαγωγή χαρτονομίσματος' : 'Demo: insert banknote'}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {denoms.map(v => (
                <button key={v} className="btn btn--secondary" style={{ minHeight: 96, fontSize: 26 }} onClick={() => insert(v)}>
                  <Icon name="cash" size={28}/> €{v}
                </button>
              ))}
              <button className="btn btn--secondary" style={{ minHeight: 96, fontSize: 22 }} onClick={() => insert(0.5)}>
                <Icon name="cash" size={24}/> {lang === 'el' ? 'Κέρμα 0,50' : 'Coin €0.50'}
              </button>
            </div>
            <div style={{ height: 1, background: 'var(--n-200)', margin: '8px 0' }}/>
            <button className="btn-sm" onClick={() => go('fakeNote')} style={{ minHeight: 64 }}><Icon name="banknote-x" size={20}/> {lang === 'el' ? 'Demo: πλαστό' : 'Demo: fake note'}</button>
            <button className="btn-sm" onClick={() => go('insufficientChange')} style={{ minHeight: 64 }}><Icon name="alert" size={20}/> {lang === 'el' ? 'Demo: χωρίς ρέστα' : 'Demo: no change'}</button>
            <button className="btn-sm" onClick={() => go('cashJam')} style={{ minHeight: 64 }}><Icon name="tools" size={20}/> {lang === 'el' ? 'Demo: εμπλοκή' : 'Demo: jam'}</button>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--secondary" style={{ flex: '0 0 280px' }} onClick={() => go('cancelConfirm')}>{t.cancel}</button>
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('success')} disabled={inserted < amount}>
          <span style={{ flex: 1, textAlign: 'left' }}>{t.finishCash}</span>
          <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenCashPay = ScreenCashPay;

/* ============================================================
   MIX payment — intro + cash step + electronic step
   ============================================================ */
const ScreenMixIntro = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const amount = window.AppState.amount || 0;
  const [cashPart, setCashPart] = React.useState(String(Math.round(amount / 2)));
  const cashAmt = Math.min(amount, Number(cashPart) || 0);
  const remaining = amount - cashAmt;

  const proceed = () => {
    window.AppState.mixCash = cashAmt;
    window.AppState.mixRemaining = remaining;
    go('mixCash');
  };

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.mixIntro}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 40px', maxWidth: 1200 }}>{t.mixIntroSub}</p>

        <div style={{ background: 'var(--mc-ink)', color: '#fff', borderRadius: 32, padding: 40, marginBottom: 32, display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.amount}</div>
            <div style={{ fontSize: 64, fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{fmtEUR(amount, lang)}</div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 56, flex: 1 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 32 }}>
              <div className="t-label" style={{ marginBottom: 12 }}>{lang === 'el' ? 'Ποσό σε μετρητά' : 'Cash portion'}</div>
              <div className="code-display" style={{ fontSize: 64, justifyContent: 'flex-start' }}>
                <span style={{ color: 'var(--n-400)', marginRight: 16 }}>€</span>{cashPart || '0'}
              </div>
            </div>
            <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 32 }}>
              <div className="t-label" style={{ marginBottom: 12 }}>{lang === 'el' ? 'Υπόλοιπο με κάρτα/IRIS' : 'Remainder by card/IRIS'}</div>
              <div className="t-h2" style={{ fontFamily: 'var(--font-mono)', color: 'var(--mc-red)' }}>{fmtEUR(remaining, lang)}</div>
            </div>
          </div>
          <Keypad
            onKey={(k) => setCashPart(c => (c + k).slice(0, 5).replace(/^0+/,'') || k)}
            onDelete={() => setCashPart(c => c.slice(0,-1))}
            onClear={() => setCashPart('')}
            onSubmit={proceed}
            submitLabel={t.continue}
            canSubmit={cashAmt >= 1 && remaining >= 1}
          />
        </div>
      </div>
    </div>
  );
};
window.ScreenMixIntro = ScreenMixIntro;

const ScreenMixCash = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go } = window.AppState;
  const cashAmt = window.AppState.mixCash || 0;
  const [inserted, setInserted] = React.useState(0);
  const remaining = Math.max(0, cashAmt - inserted);

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <div className="t-label" style={{ color: 'var(--mc-red)', marginBottom: 12 }}>{t.mixCashStep}</div>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.cashInsert}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 40px' }}>{t.cashInsertSub}</p>

        <div style={{ background: 'var(--mc-ink)', color: '#fff', borderRadius: 32, padding: 56, marginBottom: 32 }}>
          <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{t.cashInserted} / {t.amount}</div>
          <div style={{ fontSize: 96, fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{fmtEUR(inserted, lang)} <span style={{ color: 'rgba(255,255,255,.4)', fontSize: 56 }}>/ {fmtEUR(cashAmt, lang)}</span></div>
          <div style={{ marginTop: 24, height: 16, background: 'rgba(255,255,255,.15)', borderRadius: 8, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${Math.min(100, (inserted / cashAmt) * 100)}%`, background: 'var(--success)', transition: 'width 240ms' }}/>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 32 }}>
          {[5,10,20,50,100].map(v => (
            <button key={v} className="btn btn--secondary" style={{ minHeight: 96, fontSize: 24 }} onClick={() => setInserted(i => i + v)}>€{v}</button>
          ))}
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--secondary" style={{ flex: '0 0 280px' }} onClick={() => go('cancelConfirm')}>{t.cancel}</button>
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('mixCard')} disabled={inserted < cashAmt}>
          <span style={{ flex: 1, textAlign: 'left' }}>{t.continue} → {t.mixCardStep}</span>
          <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenMixCash = ScreenMixCash;

const ScreenMixCard = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go } = window.AppState;
  const remaining = window.AppState.mixRemaining || 0;
  const [stage, setStage] = React.useState('insert');
  React.useEffect(() => {
    if (stage === 'insert') { const x = setTimeout(() => setStage('processing'), 3500); return () => clearTimeout(x); }
    if (stage === 'processing') { const x = setTimeout(() => go('success'), 2400); return () => clearTimeout(x); }
  }, [stage]);

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={4} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <div className="t-label" style={{ color: 'var(--mc-red)', marginBottom: 12 }}>{t.mixCardStep}</div>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{stage === 'insert' ? t.cardInsert : t.cardProcessing}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px' }}>{stage === 'insert' ? t.cardInsertSub : t.cardProcessingSub}</p>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40 }}>
          <div style={{ width: 600, height: 380, background: 'linear-gradient(135deg, #1a1a1a, #404040)', borderRadius: 32, padding: 48, color: '#fff', position: 'relative', boxShadow: 'var(--shadow-xl)' }}>
            <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>PAX IM30 · {lang === 'el' ? 'Υπόλοιπο για πληρωμή' : 'Remaining'}</div>
            <div style={{ position: 'absolute', bottom: 48, left: 48, right: 48 }}>
              <div style={{ fontSize: 64, fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{fmtEUR(remaining, lang)}</div>
              {stage === 'processing' && <div style={{ marginTop: 16 }} className="t-body"><span className="pulse-dots"><span/><span/><span/></span> {t.cardProcessing}</div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.ScreenMixCard = ScreenMixCard;

/* ============================================================
   SUCCESS + RECEIPT flow
   ============================================================ */
const ScreenSuccess = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go } = window.AppState;
  const amount = window.AppState.amount || 0;
  const txnId = React.useMemo(() => 'MC-' + new Date().getFullYear() + '-' + Math.floor(Math.random() * 900000 + 100000), []);
  window.AppState.txnId = txnId;

  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body" style={{ justifyContent: 'center' }}>
        <StatusPanel kind="success" icon="check" title={t.successTitle} sub={t.successSub}>
          <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 40, width: '100%', maxWidth: 1100, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div>
              <div className="t-label">{t.transactionId}</div>
              <div className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{txnId}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="t-label">{t.paidAmount}</div>
              <div className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{fmtEUR(amount, lang)}</div>
            </div>
          </div>
        </StatusPanel>
      </div>
      <div className="action-bar">
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('receiptChoice')}>
          <span style={{ flex: 1, textAlign: 'left' }}>{t.continue}</span>
          <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenSuccess = ScreenSuccess;

const ScreenReceiptChoice = () => {
  const t = useT();
  const { go } = window.AppState;
  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body">
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.receiptTitle}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px' }}>{t.receiptSub}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <OptionTile icon="mail" title={t.receiptEmail} sub={t.receiptEmailSub} onClick={() => go('receiptEmail')} badge={window.AppState.lang === 'el' ? 'Σύσταση' : 'Recommended'} />
          <OptionTile icon="printer" title={t.receiptPrint} sub={t.receiptPrintSub} onClick={() => go('receiptPrinted')} />
          <OptionTile icon="campus" title={t.receiptCampus} sub={t.receiptCampusSub} onClick={() => go('receiptPrinted')} />
          <OptionTile icon="x" title={t.receiptNone} sub={t.receiptNoneSub} onClick={() => go('attract')} />
        </div>
      </div>
    </div>
  );
};
window.ScreenReceiptChoice = ScreenReceiptChoice;

const ScreenReceiptEmail = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const [email, setEmail] = React.useState('');
  const [domain, setDomain] = React.useState('');
  const valid = /\S+@\S+\.\S+/.test(email + '@' + domain) && email.length > 1 && domain.length > 3;

  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.emailEnter}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px' }}>{t.emailEnterSub}</p>

        <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 40, marginBottom: 32 }}>
          <div className="code-display" style={{ fontSize: 40, justifyContent: 'flex-start' }}>
            <span style={{ color: email ? 'var(--mc-ink)' : 'var(--n-400)' }}>{email || 'name'}</span>
            <span style={{ color: 'var(--n-400)', margin: '0 8px' }}>@</span>
            <span style={{ color: domain ? 'var(--mc-ink)' : 'var(--n-400)' }}>{domain || 'domain.com'}</span>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          {['student.metropolitan.edu.gr', 'gmail.com', 'hotmail.com', 'yahoo.gr', 'outlook.com'].map(d => (
            <button key={d} className="btn-sm" onClick={() => setDomain(d)}>@{d}</button>
          ))}
        </div>

        <div style={{ marginTop: 'auto' }}>
          <div className="t-caption" style={{ marginBottom: 16 }}>
            {lang === 'el' ? 'Συμβουλή για demo: αγγίξτε ένα domain παραπάνω και ένα όνομα παρακάτω.' : 'Demo: tap a domain above and a name below.'}
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {['maria.papadopoulou', 'dimitris.k', 'guest', 'parent.123'].map(n => (
              <button key={n} className="btn-sm" onClick={() => setEmail(n)}>{n}</button>
            ))}
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--ghost" style={{ flex: '0 0 280px' }} onClick={() => go('emailFail')}>{lang === 'el' ? 'Demo: αποτυχία' : 'Demo: fail'}</button>
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('receiptSent')} disabled={!valid}>
          <span style={{ flex: 1, textAlign: 'left' }}>{lang === 'el' ? 'Αποστολή απόδειξης' : 'Send receipt'}</span>
          <span className="btn-arrow"><Icon name="mail" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenReceiptEmail = ScreenReceiptEmail;

const ReceiptCard = () => {
  const lang = window.AppState.lang;
  const amount = window.AppState.amount || 0;
  const txnId = window.AppState.txnId || 'MC-2026-000000';
  const t = useT();
  return (
    <div className="receipt" style={{ width: 700, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', fontWeight: 700, fontSize: 26, marginBottom: 8 }}>METROPOLITAN COLLEGE</div>
      <div style={{ textAlign: 'center', fontSize: 18, marginBottom: 24 }}>{lang === 'el' ? 'Αθήνα · Ακαδημίας 42' : 'Athens · Akadimias 42'}</div>
      <div className="receipt-divider"/>
      <div className="receipt-row"><span>{t.transactionId}</span><span>{txnId}</span></div>
      <div className="receipt-row"><span>{t.receivedAt}</span><span>27/04/2026 14:23</span></div>
      <div className="receipt-row"><span>{t.method}</span><span>{(window.AppState.method || 'card').toUpperCase()}</span></div>
      <div className="receipt-divider"/>
      <div className="receipt-row" style={{ fontSize: 28, fontWeight: 700 }}><span>{t.paidAmount}</span><span>{fmtEUR(amount, lang)}</span></div>
      <div className="receipt-divider"/>
      <div style={{ textAlign: 'center', fontSize: 14, color: 'var(--n-600)' }}>
        {lang === 'el' ? 'Δεν αποτελεί νόμιμο παραστατικό. Νόμιμο παραστατικό αποστέλλεται μέσω email.' : 'Not a legal document. The legal invoice is sent by email.'}
      </div>
    </div>
  );
};

const ScreenReceiptSent = () => {
  const t = useT();
  const { go } = window.AppState;
  React.useEffect(() => { const x = setTimeout(() => go('attract'), 6000); return () => clearTimeout(x); }, []);
  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body" style={{ justifyContent: 'center' }}>
        <StatusPanel kind="success" icon="mail" title={t.receiptSent} sub={window.AppState.lang === 'el' ? 'Ευχαριστούμε. Επαναφορά σε 6 δευτερόλεπτα…' : 'Thank you. Returning in 6 seconds…'}>
          <ReceiptCard />
        </StatusPanel>
      </div>
      <div className="action-bar">
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('attract')}>{t.done}</button>
      </div>
    </div>
  );
};
window.ScreenReceiptSent = ScreenReceiptSent;

const ScreenReceiptPrinted = () => {
  const t = useT();
  const { go } = window.AppState;
  React.useEffect(() => { const x = setTimeout(() => go('attract'), 6000); return () => clearTimeout(x); }, []);
  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body" style={{ justifyContent: 'center' }}>
        <StatusPanel kind="success" icon="printer" title={t.receiptPrinted} sub={window.AppState.lang === 'el' ? 'Παραλάβετε την απόδειξη από τη σχισμή κάτω από την οθόνη.' : 'Take your receipt from the slot below the screen.'}>
          <ReceiptCard />
        </StatusPanel>
      </div>
      <div className="action-bar">
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go('attract')}>{t.done}</button>
      </div>
    </div>
  );
};
window.ScreenReceiptPrinted = ScreenReceiptPrinted;

/* ============================================================
   EDGE CASES
   ============================================================ */
const SimpleStatusScreen = ({ kind, icon, titleKey, subKey, primary, secondary, dest1, dest2 }) => {
  const t = useT();
  const { go } = window.AppState;
  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body" style={{ justifyContent: 'center' }}>
        <StatusPanel kind={kind} icon={icon} title={t[titleKey]} sub={t[subKey]} />
      </div>
      <div className="action-bar">
        {secondary && <button className="btn btn--secondary" style={{ flex: 1 }} onClick={() => go(dest2)}>{secondary}</button>}
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => go(dest1)}>{primary}</button>
      </div>
    </div>
  );
};

const ScreenInvalidRF = () => {
  const t = useT();
  return <SimpleStatusScreen kind="error" icon="x" titleKey="invalidRF" subKey="invalidRFSub" primary={t.retry} dest1="guestScan" secondary={t.cancel} dest2="attract" />;
};
window.ScreenInvalidRF = ScreenInvalidRF;

const ScreenNoDues = () => {
  const t = useT();
  return <SimpleStatusScreen kind="success" icon="check" titleKey="noDues" subKey="noDuesSub" primary={t.done} dest1="attract" />;
};
window.ScreenNoDues = ScreenNoDues;

const ScreenCardDeclined = () => {
  const t = useT();
  return <SimpleStatusScreen kind="error" icon="x" titleKey="cardDeclined" subKey="cardDeclinedSub" primary={t.retry} dest1="payMethod" secondary={t.cancel} dest2="attract" />;
};
window.ScreenCardDeclined = ScreenCardDeclined;

const ScreenIrisExpired = () => {
  const t = useT();
  return <SimpleStatusScreen kind="warning" icon="clock" titleKey="irisExpired" subKey="irisExpiredSub" primary={t.irisGenerate} dest1="irisPay" secondary={t.cancel} dest2="payMethod" />;
};
window.ScreenIrisExpired = ScreenIrisExpired;

const ScreenFakeNote = () => {
  const t = useT();
  const { go } = window.AppState;
  React.useEffect(() => { const x = setTimeout(() => go('cashPay'), 5000); return () => clearTimeout(x); }, []);
  return <SimpleStatusScreen kind="warning" icon="banknote-x" titleKey="fakeNote" subKey="fakeNoteSub" primary={t.continue} dest1="cashPay" />;
};
window.ScreenFakeNote = ScreenFakeNote;

const ScreenInsufficientChange = () => {
  const t = useT();
  return <SimpleStatusScreen kind="warning" icon="alert" titleKey="insufficientChange" subKey="insufficientChangeSub" primary={t.cardInsert} dest1="cardPay" secondary={t.cancel} dest2="attract" />;
};
window.ScreenInsufficientChange = ScreenInsufficientChange;

const ScreenCashJam = () => {
  const t = useT();
  return <SimpleStatusScreen kind="error" icon="tools" titleKey="cashJam" subKey="cashJamSub" primary={t.done} dest1="attract" />;
};
window.ScreenCashJam = ScreenCashJam;

const ScreenEmailFail = () => {
  const t = useT();
  return <SimpleStatusScreen kind="error" icon="alert" titleKey="emailSendFail" subKey="emailSendFailSub" primary={t.retry} dest1="receiptEmail" secondary={t.receiptPrint} dest2="receiptPrinted" />;
};
window.ScreenEmailFail = ScreenEmailFail;

const ScreenSessionExpired = () => {
  const t = useT();
  return <SimpleStatusScreen kind="info" icon="clock" titleKey="sessionExpired" subKey="sessionExpiredSub" primary={t.done} dest1="attract" />;
};
window.ScreenSessionExpired = ScreenSessionExpired;

const ScreenClassterDown = () => {
  const t = useT();
  return <SimpleStatusScreen kind="error" icon="wifi-off" titleKey="classterDown" subKey="classterDownSub" primary={t.retry} dest1="identify" secondary={t.done} dest2="attract" />;
};
window.ScreenClassterDown = ScreenClassterDown;

/* ============================================================
   Cancel-confirmation modal
   ============================================================ */
const ScreenCancelConfirm = () => {
  const t = useT();
  const { go, back } = window.AppState;
  return (
    <div className="screen">
      <Header variant="minimal" hideLang />
      <div className="screen-body" style={{ justifyContent: 'center' }}>
        <StatusPanel kind="warning" icon="alert" title={t.cancelConfirm} sub={t.cancelConfirmSub} />
      </div>
      <div className="action-bar">
        <button className="btn btn--secondary" style={{ flex: 1 }} onClick={back}>{t.cancelNo}</button>
        <button className="btn btn--danger" style={{ flex: 1 }} onClick={() => go('attract')}>{t.cancelYes}</button>
      </div>
    </div>
  );
};
window.ScreenCancelConfirm = ScreenCancelConfirm;

/* ============================================================
   Inactivity-timeout warning (modal)
   ============================================================ */
const InactivityModal = ({ onKeep, onEnd, secs }) => {
  const t = useT();
  return (
    <Modal>
      <div className="status-icon warning" style={{ margin: '0 auto 32px' }}><Icon name="clock" size={104} stroke={2.5}/></div>
      <h2 className="t-h2" style={{ margin: '0 0 16px' }}>{t.timeoutTitle}</h2>
      <p className="t-body-lg t-muted" style={{ margin: '0 0 32px' }}>{t.timeoutSub}</p>
      <div style={{ fontSize: 80, fontWeight: 700, fontFamily: 'var(--font-mono)', color: 'var(--mc-red)', marginBottom: 32 }}>{secs}</div>
      <div className="btn-row">
        <button className="btn btn--secondary" onClick={onEnd}>{t.timeoutEnd}</button>
        <button className="btn btn--primary" onClick={onKeep}><span style={{ flex: 1, textAlign: 'left' }}>{t.timeoutKeep}</span><span className="btn-arrow"><Icon name="check" size={28}/></span></button>
      </div>
    </Modal>
  );
};
window.InactivityModal = InactivityModal;
