/* ───────────────────────────────────────────────────────────
   IbanBank.jsx — Banque Démo · espace client (Acte 1 — émission)
   Émet l'attestation IBAN dans le portefeuille via OpenID4VCI.
   Écrans : account · offer (QR) · issued
   Rendu DANS un <ChromeWindow> fourni par IbanApp.
   ─────────────────────────────────────────────────────────── */

const { Ic: IBIc, QRCode: IBQR, IIc: IB2, ibanAttestation: IBiban } = window;

function IBHeader() {
  return (
    <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 40px', height: 64, borderBottom: '1px solid var(--bank-line)', background: '#fff',
      position: 'sticky', top: 0, zIndex: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--bank-primary)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IBIc.bank s={19} c="#fff" /></div>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.01em', color: 'var(--bank-ink)' }}>
          Banque<span style={{ color: 'var(--bank-primary)' }}> Démo</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, fontSize: 14, color: 'var(--bank-muted)', fontWeight: 600 }}>
        <span>Comptes</span><span>Virements</span><span>Cartes</span>
        <div style={{ width: 1, height: 20, background: 'var(--bank-line)' }} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--bank-ink)' }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--bank-soft)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800,
            color: 'var(--bank-primary)' }}>EC</span>
          Espace client
        </span>
      </div>
    </header>
  );
}

// — ÉCRAN espace client : compte ouvert + proposition d'attestation IBAN —
function IBAccount({ profile, onIssue }) {
  const iban = IBiban(profile);
  return (
    <div className="rise" style={{ padding: '34px 40px 40px', maxWidth: 860, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, fontWeight: 700,
          color: 'var(--bank-ok)', background: 'rgba(21,122,82,.1)', padding: '5px 12px', borderRadius: 999 }}>
          <IBIc.check s={14} c="var(--bank-ok)" /> Compte ouvert
        </span>
      </div>
      <h1 style={{ fontSize: 27, fontWeight: 800, letterSpacing: '-.01em', color: 'var(--bank-ink)', margin: '4px 0 6px' }}>
        Bonjour {profile.prenom}, votre compte est actif.
      </h1>
      <p style={{ fontSize: 15.5, color: 'var(--bank-muted)', margin: '0 0 26px', maxWidth: 560, lineHeight: 1.55 }}>
        Votre compte courant a été ouvert à l'issue du parcours d'entrée en relation.
        Vous pouvez dès maintenant ajouter votre IBAN à votre portefeuille d'identité pour le réutiliser ailleurs.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 20, alignItems: 'stretch' }}>
        {/* carte compte */}
        <div style={{ borderRadius: 18, overflow: 'hidden', border: '1px solid var(--bank-line)',
          boxShadow: '0 20px 50px -34px rgba(14,23,38,.5)' }}>
          <div style={{ background: 'linear-gradient(135deg,#1657c8,#0f3f95)', padding: '20px 22px', color: '#fff' }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.06em', opacity: .85 }}>COMPTE COURANT</div>
            <div style={{ fontSize: 21, fontWeight: 800, marginTop: 10, fontFamily: 'monospace', letterSpacing: '.03em' }}>
              {iban.iban}
            </div>
            <div style={{ display: 'flex', gap: 26, marginTop: 16, fontSize: 12.5 }}>
              <div><div style={{ opacity: .75 }}>Titulaire</div><div style={{ fontWeight: 700, marginTop: 2 }}>{iban.titulaire}</div></div>
              <div><div style={{ opacity: .75 }}>BIC</div><div style={{ fontWeight: 700, marginTop: 2, fontFamily: 'monospace' }}>{iban.bic}</div></div>
            </div>
          </div>
          <div style={{ padding: '14px 22px', background: '#fff', display: 'flex', alignItems: 'center',
            justifyContent: 'space-between' }}>
            <span style={{ fontSize: 13, color: 'var(--bank-muted)' }}>Solde disponible</span>
            <span style={{ fontSize: 17, fontWeight: 800, color: 'var(--bank-ink)' }}>1 240,00 €</span>
          </div>
        </div>

        {/* action : émettre l'attestation IBAN */}
        <div style={{ borderRadius: 18, border: '1px solid var(--bank-line)', background: '#fff', padding: 22,
          display: 'flex', flexDirection: 'column' }}>
          <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--bank-soft)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
            <IB2.wallet s={24} c="var(--bank-primary)" />
          </div>
          <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--bank-ink)', lineHeight: 1.25 }}>
            Ajouter mon IBAN à mon portefeuille
          </div>
          <p style={{ fontSize: 13.5, color: 'var(--bank-muted)', margin: '8px 0 16px', lineHeight: 1.5, flex: 1 }}>
            Recevez une <strong>attestation signée</strong> de votre IBAN dans ID Wallet. Vous pourrez
            la présenter à tout service qui en a besoin, sans ressaisir vos coordonnées bancaires.
          </p>
          <IBBtn onClick={onIssue} icon>Obtenir mon attestation IBAN</IBBtn>
        </div>
      </div>
    </div>
  );
}

// — ÉCRAN offre d'attestation : QR OpenID4VCI —
function IBOffer({ walletStage }) {
  const map = {
    pending: { t: 'En attente', d: 'Scannez ce code avec ID Wallet pour recevoir l\'attestation.', pulse: false },
    offer:   { t: 'Offre reçue sur le téléphone', d: 'Validez l\'ajout de l\'attestation sur votre portefeuille.', pulse: true },
    auth:    { t: 'Signature en cours', d: 'Confirmez votre code personnel sur le téléphone…', pulse: true },
    adding:  { t: 'Émission de l\'attestation…', d: 'Délivrance sécurisée vers votre portefeuille.', 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(--bank-primary)', letterSpacing: '.04em',
          textTransform: 'uppercase', marginBottom: 12 }}>Émission d'attestation</div>
        <h2 style={{ fontSize: 25, fontWeight: 800, color: 'var(--bank-ink)', margin: '0 0 14px', letterSpacing: '-.01em' }}>
          Recevez votre attestation IBAN
        </h2>
        <ol style={{ margin: '0 0 22px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {['Ouvrez ID Wallet', 'Scannez le QR code ci-contre', 'Validez l\'ajout de l\'attestation']
            .map((x, i) => (
            <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: 'var(--bank-ink)' }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--bank-soft)',
                color: 'var(--bank-primary)', fontSize: 12, fontWeight: 700, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>{x}
            </li>
          ))}
        </ol>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 12,
          background: s.pulse ? 'rgba(22,87,200,.06)' : 'var(--bank-soft)', border: '1px solid var(--bank-line)' }}>
          <IBDots active={s.pulse} />
          <div>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--bank-ink)' }}>{s.t}</div>
            <div style={{ fontSize: 13, color: 'var(--bank-muted)' }}>{s.d}</div>
          </div>
        </div>
        <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--bank-faint)', fontFamily: 'monospace' }}>
          Protocole&nbsp;: OpenID4VCI · credential_offer · 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(--bank-line)',
          boxShadow: '0 24px 50px -28px rgba(14,23,38,.45)' }}>
          <IBQR size={184} logo={<div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--bank-primary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IB2.download s={15} c="#fff" /></div>} />
        </div>
        <div style={{ fontSize: 12, color: 'var(--bank-faint)' }}>Offre valable 05:00</div>
      </div>
    </div>
  );
}
function IBDots({ 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(--bank-primary)',
          animation: active ? `pulse-soft 1.1s ${i * 0.18}s infinite` : 'none', opacity: active ? undefined : .35 }} />
      ))}
    </div>
  );
}

// — ÉCRAN attestation émise —
function IBIssued({ profile, onContinue }) {
  const iban = IBiban(profile);
  return (
    <div className="rise" style={{ padding: '54px 40px', maxWidth: 620, margin: '0 auto',
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(21,122,82,.1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
        <IBIc.check s={34} c="var(--bank-ok)" />
      </div>
      <h2 style={{ fontSize: 25, fontWeight: 800, color: 'var(--bank-ink)', margin: '0 0 10px', letterSpacing: '-.01em' }}>
        Attestation IBAN émise
      </h2>
      <p style={{ fontSize: 15, color: 'var(--bank-muted)', margin: '0 0 24px', maxWidth: 460, lineHeight: 1.55 }}>
        Votre attestation a été délivrée et stockée dans votre portefeuille ID Wallet.
        Vous pouvez désormais la réutiliser auprès de tout service partenaire.
      </p>
      <div style={{ width: '100%', maxWidth: 420, borderRadius: 14, border: '1px solid var(--bank-line)',
        background: '#fff', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14, marginBottom: 26 }}>
        <div style={{ width: 42, height: 42, borderRadius: 11, background: 'linear-gradient(150deg,#1657c8,#0f3f95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <IBIc.bank s={22} c="#fff" />
        </div>
        <div style={{ textAlign: 'left', flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--bank-ink)' }}>Attestation de compte bancaire</div>
          <div style={{ fontSize: 12, fontFamily: 'monospace', color: 'var(--bank-muted)' }}>{iban.iban}</div>
        </div>
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--bank-ok)', background: 'rgba(21,122,82,.1)',
          padding: '4px 9px', borderRadius: 999, whiteSpace: 'nowrap' }}>Émise</span>
      </div>
      <IBBtn onClick={onContinue} icon>Étape suivante — réutiliser mon IBAN</IBBtn>
      <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--bank-faint)' }}>
        Acte 2 — souscription d'une ligne mobile chez un opérateur
      </div>
    </div>
  );
}

function IBBtn({ children, onClick, icon }) {
  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,
        padding: '13px 22px', border: 'none', whiteSpace: 'nowrap', borderRadius: 10, fontSize: 15.5, fontWeight: 700,
        color: '#fff', background: h ? 'var(--bank-primary-700)' : 'var(--bank-primary)',
        boxShadow: '0 8px 22px -10px rgba(22,87,200,.7)', cursor: 'pointer', transition: 'background .18s, transform .18s',
        transform: h ? 'translateY(-1px)' : 'none' }}>
      {children}{icon && <IBIc.arrow s={19} c="#fff" />}
    </button>
  );
}

function IbanBankApp({ stage, walletStage, profile, onIssue, onContinue }) {
  return (
    <div style={{ minHeight: '100%', background: 'var(--bank-bg)', display: 'flex', flexDirection: 'column', overflowX: 'hidden' }}>
      <IBHeader />
      <div style={{ flex: 1 }}>
        {stage === 'account' && <IBAccount profile={profile} onIssue={onIssue} />}
        {stage === 'offer'   && <IBOffer walletStage={walletStage} />}
        {stage === 'issued'  && <IBIssued profile={profile} onContinue={onContinue} />}
      </div>
      <footer style={{ padding: '14px 40px', borderTop: '1px solid var(--bank-line)', background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: 'var(--bank-faint)' }}>
        <span>© Banque Démo — Émetteur d'attestations eIDAS2 (QEAA)</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>OpenID4VCI</span>
      </footer>
    </div>
  );
}

Object.assign(window, { IbanBankApp });