// rd-confirm.jsx — the trust moment. Frozen scan on top, paper sheet with
// the FX line. Rail-specific marks live only in the bounded slot.

function RdConfirm({ market = 'br', live = true, state = 'ok', grain = true, data = null, onPay, onCancel, onRescan, onLoad }) {
  const m = { ...RD_MARKETS[market], ...(data || {}) };

  // insufficient balance — recovery is one tap into Load, code stays valid
  if (state === 'short') {
    return (
      <RdScreen label="Confirm — balance too low" bg={RD.dark} grain={false}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 60% at 50% 20%, #12241D 0%, #071410 70%)' }}></div>
        <div style={{ position: 'absolute', top: 68, left: 0, right: 0, display: 'flex', justifyContent: 'center', opacity: 0.85 }}>
          <div style={{ borderRadius: 'var(--r-chip)', overflow: 'hidden', outline: `4px solid ${RD.teal}` }}><RdFauxQr size={104} /></div>
        </div>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 196, background: RD.paper, borderRadius: 'var(--r-sheet)', overflow: 'hidden', animation: live ? 'rd-sheet 190ms cubic-bezier(0.2, 0.9, 0.3, 1) both' : 'none' }}>
          <RdGrain on={grain} />
          <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', padding: '30px 24px 42px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{ width: 48, height: 48, borderRadius: 'var(--r-chip)', background: RD.ink, color: RD.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: RD.disp, fontWeight: 800, fontSize: 17 }}>{m.vendorInitials}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="rd-h1" style={{ fontSize: 20, color: RD.ink }}>{m.vendor}</div>
                <div className="rd-body" style={{ fontSize: 13.5, color: RD.ink3, marginTop: 2 }}>{m.vendorSub}</div>
              </div>
              <RdRailSlot market={market} h={15} />
            </div>
            <div className="rd-display rd-num" style={{ fontSize: 62, color: RD.ink, marginTop: 30 }}>{m.amountLocal}</div>
            <div style={{ marginTop: 24, background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)', padding: '16px 18px' }}>
              <div className="rd-h3" style={{ fontSize: 16, color: RD.ink, display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: RD.coral, flexShrink: 0 }}></span>Not enough balance
              </div>
              <div className="rd-body rd-num" style={{ fontSize: 14.5, color: RD.ink2, marginTop: 7 }}>
                This needs {m.amountGbp} and you have £1.80. Top up from Monzo in seconds; the vendor's code will still be here.
              </div>
            </div>
            <div style={{ flex: 1 }}></div>
            <RdButton kind="primary" onClick={onLoad} style={{ minHeight: 68 }} icon={<IcPlus size={21} color={RD.tealInk} />}>Top up</RdButton>
            <RdButton kind="ghost" onClick={onCancel} style={{ marginTop: 8 }}>Cancel</RdButton>
          </div>
        </div>
      </RdScreen>
    );
  }

  return (
    <RdScreen label={'Confirm — ' + m.railName} bg={RD.dark} grain={false}>
      {/* frozen camera capture */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 60% at 50% 20%, #12241D 0%, #071410 70%)' }}></div>
      <div style={{ position: 'absolute', top: 68, left: 0, right: 0, display: 'flex', justifyContent: 'center', opacity: 0.85 }}>
        {m.keyEntry ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '13px 18px', background: 'rgba(255,255,255,0.09)', border: '1.5px solid rgba(255,255,255,0.3)', borderRadius: 'var(--r-chip)', color: '#fff', fontFamily: RD.ui, fontWeight: 600, fontSize: 15 }}>
            <IcKeypad size={17} color="#fff" />{m.keyEntry}
          </div>
        ) : (
          <div style={{ borderRadius: 'var(--r-chip)', overflow: 'hidden', outline: `4px solid ${RD.teal}` }}>
            <RdFauxQr size={104} />
          </div>
        )}
      </div>

      {/* paper sheet — the shaka cut on the top edge */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, top: 196,
        background: RD.paper, borderRadius: 'var(--r-sheet)', overflow: 'hidden',
        animation: live ? 'rd-sheet 190ms cubic-bezier(0.2, 0.9, 0.3, 1) both' : 'none',
      }}>
        <RdGrain on={grain} />
        {state === 'ok' ? (
          <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', padding: '30px 24px 42px' }}>
            {/* vendor + rail slot */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 'var(--r-chip)', background: RD.ink, color: RD.paper,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: RD.disp, fontWeight: 800, fontSize: 17,
              }}>{m.vendorInitials}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="rd-h1" style={{ fontSize: 20, color: RD.ink, display: 'flex', alignItems: 'center', gap: 7 }}>
                  {m.vendor}
                  <span style={{ display: 'inline-flex', width: 18, height: 18, borderRadius: '50%', background: RD.teal, alignItems: 'center', justifyContent: 'center' }}>
                    <IcCheck size={11} color={RD.tealInk} />
                  </span>
                </div>
                <div className="rd-body" style={{ fontSize: 13.5, color: RD.ink3, marginTop: 2 }}>{m.vendorSub}</div>
              </div>
              <RdRailSlot market={market} h={15} />
            </div>

            {/* amount — 800 display, local currency leads */}
            <div style={{ marginTop: 30 }}>
              <div className="rd-display rd-num" style={{ fontSize: 62, color: RD.ink }}>{m.amountLocal}</div>
              <div className="rd-body rd-num" style={{ fontSize: 15, color: RD.ink2, marginTop: 8 }}>{m.amountGbp} from your balance</div>
            </div>

            {/* THE one-line FX + fee breakdown */}
            <RdFxLine m={m} style={{ marginTop: 24 }} />

            <div className="rd-body rd-num" style={{ fontSize: 13.5, color: RD.ink3, marginTop: 12, display: 'flex', justifyContent: 'space-between' }}>
              <span>GrinGo fee</span><span style={{ fontWeight: 600, color: RD.tealDeep }}>{m.fee || '£0.00'}</span>
            </div>
            <div className="rd-body rd-num" style={{ fontSize: 13.5, color: RD.ink3, marginTop: 8, display: 'flex', justifyContent: 'space-between' }}>
              <span>Balance after</span><span style={{ fontWeight: 600, color: RD.ink2 }}>{m.balanceAfter}</span>
            </div>

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

            {/* slide to pay — deliberate, one thumb */}
            <RdSlidePay label={'Slide to pay ' + m.amountLocal} onComplete={onPay} />
            <div className="rd-body" style={{ fontSize: 13.5, color: RD.ink3, textAlign: 'center', marginTop: 12 }}>{m.trustConfirm}</div>
            <RdButton kind="ghost" onClick={onCancel} style={{ marginTop: 2 }}>Cancel</RdButton>
          </div>
        ) : (
          /* expired key — calm, specific, coral only on the signal */
          <div style={{ position: 'relative', zIndex: 2, height: '100%', display: 'flex', flexDirection: 'column', padding: '38px 24px 42px' }}>
            <div style={{
              width: 62, height: 62, borderRadius: 'var(--r-card)', border: `2px solid ${RD.coral}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: RD.coral,
            }}><IcClockEnd size={30} /></div>
            <div className="rd-h1" style={{ fontSize: 28, color: RD.ink, marginTop: 22 }}>This {m.railName} code expired</div>
            <div className="rd-body" style={{ fontSize: 16, color: RD.ink2, marginTop: 10, maxWidth: 310 }}>
              {m.railName} codes only live for a few minutes. Ask the vendor to make a fresh one. It takes them seconds.
            </div>
            <div className="rd-body" style={{ fontSize: 14, color: RD.ink2, marginTop: 18, padding: '13px 16px', background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)', display: 'flex', gap: 10, alignItems: 'center' }}>
              <IcCheck size={17} color={RD.tealDeep} />Nothing was charged. Your balance is untouched.
            </div>
            <div style={{ flex: 1 }}></div>
            <RdButton kind="primary" onClick={onRescan} style={{ minHeight: 68 }}
              icon={<IcScan size={22} color={RD.tealInk} />}>Scan the new code</RdButton>
            <RdButton kind="ghost" onClick={onCancel} style={{ marginTop: 8 }}>Back to home</RdButton>
          </div>
        )}
      </div>
    </RdScreen>
  );
}

Object.assign(window, { RdConfirm });
