// rd-result.jsx — paying, success (the ONE Shaka-gradient moment), and the
// connection-lost recovery screen.

function RdPaying({ market = 'br', live = true }) {
  const m = RD_MARKETS[market];
  return (
    <RdScreen label="Paying" bg={RD.dark} grain={false} style={{ color: '#fff' }}>
      <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 22, padding: 24 }}>
        {/* the shaka rocks while the rail does its thing */}
        <div style={{ animation: live ? 'rd-rock 0.9s ease-in-out infinite' : 'none' }}>
          <RdLogo size={92} />
        </div>
        <div className="rd-h1" style={{ fontSize: 24, color: '#fff' }}>Sending via {m.railName}…</div>
        <div className="rd-body" style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)', marginTop: -12 }}>Usually under 15 seconds</div>
      </div>
    </RdScreen>
  );
}

// ── success — teal burst from the thumb, amount stamps in at 800 ──
function RdSuccess({ market = 'br', live = true, data = null, onDone }) {
  const m = { ...RD_MARKETS[market], ...(data || {}) };
  const [receipt, setReceipt] = React.useState(false);
  const row = (k, v, strong) => (
    <div key={k} className="rd-num" style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: `1.5px solid ${RD.hairline}`, fontFamily: RD.ui, fontSize: 14.5 }}>
      <span style={{ color: RD.ink3 }}>{k}</span>
      <span style={{ fontWeight: strong ? 700 : 600, color: RD.ink }}>{v}</span>
    </div>
  );
  return (
    <RdScreen label="Paid" bg={RD.dark} grain={false}>
      {/* the burst: gradient circle grows from the pay-button position */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 70, width: 2100, height: 2100,
        marginLeft: -1050, marginBottom: -1050, borderRadius: '50%',
        background: 'var(--shaka)',
        animation: live ? 'rd-burst 420ms cubic-bezier(0.2, 0.8, 0.3, 1) both' : 'none',
      }}></div>
      <RdGrain on={true} opacity={0.05} />

      <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', padding: '76px 26px 42px' }}>
        {/* vendor-showable at arm's length */}
        <div style={{ animation: live ? 'rd-pop 300ms 260ms ease both' : 'none', width: 74, height: 74, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IcCheck size={40} color={RD.tealDeep} />
        </div>
        <div style={{ animation: live ? 'rd-stamp 260ms 360ms ease both' : 'none' }}>
          {/* accent layer: the local trust word */}
          <div className="rd-display" style={{ fontSize: 58, color: RD.tealInk, marginTop: 24 }}>{m.trustPaid} ✓</div>
          <div className="rd-display rd-num" style={{ fontSize: 88, color: '#FFFFFF', marginTop: 12, textShadow: '0 1px 0 rgba(4,56,44,0.25)' }}>{m.amountLocal}</div>
        </div>
        <div style={{ animation: live ? 'rd-fade 240ms 520ms ease both' : 'none' }}>
          <div className="rd-h3" style={{ fontSize: 18, color: RD.tealInk, marginTop: 16 }}>to {m.vendor}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
            <span className="rd-body rd-num" style={{ fontSize: 14.5, color: RD.tealInk }}>Today 14:32 · via</span>
            <RdRailSlot market={market} h={13} style={{ padding: '4px 9px', border: 'none' }} />
          </div>
        </div>

        <div style={{ flex: 1 }}></div>

        <div style={{ animation: live ? 'rd-rise 260ms 620ms ease both' : 'none' }}>
          {/* success doubles as the receipt */}
          {receipt && (
            <div style={{ background: RD.paperHi, borderRadius: 'var(--r-card)', padding: '8px 18px 4px', marginBottom: 14 }}>
              {row('Paid from balance', m.amountGbp)}
              {row('GrinGo rate', m.rateLine)}
              {row('Fee', m.fee || '£0.00')}
              {row('New balance', m.balanceAfter, true)}
              <div className="rd-num" style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', fontFamily: RD.ui, fontSize: 14.5 }}>
                <span style={{ color: RD.ink3 }}>{m.railName} ID</span>
                <span style={{ fontWeight: 600, color: RD.ink2 }}>{m.railId}</span>
              </div>
            </div>
          )}
          <div style={{ display: 'flex', gap: 10 }}>
            <RdButton kind="onGradient" onClick={() => setReceipt(r => !r)} style={{ minHeight: 60, fontSize: 17, flex: 1 }}
              icon={<IcReceipt size={20} color={RD.tealInk} />}>{receipt ? 'Hide receipt' : 'Receipt'}</RdButton>
            <RdButton kind="ink" onClick={onDone} style={{ minHeight: 60, fontSize: 17, flex: 1 }}>Done</RdButton>
          </div>
        </div>
      </div>
    </RdScreen>
  );
}

// ── connection lost mid-payment — calm, specific, money-is-safe first ──
function RdOffline({ market = 'br', live = true, grain = true, onRetry, onCancel }) {
  const m = RD_MARKETS[market];
  return (
    <RdScreen label="Connection lost" grain={grain}>
      <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', padding: '96px 26px 42px' }}>
        <div style={{
          width: 66, height: 66, borderRadius: 'var(--r-card)', border: `2px solid ${RD.coral}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: RD.coral,
          animation: live ? 'rd-pop 260ms ease both' : 'none',
        }}><IcWifiOff size={32} /></div>

        <div className="rd-h1" style={{ fontSize: 32, color: RD.ink, marginTop: 26 }}>Connection dropped</div>
        <div className="rd-body" style={{ fontSize: 16.5, color: RD.ink2, marginTop: 12, maxWidth: 320 }}>
          The payment didn't go through, and nothing left your balance.
        </div>

        {/* exact state — no ambiguity about the money */}
        <div style={{ marginTop: 24, background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)', padding: '16px 18px' }}>
          <div className="rd-label" style={{ color: RD.ink3 }}>Payment status</div>
          <div className="rd-h3 rd-num" style={{ fontSize: 16, color: RD.ink, marginTop: 8, display: 'flex', alignItems: 'center', gap: 9 }}>
            <IcCheck size={17} color={RD.tealDeep} />{m.amountGbp} still in your balance
          </div>
          <div className="rd-body" style={{ fontSize: 14, color: RD.ink2, marginTop: 6 }}>
            {m.vendor} hasn't been paid yet. We'll retry the moment your signal returns, or tap retry now.
          </div>
        </div>

        <div style={{ flex: 1 }}></div>

        <RdButton kind="primary" onClick={onRetry} style={{ minHeight: 68 }}
          icon={<IcRefresh size={22} color={RD.tealInk} />}>Try again</RdButton>
        <div className="rd-body" style={{ fontSize: 13.5, color: RD.ink3, textAlign: 'center', marginTop: 12 }}>
          Retrying automatically when you're back online
        </div>
        <RdButton kind="ghost" onClick={onCancel} style={{ marginTop: 2 }}>I'll pay another way</RdButton>
      </div>
    </RdScreen>
  );
}

Object.assign(window, { RdPaying, RdSuccess, RdOffline });