// rd-money.jsx — top up (GBP, no conversion), receive/refund QR, send by PIX key

// ── load: GBP in, GBP held. No quote, no rate, no conversion. ──
function RdLoad({ grain = true, live = true, staticPhase, onBack, onDone }) {
  const [phase, setPhase] = React.useState(staticPhase || 'amount'); // amount | done
  const [cents, setCents] = React.useState(12000);
  const timer = React.useRef(null);
  React.useEffect(() => () => clearTimeout(timer.current), []);
  const key = (k) => setCents(c => k === 'del' ? Math.floor(c / 10) : Math.min(c * 10 + Number(k), 99999999));

  if (phase === 'done') {
    return (
      <RdScreen label="Loaded" grain={grain}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '110px 26px 42px' }}>
          <div style={{ width: 74, height: 74, borderRadius: '50%', background: RD.teal, display: 'flex', alignItems: 'center', justifyContent: 'center', animation: live ? 'rd-pop 300ms ease both' : 'none' }}>
            <IcCheck size={40} color={RD.tealInk} />
          </div>
          <div className="rd-display rd-num" style={{ fontSize: 62, color: RD.tealDeep, marginTop: 26 }}>+{fmtGBP(cents)}</div>
          <div className="rd-h3" style={{ fontSize: 18, color: RD.ink, marginTop: 8 }}>Added to your balance</div>
          <div className="rd-body" style={{ fontSize: 15, color: RD.ink2, marginTop: 10 }}>Instant via Open Banking. Nothing pending.</div>
          <div style={{ flex: 1 }}></div>
          <RdButton kind="ink" onClick={onDone} style={{ minHeight: 64 }}>Done</RdButton>
        </div>
      </RdScreen>
    );
  }

  return (
    <RdScreen label="Load" grain={grain}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '66px 24px 42px' }}>
        <RdTopBar title="Top up" onBack={onBack} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="rd-label" style={{ color: RD.ink3 }}>From Monzo</div>
          <div className="rd-display rd-num" style={{ fontSize: 64, color: RD.ink, marginTop: 8 }}>{fmtGBP(cents)}</div>
          <div className="rd-body" style={{ fontSize: 14.5, color: RD.ink2, marginTop: 16, paddingTop: 14, borderTop: `1.5px solid ${RD.hairline}`, display: 'flex', alignItems: 'center', gap: 7 }}>
            <IcCheck size={15} color={RD.tealDeep} />No conversion, no fee. £ in, £ held.
          </div>
        </div>
        <RdKeypad onKey={key} />
        <RdButton kind="primary" onClick={() => { if (!live) return; setPhase('done'); }} style={{ minHeight: 66, marginTop: 14 }}>
          Top up {fmtGBP(cents)}
        </RdButton>
      </div>
    </RdScreen>
  );
}

// ── receive: your key as a QR — refunds land in your balance ──
function RdReceive({ grain = true, onBack }) {
  const [copied, setCopied] = React.useState(false);
  return (
    <RdScreen label="Receive" grain={grain}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '66px 24px 42px' }}>
        <RdTopBar title="Receive" onBack={onBack} right={<RdRailSlot market="br" h={14} />} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ padding: 18, background: '#fff', borderRadius: 'var(--r-card)', border: `1.5px solid ${RD.hairline}` }}>
            <RdFauxQr size={196} />
          </div>
          <div className="rd-h3" style={{ fontSize: 16, color: RD.ink, marginTop: 22 }}>Your PIX key</div>
          <button onClick={() => setCopied(true)} style={{
            display: 'flex', alignItems: 'center', gap: 9, marginTop: 10, padding: '12px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-chip)',
            fontFamily: RD.ui, fontWeight: 600, fontSize: 15, color: RD.ink, cursor: 'pointer',
          }}>
            gringo.me/george
            {copied ? <IcCheck size={17} color={RD.tealDeep} /> : <IcCopy size={17} color={RD.ink2} />}
          </button>
          <div className="rd-body" style={{ fontSize: 14, color: RD.ink2, marginTop: 18, textAlign: 'center', maxWidth: 280 }}>
            Vendors pay or refund this like any PIX key. It lands in your balance in pounds, converted at the GrinGo rate.
          </div>
        </div>
      </div>
    </RdScreen>
  );
}

// ── send: contact / PIX key picker → amount → shared confirm ──
const RD_CONTACTS = [
  { initials: 'MS', name: 'Maria Souza', sub: 'PIX key · Nubank', pixKey: 'maria.souza@nubank.br' },
  { initials: 'JT', name: 'João Turismo', sub: 'PIX key · Itaú', pixKey: 'joao.turismo@itau.com.br' },
  { initials: 'AL', name: 'Alice (roommate)', sub: 'PIX key · Nubank', pixKey: 'alice.dias@nubank.br' },
];

function RdSend({ grain = true, live = true, staticPhase, onBack, onReview }) {
  const [phase, setPhase] = React.useState(staticPhase || 'to'); // to | key | amount
  const [cents, setCents] = React.useState(4500);
  const [to, setTo] = React.useState(RD_CONTACTS[0]);
  const key = (k) => setCents(c => k === 'del' ? Math.floor(c / 10) : Math.min(c * 10 + Number(k), 99999999));

  if (phase === 'to') {
    return (
      <RdScreen label="Send — to" grain={grain}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '66px 24px 42px' }}>
          <RdTopBar title="Send" onBack={onBack} />
          {/* paste any PIX key */}
          <button onClick={() => { if (live) setPhase('key'); }} style={{
            display: 'flex', alignItems: 'center', gap: 12, marginTop: 22, padding: '17px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)',
            cursor: 'pointer', textAlign: 'left', width: '100%',
          }}>
            <IcKeypad size={20} color={RD.ink2} />
            <div style={{ flex: 1 }}>
              <div className="rd-h3" style={{ fontSize: 15.5, color: RD.ink }}>PIX key</div>
              <div className="rd-body" style={{ fontSize: 13.5, color: RD.ink3, marginTop: 2 }}>Phone, email, CPF, or random key</div>
            </div>
            <IcArrowUpR size={18} color={RD.ink3} />
          </button>

          <div className="rd-label" style={{ color: RD.ink3, margin: '26px 0 2px' }}>Contacts</div>
          {RD_CONTACTS.map((c, i) => (
            <button key={c.name} onClick={() => { if (!live) return; setTo(c); setPhase('amount'); }} style={{
              display: 'flex', alignItems: 'center', gap: 13, padding: '14px 0', width: '100%',
              background: 'none', border: 'none', borderBottom: i === RD_CONTACTS.length - 1 ? 'none' : `1.5px solid ${RD.hairline}`,
              cursor: 'pointer', textAlign: 'left',
            }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: RD.ink, color: RD.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: RD.disp, fontWeight: 800, fontSize: 15, flexShrink: 0 }}>{c.initials}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="rd-h3" style={{ fontSize: 16, color: RD.ink }}>{c.name}</div>
                <div className="rd-body rd-num" style={{ fontSize: 13, color: RD.ink3, marginTop: 1 }}>{c.sub}</div>
              </div>
              <span className="rd-label" style={{ fontSize: 10, color: RD.tealDeep }}>PIX</span>
            </button>
          ))}
          <div style={{ flex: 1 }}></div>
          <div className="rd-body" style={{ fontSize: 13, color: RD.ink3, textAlign: 'center' }}>PIX sends arrive in seconds, funded from your balance.</div>
        </div>
      </RdScreen>
    );
  }

  if (phase === 'key') {
    return (
      <RdScreen label="Send — key" grain={grain}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '66px 24px 42px' }}>
          <RdTopBar title="Pay a PIX key" onBack={() => setPhase('to')} right={<RdRailSlot market="br" h={14} />} />
          <div className="rd-body" style={{ fontSize: 15, color: RD.ink2, marginTop: 22 }}>Phone, email, CPF or random key. Paste whatever the vendor gives you.</div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginTop: 16, padding: '17px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)',
          }}>
            <IcKeypad size={19} color={RD.ink2} />
            <span className="rd-h3" style={{ fontSize: 16, color: RD.ink, flex: 1 }}>maria.souza@nubank.br</span>
            <span className="rd-label" style={{ fontSize: 10, color: RD.tealDeep }}>Pasted</span>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginTop: 14, padding: '13px 16px',
            border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)',
          }}>
            <IcCheck size={17} color={RD.tealDeep} />
            <span className="rd-body" style={{ fontSize: 14, color: RD.ink2 }}>Key belongs to <b style={{ color: RD.ink }}>Maria Souza</b> · Nubank</span>
          </div>
          <div style={{ flex: 1 }}></div>
          <RdButton kind="primary" onClick={() => { if (live) { setTo(RD_CONTACTS[0]); setPhase('amount'); } }} style={{ minHeight: 66 }}>Continue</RdButton>
        </div>
      </RdScreen>
    );
  }

  return (
    <RdScreen label="Send — amount" grain={grain}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '66px 24px 42px' }}>
        <RdTopBar title={to.name} onBack={() => setPhase('to')} right={<RdRailSlot market="br" h={14} />} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="rd-label" style={{ color: RD.ink3 }}>They receive</div>
          <div className="rd-display rd-num" style={{ fontSize: 64, color: RD.ink, marginTop: 8 }}>{fmtBRL(cents)}</div>
        </div>
        <RdKeypad onKey={key} />
        <RdButton kind="primary" onClick={() => onReview && onReview(cents, to)} style={{ minHeight: 66, marginTop: 14 }}>Review</RdButton>
      </div>
    </RdScreen>
  );
}

Object.assign(window, { RdLoad, RdReceive, RdSend });