// rd-home.jsx — Home. Paper-light, balance huge, scan is the thumb-zone hero.

function RdActivityRow({ Icon, Flag, name, place, local, secondary, positive = false, last = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '15px 0',
      borderBottom: last ? 'none' : `1.5px solid ${RD.hairline}`,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 'var(--r-chip)', background: RD.paperHi,
        border: `1.5px solid ${RD.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: RD.ink,
      }}><Icon size={21} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="rd-h3" style={{ fontSize: 16, color: RD.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        <div className="rd-body" style={{ fontSize: 13, color: RD.ink3, display: 'flex', alignItems: 'center', gap: 6 }}>{Flag && <Flag w={15} />}{place}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="rd-num" style={{ fontFamily: RD.ui, fontWeight: 700, fontSize: 16, color: positive ? RD.tealDeep : RD.ink }}>{local}</div>
        <div className="rd-num" style={{ fontSize: 13, color: RD.ink3, marginTop: 1 }}>{secondary}</div>
      </div>
    </div>
  );
}

// markets — every corridor GrinGo works in (or is coming to)
function RdMarketChip({ Flag, name, rail, Mark, soon }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', flexShrink: 0,
      background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-chip)',
    }}>
      <Flag w={17} />
      <span className="rd-h3" style={{ fontSize: 13.5, color: RD.ink, whiteSpace: 'nowrap' }}>{name}</span>
      {Mark ? <Mark h={12} /> : <span className="rd-num" style={{ fontFamily: RD.ui, fontWeight: 600, fontSize: 12, color: soon ? RD.ink3 : RD.ink2, whiteSpace: 'nowrap' }}>{rail}</span>}
      {soon && <span className="rd-label" style={{ fontSize: 9.5, color: RD.sunset, letterSpacing: '0.07em' }}>Soon</span>}
    </div>
  );
}

function RdHome({ onScan, onLoad, onReceive, onSend, onProfile, onHistory, grain = true, live = true, pixApproved = true, toast = false }) {
  return (
    <RdScreen label="Home" grain={grain}>
      <div className="no-scrollbar" style={{ flex: 1, overflowY: live ? 'auto' : 'hidden', padding: '68px 22px 130px' }}>

        {/* header — full wordmark, same mark as onboarding */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <img src="assets/gringo-wordmark-dark.svg" alt="GrinGo Pay" style={{ height: 30, width: 'auto', flex: '0 0 auto' }} />
          <div style={{ flex: 1 }}></div>
          <button onClick={onProfile} aria-label="Profile" style={{
            width: 40, height: 40, borderRadius: '50%', background: RD.ink, color: RD.paper,
            display: 'flex', alignItems: 'center', justifyContent: 'center', border: 'none', cursor: 'pointer',
            fontFamily: RD.ui, fontWeight: 600, fontSize: 14,
          }}>GC</button>
        </div>

        {/* balance — 800 display against 400 body, nothing in between */}
        <div style={{ marginTop: 40 }}>
          <div className="rd-label" style={{ color: RD.ink2 }}>Balance</div>
          <div className="rd-display rd-num" style={{ fontSize: 68, color: RD.ink, marginTop: 8 }}>
            £142<span style={{ fontSize: 40 }}>.50</span>
          </div>
          <div className="rd-body" style={{ fontSize: 14, color: RD.ink3, marginTop: 6 }}>Your money stays in pounds until you spend.</div>
        </div>

        {/* load + receive + send */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 22 }}>
          <button onClick={onLoad} style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '11px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-btn)',
            fontFamily: RD.ui, fontWeight: 600, fontSize: 15, color: RD.ink, cursor: 'pointer',
          }}><IcPlus size={17} />Top up</button>
          <button onClick={onSend} style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '11px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-btn)',
            fontFamily: RD.ui, fontWeight: 600, fontSize: 15, color: RD.ink, cursor: 'pointer',
          }}><IcArrowUpR size={17} />Send</button>
          <button onClick={onReceive} style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '11px 18px',
            background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-btn)',
            fontFamily: RD.ui, fontWeight: 600, fontSize: 15, color: RD.ink, cursor: 'pointer',
          }}><IcReceipt size={17} />Receive</button>
        </div>

        {/* PIX approval pending — appears right after first-run verification */}
        {!pixApproved && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 24, padding: '14px 16px', background: RD.paperHi, border: `1.5px solid ${RD.hairline}`, borderRadius: 'var(--r-card)' }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', border: '3px solid rgba(10,43,34,0.14)', borderTopColor: RD.tealDeep, animation: 'rd-spin 900ms linear infinite', flexShrink: 0 }}></div>
            <div style={{ minWidth: 0 }}>
              <div className="rd-h3" style={{ fontSize: 14.5, color: RD.ink }}>Setting up your PIX access</div>
              <div className="rd-body" style={{ fontSize: 13, color: RD.ink3 }}>Usually under a minute. We’ll notify you.</div>
            </div>
          </div>
        )}

        <div className="rd-label" style={{ color: RD.ink3, marginTop: 26 }}>Pay like a local in</div>

        {/* markets — one line, drag or swipe to see what's coming */}
        <RdChipRail bleed={22} style={{ marginTop: 12 }}>
          <RdMarketChips />
        </RdChipRail>

        {/* activity */}
        <div style={{ marginTop: 34 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
            <div className="rd-label" style={{ color: RD.ink3 }}>Today</div>
            <button onClick={onHistory} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: RD.ui, fontWeight: 600, fontSize: 13.5, color: RD.tealDeep, padding: 0 }}>See all</button>
          </div>
          <RdActivityRow Icon={IcCup} Flag={FlagBR} name="Água de coco" place="Quiosque Dois Irmãos" local="−£1.70" secondary="R$ 12,00" />
          <RdActivityRow Icon={IcBowl} Flag={FlagBR} name="Açaí na tigela" place="Barraca da Lú" local="−£3.40" secondary="R$ 24,00" last={true} />
          <div className="rd-label" style={{ color: RD.ink3, margin: '20px 0 4px' }}>Yesterday</div>
          <RdActivityRow Icon={IcMoto} Flag={FlagBR} name="Moto táxi" place="Praia do Forte" local="−£2.13" secondary="R$ 15,00" />
          <RdActivityRow Icon={IcBank} name="Balance loaded" place="Bank transfer" local="+£150.00" secondary="instant" positive={true} last={true} />
        </div>
      </div>

      {/* hero action — thumb zone, one tap, always */}
      <div style={{ position: 'absolute', left: 18, right: 18, bottom: 44, zIndex: 3 }}>
        <RdButton kind="primary" onClick={pixApproved ? onScan : undefined}
          style={{ minHeight: 76, fontSize: 22, ...(pixApproved ? {} : { background: '#BFD8CE', color: 'rgba(4,56,44,0.55)', cursor: 'default' }) }}
          icon={<IcScan size={26} color={pixApproved ? RD.tealInk : 'rgba(4,56,44,0.55)'} />}>
          Scan to pay
        </RdButton>
      </div>
      {/* paper fade so list scrolls under the button cleanly */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 140, zIndex: 2, pointerEvents: 'none', background: 'linear-gradient(180deg, rgba(244,241,232,0) 0%, var(--paper) 62%)' }}></div>

      <RdToast show={toast} title="PIX approved" body="You’re live in Brazil. Scan any code and pay like a local." />
    </RdScreen>
  );
}

Object.assign(window, { RdHome, RdActivityRow, RdMarketChip });