/* ───────────────────────────────────────────────────────────
   IbanTelecom.jsx — Opérateur « Téléo Mobile » (Acte 2 — réutilisation)
   Demande identité (PID) + IBAN (attestation) via OpenID4VP, puis
   pré-remplit le mandat SEPA. Écrans : plan · request (QR) · verifying · done
   Rendu DANS un <ChromeWindow> fourni par IbanApp.
   ─────────────────────────────────────────────────────────── */

const { Ic: ITIc, QRCode: ITQR, IIc: IT2, ibanAttestation: ITiban,
        TEL_OFFER: IToffer, TEL_IDENTITY_CLAIMS: ITclaims } = window;

function ITHeader() {
  return (
    <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 40px', height: 64, borderBottom: '1px solid var(--tel-line)', background: '#fff',
      position: 'sticky', top: 0, zIndex: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--tel-primary)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IT2.signal s={19} c="#fff" /></div>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.01em', color: 'var(--tel-ink)' }}>
          Téléo<span style={{ color: 'var(--tel-primary)' }}> Mobile</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, fontSize: 14, color: 'var(--tel-muted)', fontWeight: 600 }}>
        <span>Forfaits</span><span>Téléphones</span><span>Aide</span>
        <div style={{ width: 1, height: 20, background: 'var(--tel-line)' }} />
        <span style={{ color: 'var(--tel-primary)' }}>Mon compte</span>
      </div>
    </header>
  );
}

// — ÉCRAN offre / souscription —
function ITPlan({ onSubscribe }) {
  return (
    <div className="rise" style={{ padding: '40px 40px', maxWidth: 820, margin: '0 auto' }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999,
        background: 'var(--tel-soft)', color: 'var(--tel-primary)', fontSize: 12.5, fontWeight: 700, marginBottom: 18 }}>
        <IT2.sim s={15} c="var(--tel-primary)" /> Souscription 100 % en ligne · eSIM
      </div>
      <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-.02em', color: 'var(--tel-ink)', margin: '0 0 22px',
        lineHeight: 1.12, maxWidth: 560 }}>
        Activez votre nouvelle ligne mobile en quelques minutes.
      </h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr .9fr', gap: 22, alignItems: 'stretch' }}>
        {/* carte forfait */}
        <div style={{ borderRadius: 18, overflow: 'hidden', border: '1.5px solid var(--tel-primary)',
          boxShadow: '0 22px 50px -32px rgba(122,35,196,.6)' }}>
          <div style={{ background: 'linear-gradient(135deg,#7a23c4,#5c1796)', padding: '22px 24px', color: '#fff' }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.04em', opacity: .9 }}>{IToffer.plan}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
              <span style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-.02em' }}>{IToffer.price} €</span>
              <span style={{ fontSize: 14, opacity: .85 }}>/ mois</span>
            </div>
            <div style={{ fontSize: 12.5, opacity: .85, marginTop: 4 }}>{IToffer.commitment}</div>
          </div>
          <div style={{ padding: '18px 24px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {IToffer.perks.map(p => (
              <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 11, fontSize: 14, color: 'var(--tel-ink)' }}>
                <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--tel-soft)', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ITIc.check s={13} c="var(--tel-primary)" /></span>{p}
              </div>
            ))}
          </div>
        </div>

        {/* étapes souscription */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ borderRadius: 16, border: '1px solid var(--tel-line)', background: '#fff', padding: 20, flex: 1 }}>
            <div style={{ fontSize: 15.5, fontWeight: 800, color: 'var(--tel-ink)', marginBottom: 12 }}>
              Pour finaliser, nous avons besoin&nbsp;:
            </div>
            {[[<ITIc.shield s={18} c="var(--tel-primary)" />, 'De votre identité', 'Vérification d\'âge et état civil'],
              [<IT2.doc s={18} c="var(--tel-primary)" />, 'De votre IBAN', 'Pour le prélèvement mensuel (mandat SEPA)']]
              .map(([ic, t, d], i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '10px 0',
                borderTop: i === 0 ? 'none' : '1px solid var(--tel-line)' }}>
                <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--tel-soft)', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{ic}</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--tel-ink)' }}>{t}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--tel-muted)', marginTop: 1 }}>{d}</div>
                </div>
              </div>
            ))}
            <div style={{ marginTop: 12, padding: '11px 13px', borderRadius: 10, background: 'var(--tel-soft)',
              fontSize: 12.5, color: 'var(--tel-primary)', fontWeight: 600, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <IT2.wallet s={16} c="var(--tel-primary)" />
              <span>Tout se fait via votre portefeuille : le <strong>mandat SEPA est signé automatiquement</strong> grâce à votre identité (PID) — aucune ressaisie, aucun RIB à joindre.</span>
            </div>
          </div>
          <ITBtn onClick={onSubscribe} icon full>Souscrire avec mon portefeuille</ITBtn>
        </div>
      </div>
    </div>
  );
}

// — ÉCRAN demande OpenID4VP (QR) —
function ITRequest({ walletStage }) {
  const map = {
    pending: { t: 'En attente', d: 'Scannez ce code avec ID Wallet.', pulse: false },
    consent: { t: 'Demande reçue', d: 'Validez le partage de votre identité et de votre IBAN.', pulse: true },
    auth:    { t: 'Authentification', d: 'Confirmez votre code personnel sur le téléphone…', pulse: true },
  };
  const s = map[walletStage] || map.pending;
  return (
    <div className="rise" style={{ padding: '40px 40px', maxWidth: 760, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--tel-primary)', letterSpacing: '.04em',
          textTransform: 'uppercase', marginBottom: 12 }}>Identité & IBAN</div>
        <h2 style={{ fontSize: 25, fontWeight: 800, color: 'var(--tel-ink)', margin: '0 0 14px', letterSpacing: '-.01em' }}>
          Justifiez votre identité et votre IBAN
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '0 0 22px' }}>
          {[['Identité', 'Nom, prénom, date de naissance', <ITIc.shield s={16} c="var(--tel-primary)" />],
            ['IBAN', 'Attestation de compte bancaire signée', <IT2.doc s={16} c="var(--tel-primary)" />]]
            .map(([t, d, ic]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px',
              borderRadius: 11, border: '1px solid var(--tel-line)', background: '#fff' }}>
              <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--tel-soft)', flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{ic}</span>
              <div><span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--tel-ink)' }}>{t}</span>
                <span style={{ fontSize: 12.5, color: 'var(--tel-muted)' }}> · {d}</span></div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 11, padding: '12px 14px', borderRadius: 11,
          background: 'var(--tel-soft)', border: '1px solid var(--tel-line)', margin: '0 0 18px' }}>
          <span style={{ width: 30, height: 30, borderRadius: 8, background: '#fff', flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <ITIc.check s={16} c="var(--tel-primary)" /></span>
          <div style={{ fontSize: 12.5, color: 'var(--tel-ink)', lineHeight: 1.45 }}>
            <strong>Mandat SEPA signé automatiquement.</strong> Votre identité (PID) sert de signature
            électronique : le mandat de prélèvement est établi sans formulaire ni RIB à joindre.
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 12,
          background: s.pulse ? 'var(--tel-soft)' : '#faf8fd', border: '1px solid var(--tel-line)' }}>
          <ITDots active={s.pulse} />
          <div>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--tel-ink)' }}>{s.t}</div>
            <div style={{ fontSize: 13, color: 'var(--tel-muted)' }}>{s.d}</div>
          </div>
        </div>
        <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--tel-faint)', fontFamily: 'monospace' }}>
          Protocole&nbsp;: OpenID4VP · presentation_definition: pid + iban_attestation
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
        <div style={{ padding: 16, borderRadius: 22, background: '#fff', border: '1px solid var(--tel-line)',
          boxShadow: '0 24px 50px -28px rgba(26,18,48,.45)' }}>
          <ITQR size={184} logo={<div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--tel-primary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IT2.signal s={15} c="#fff" /></div>} />
        </div>
        <div style={{ fontSize: 12, color: 'var(--tel-faint)' }}>Le code expire dans 04:58</div>
      </div>
    </div>
  );
}
function ITDots({ active }) {
  return (
    <div style={{ display: 'flex', gap: 5, flexShrink: 0 }}>
      {[0, 1, 2].map(i => (
        <span key={i} style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--tel-primary)',
          animation: active ? `pulse-soft 1.1s ${i * 0.18}s infinite` : 'none', opacity: active ? undefined : .35 }} />
      ))}
    </div>
  );
}

// — ÉCRAN vérification —
function ITVerifying() {
  return (
    <div className="rise" style={{ padding: '90px 40px', display: 'flex', flexDirection: 'column',
      alignItems: 'center', textAlign: 'center' }}>
      <div style={{ position: 'relative', width: 84, height: 84, marginBottom: 28 }}>
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '4px solid var(--tel-line)' }} />
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '4px solid var(--tel-primary)',
          borderTopColor: 'transparent', borderRightColor: 'transparent', animation: 'spin .9s linear infinite' }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--tel-primary)' }}><ITIc.shield s={32} /></div>
      </div>
      <h2 style={{ fontSize: 24, fontWeight: 800, color: 'var(--tel-ink)', margin: '0 0 10px' }}>
        Vérification des attestations…
      </h2>
      <p style={{ fontSize: 15, color: 'var(--tel-muted)', maxWidth: 440, margin: 0, lineHeight: 1.5 }}>
        Nous vérifions la signature de votre identité et de votre IBAN, ainsi que la validité des émetteurs (eIDAS2).
      </p>
    </div>
  );
}

// — ÉCRAN souscription confirmée —
function ITDone({ profile, onFinish }) {
  const iban = ITiban(profile);
  return (
    <div className="rise" style={{ padding: '36px 40px 32px', maxWidth: 760, margin: '0 auto',
      display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(21,122,82,.1)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <ITIc.check s={28} c="var(--tel-ok)" />
        </div>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--tel-ok)', letterSpacing: '.04em',
            textTransform: 'uppercase' }}>Souscription confirmée</div>
          <h2 style={{ fontSize: 24, fontWeight: 800, color: 'var(--tel-ink)', margin: '2px 0 0', letterSpacing: '-.01em' }}>
            Votre ligne {IToffer.brand} est prête
          </h2>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {/* identité vérifiée */}
        <div style={{ borderRadius: 16, border: '1px solid var(--tel-line)', background: '#fff', padding: 18 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--tel-muted)', letterSpacing: '.04em',
            textTransform: 'uppercase', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 7 }}>
            <ITIc.shield s={15} c="var(--tel-primary)" /> Titulaire vérifié
          </div>
          {ITclaims.filter(c => !c.isPhoto).map(c => (
            <div key={c.key} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '7px 0' }}>
              <span style={{ fontSize: 13, color: 'var(--tel-muted)' }}>{c.label}</span>
              <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--tel-ink)', display: 'inline-flex',
                alignItems: 'center', gap: 6 }}>{profile[c.key]}<ITIc.check s={13} c="var(--tel-ok)" /></span>
            </div>
          ))}
        </div>
        {/* IBAN / mandat SEPA */}
        <div style={{ borderRadius: 16, border: '1px solid var(--tel-line)', background: '#fff', padding: 18 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--tel-muted)', letterSpacing: '.04em',
            textTransform: 'uppercase', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 7 }}>
            <IT2.doc s={15} c="var(--tel-primary)" /> Mandat SEPA — prérempli
          </div>
          <div style={{ fontSize: 12, color: 'var(--tel-muted)' }}>IBAN du titulaire</div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--tel-ink)', fontFamily: 'monospace',
            marginTop: 3, letterSpacing: '.02em' }}>{iban.iban}</div>
          <div style={{ display: 'flex', gap: 16, marginTop: 12 }}>
            <div><div style={{ fontSize: 12, color: 'var(--tel-muted)' }}>BIC</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--tel-ink)', fontFamily: 'monospace' }}>{iban.bic}</div></div>
            <div><div style={{ fontSize: 12, color: 'var(--tel-muted)' }}>Prélèvement</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--tel-ink)' }}>{IToffer.price} € / mois</div></div>
          </div>
          <div style={{ marginTop: 12, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5,
            fontWeight: 700, color: 'var(--tel-ok)', background: 'rgba(21,122,82,.1)', padding: '5px 11px', borderRadius: 999 }}>
            <ITIc.check s={13} c="var(--tel-ok)" /> Mandat signé électroniquement
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 12,
        background: 'var(--tel-soft)', border: '1px solid var(--tel-line)' }}>
        <span style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--tel-primary)', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IT2.sim s={19} c="#fff" /></span>
        <div style={{ fontSize: 13.5, color: 'var(--tel-ink)', lineHeight: 1.45 }}>
          Votre <strong>eSIM</strong> est en cours d'activation. Aucun justificatif papier n'a été nécessaire —
          tout a été vérifié via votre portefeuille.
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <ITBtn onClick={onFinish} icon>Terminer la démonstration</ITBtn>
      </div>
    </div>
  );
}

function ITBtn({ children, onClick, icon, full }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: full ? '100%' : 'auto',
        padding: '14px 24px', border: 'none', whiteSpace: 'nowrap', borderRadius: 10, fontSize: 15.5, fontWeight: 700,
        color: '#fff', background: h ? 'var(--tel-primary-700)' : 'var(--tel-primary)',
        boxShadow: '0 8px 22px -10px rgba(122,35,196,.7)', cursor: 'pointer', transition: 'background .18s, transform .18s',
        transform: h ? 'translateY(-1px)' : 'none' }}>
      {children}{icon && <ITIc.arrow s={19} c="#fff" />}
    </button>
  );
}

function IbanTelecomApp({ stage, walletStage, profile, onSubscribe, onFinish }) {
  return (
    <div style={{ minHeight: '100%', background: 'var(--tel-bg)', display: 'flex', flexDirection: 'column', overflowX: 'hidden' }}>
      <ITHeader />
      <div style={{ flex: 1 }}>
        {stage === 'plan'      && <ITPlan onSubscribe={onSubscribe} />}
        {stage === 'request'   && <ITRequest walletStage={walletStage} />}
        {stage === 'verifying' && <ITVerifying />}
        {stage === 'done'      && <ITDone profile={profile} onFinish={onFinish} />}
      </div>
      <footer style={{ padding: '14px 40px', borderTop: '1px solid var(--tel-line)', background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: 'var(--tel-faint)' }}>
        <span>© Téléo Mobile — Service vérificateur eIDAS2 (relying party)</span>
        <span>OpenID4VP</span>
      </footer>
    </div>
  );
}

Object.assign(window, { IbanTelecomApp });