// Moneta screens — set A: Onboarding, Wallet detail (with currency switcher),
// FX Convert (live keypad + 30s lock), Send (drag-to-confirm), Tx list.

const phoneStyles = {
  surface: (dark) => dark ? '#0B1614' : '#FAFBF9',
  card:    (dark) => dark ? '#142220' : '#FFFFFF',
  cardAlt: (dark) => dark ? '#1B2D2A' : '#F4F5F2',
  border:  (dark) => dark ? 'rgba(255,255,255,0.08)' : 'rgba(14,31,28,0.08)',
  text:    (dark) => dark ? '#F4F5F2' : '#0E1F1C',
  muted:   (dark) => dark ? 'rgba(244,245,242,0.55)' : 'rgba(14,31,28,0.55)',
  faint:   (dark) => dark ? 'rgba(244,245,242,0.35)' : 'rgba(14,31,28,0.4)',
};

// Currency symbol helpers
const SYM = { AED: 'AED ', USD: '$', GBP: '£', EUR: '€' };
function formatAmount(num, code) {
  const v = (typeof num === 'number') ? num : parseFloat(num) || 0;
  const s = v.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return `${SYM[code] || ''}${s}`;
}
function formatRaw(str) {
  // For keypad input — split integer/decimal, group thousands
  if (!str) return '0';
  const [int, dec] = str.split('.');
  const grouped = (int || '0').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return dec !== undefined ? `${grouped}.${dec}` : grouped;
}

function ScreenHeader({ dark, title, subtitle, leading, trailing, onBack }) {
  const wrappedLeading = leading ? (
    <div onClick={onBack || (()=>window.nav && window.nav('home'))} role="button" style={{ cursor:'pointer' }}>
      {leading}
    </div>
  ) : null;
  return (
    <div style={{ padding: '6px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {wrappedLeading}
        <div>
          <div style={{ fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 22, color: phoneStyles.text(dark), letterSpacing: '-0.02em' }}>{title}</div>
          {subtitle && <div style={{ fontSize: 12, color: phoneStyles.muted(dark), marginTop: 2 }}>{subtitle}</div>}
        </div>
      </div>
      {trailing}
    </div>
  );
}

function TabBar({ active = 'home', dark }) {
  const tabs = [
    { id:'home', label:'Home', icon:'home', route:'home' },
    { id:'fx',   label:'Convert', icon:'swap', route:'fx' },
    { id:'send', label:'Send', icon:'send', route:'beneficiaries' },
    { id:'tx',   label:'Activity', icon:'list', route:'tx-list' },
    { id:'more', label:'More', icon:'sliders', route:'settings' },
  ];
  const go = (r) => window.nav && window.nav(r);
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 64,
      background: dark ? '#0B1614' : '#FFFFFF',
      borderTop: `1px solid ${phoneStyles.border(dark)}`,
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around', padding: '8px 4px 0',
    }}>
      {tabs.map(t => {
        const isActive = t.id === active;
        const c = isActive ? 'var(--falcon-primary)' : phoneStyles.muted(dark);
        return (
          <div key={t.id} onClick={()=>go(t.route)} role="button" style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2, color: c, minWidth: 48, cursor:'pointer', userSelect:'none' }}>
            <Icon name={t.icon} size={18} sw={isActive ? 2 : 1.6}/>
            <div style={{ fontSize: 9, fontWeight: isActive ? 700 : 500, letterSpacing: 0.4, textTransform:'uppercase' }}>{t.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 1 · ONBOARDING / KYB — Continue advances kybStep
// ─────────────────────────────────────────────────────────────
function ScreenOnboarding({ dark }) {
  const kybStep = window.useAppStore(s => s.kybStep);
  const STEPS = [
    { n:1, title:'Company details',      sub:'Trade licence, registered address, sector' },
    { n:2, title:'Beneficial owners',    sub:'≥25% UBOs identified · 3 of 3 added' },
    { n:3, title:'Authorised signatory', sub:'Verify ID with selfie · takes ~2 minutes' },
    { n:4, title:'Source of funds',      sub:'Bank statements + 12-month projection' },
    { n:5, title:'Review & sign',        sub:'E-sign the master services agreement' },
  ];
  const onContinue = () => {
    if (kybStep >= 5) {
      window.appStore.set({ kybStep: 6 });
      window.appStore.showToast('Account opened — welcome to Moneta');
      window.nav('home');
    } else {
      window.appStore.set({ kybStep: kybStep + 1 });
    }
  };

  const Step = ({ n, title, sub, status }) => (
    <div style={{
      display:'flex', alignItems:'flex-start', gap: 14, padding: '14px 16px', borderRadius: 3,
      background: status==='active' ? (dark ? 'rgba(2,195,222,0.06)' : 'rgba(0,87,78,0.04)') : 'transparent',
      border: status==='active' ? `1px solid ${dark ? 'rgba(2,195,222,0.25)' : 'rgba(0,87,78,0.15)'}` : '1px solid transparent',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 2, flexShrink: 0,
        display:'flex', alignItems:'center', justifyContent:'center',
        background: status==='done' ? 'var(--falcon-primary)' : (status==='active' ? 'var(--falcon-primary)' : 'transparent'),
        color: (status==='done' || status==='active') ? 'var(--falcon-on-primary)' : phoneStyles.muted(dark),
        border: status==='pending' ? `1.5px dashed ${phoneStyles.faint(dark)}` : 'none',
        fontFamily:'Montserrat', fontWeight:700, fontSize: 13,
      }}>
        {status==='done' ? <Icon name="check" size={16} sw={2.4}/> : n}
      </div>
      <div style={{ flex:1, paddingTop: 4 }}>
        <div style={{ fontWeight:600, fontSize: 14, color: phoneStyles.text(dark) }}>{title}</div>
        <div style={{ fontSize: 12, color: phoneStyles.muted(dark), marginTop: 2, lineHeight: 1.45 }}>{sub}</div>
      </div>
      {status==='done' && <div style={{ fontSize: 11, color:'var(--falcon-primary)', fontWeight:600, paddingTop:6 }}>Verified</div>}
    </div>
  );

  const ctaLabel = kybStep >= 5 ? 'Sign & open account' : 'Continue verification';

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <div style={{ padding:'8px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--falcon-primary)' }}>Moneta · Onboarding · Step {Math.min(kybStep,5)} of 5</div>
        <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 28, color: phoneStyles.text(dark), marginTop: 6, letterSpacing:'-0.02em', lineHeight: 1.1 }}>
          Open your<br/>business account
        </div>
        <div style={{ fontSize: 13, color: phoneStyles.muted(dark), marginTop: 8, lineHeight: 1.5 }}>
          Complete KYB to unlock multi-currency wallets and FX. Most accounts go live within 48&nbsp;hours.
        </div>
      </div>

      <div style={{ padding: 16, marginTop: 16 }}>
        <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border: `1px solid ${phoneStyles.border(dark)}`, padding: 8 }}>
          {STEPS.map(s => {
            const status = s.n < kybStep ? 'done' : (s.n === kybStep ? 'active' : 'pending');
            return <Step key={s.n} n={s.n} title={s.title} sub={s.sub} status={status}/>;
          })}
        </div>
      </div>

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

      <div style={{ padding: '0 16px 28px' }}>
        <div style={{ fontSize: 11, color: phoneStyles.faint(dark), display:'flex', alignItems:'center', gap:6, marginBottom: 12 }}>
          <Icon name="shield" size={14} stroke={phoneStyles.faint(dark)}/>
          Regulated under ADGM · Moneta Worldwide DIFC
        </div>
        <button onClick={onContinue} style={{
          width:'100%', height: 52, borderRadius: 3, border: 0, cursor:'pointer',
          background:'var(--falcon-primary)', color:'var(--falcon-on-primary)',
          fontFamily:'Montserrat', fontWeight: 600, fontSize: 15, letterSpacing:'-0.01em',
          display:'flex', alignItems:'center', justifyContent:'center', gap: 8,
        }}>
          {ctaLabel} <Icon name="arrow-right" size={16} stroke="var(--falcon-on-primary)" sw={2.2}/>
        </button>
        <div onClick={()=>window.nav('home')} style={{ cursor:'pointer', textAlign:'center', marginTop: 12, fontSize: 12, color: phoneStyles.muted(dark) }}>
          Save & continue later
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · WALLET DETAIL — segmented currency switcher
// ─────────────────────────────────────────────────────────────
function ScreenWallet({ dark }) {
  const walletCurrency = window.useAppStore(s => s.walletCurrency);
  const wallets = window.useAppStore(s => s.wallets);
  const txList = window.useAppStore(s => s.txList);
  const hideBalances = window.useAppStore(s => s.settings.hideBalances);
  const w = wallets[walletCurrency];
  const setCurrency = (c) => window.appStore.set({ walletCurrency: c });

  // Different sparklines per currency, just for visual variety
  const SPARKS = {
    AED: "M0,30 L20,28 40,22 60,24 80,18 100,16 120,20 140,12 160,14 180,8 200,10 220,4",
    GBP: "M0,8 L20,12 40,10 60,18 80,16 100,22 120,20 140,26 160,22 180,28 200,24 220,28",
    USD: "M0,22 L20,18 40,20 60,14 80,18 100,12 120,16 140,10 160,14 180,8 200,12 220,6",
    EUR: "M0,18 L20,16 40,20 60,18 80,14 100,18 120,16 140,20 160,16 180,14 200,18 220,16",
  };
  const spark = SPARKS[walletCurrency];
  const otherCurrencies = ['AED','GBP','USD','EUR'].filter(c => c !== walletCurrency);

  const currencyTx = txList.filter(t => t.cur === walletCurrency).slice(0, 4);

  // Format balance with hide-balances support
  const balanceStr = hideBalances
    ? '••••••••'
    : `${SYM[walletCurrency]}${Math.floor(w.balance).toLocaleString('en-GB')}`;
  const balanceCents = hideBalances
    ? ''
    : `.${(w.balance.toFixed(2)).split('.')[1]}`;

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark}
        leading={<div style={{ width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}><Icon name="arrow-left" size={18}/></div>}
        title={`${walletCurrency} Wallet`} subtitle={w.name}
        onBack={()=>window.nav('home')}
        trailing={
          <div onClick={()=>window.appStore.update('settings.hideBalances', !hideBalances)} role="button" style={{ cursor:'pointer', width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}>
            <Icon name="eye" size={18}/>
          </div>
        }
      />

      {/* Currency segmented switcher */}
      <div style={{ padding:'0 16px 12px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 4, padding: 4, borderRadius: 3, background: phoneStyles.cardAlt(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
          {['AED','GBP','USD','EUR'].map(c => {
            const active = c === walletCurrency;
            return (
              <div key={c} onClick={()=>setCurrency(c)} role="button" style={{
                cursor:'pointer', padding:'8px 0', borderRadius: 2,
                background: active ? 'var(--falcon-primary)' : 'transparent',
                color: active ? 'var(--falcon-on-primary)' : phoneStyles.text(dark),
                display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
                fontFamily:'Montserrat', fontWeight: active ? 700 : 600, fontSize: 12,
                letterSpacing:'0.04em', transition:'background .15s',
              }}>
                <FlagChip code={c} size={14}/>
                {c}
              </div>
            );
          })}
        </div>
      </div>

      {/* Hero balance card */}
      <div style={{ margin: '0 16px 0' }}>
        <div style={{
          background: dark ? '#0F1A18' : '#0E1F1C',
          color:'#FAFBF9', borderRadius: 3, padding: '22px 22px 18px',
          position:'relative', overflow:'hidden',
          border: `1px solid rgba(255,255,255,0.06)`,
        }}>
          <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 16 }}>
            <FlagChip code={walletCurrency} size={22}/>
            <span style={{ fontSize: 10, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.6 }}>Available balance</span>
          </div>
          <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 36, letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums' }}>
            {balanceStr}<span style={{ opacity: 0.5, fontSize: 22 }}>{balanceCents}</span>
          </div>
          {!hideBalances && (
            <div style={{ display:'flex', alignItems:'center', gap: 10, marginTop: 10, fontSize: 11, opacity: 0.6, fontFamily:'JetBrains Mono, monospace' }}>
              <span>Pending {SYM[walletCurrency]}{w.pending.toLocaleString('en-GB')}</span><span>·</span><span>Reserved {SYM[walletCurrency]}{w.reserved.toLocaleString('en-GB')}</span>
            </div>
          )}
          <svg viewBox="0 0 220 36" style={{ width:'100%', height: 36, marginTop: 18, display:'block' }} preserveAspectRatio="none">
            <defs>
              <linearGradient id={`spk-${walletCurrency}`} x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="var(--falcon-accent)" stopOpacity="0.25"/>
                <stop offset="1" stopColor="var(--falcon-accent)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={`${spark} L220,36 L0,36 Z`} fill={`url(#spk-${walletCurrency})`}/>
            <path d={spark} fill="none" stroke="var(--falcon-accent)" strokeWidth="1.4"/>
          </svg>
          {/* action row */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 6, marginTop: 16 }}>
            <div onClick={()=>window.nav('beneficiaries')} role="button" style={{ cursor:'pointer', background:'rgba(255,255,255,0.06)', borderRadius: 2, padding:'10px 0', display:'flex', flexDirection:'column', alignItems:'center', gap:4, border:'1px solid rgba(255,255,255,0.08)' }}>
              <Icon name="send" size={16} stroke="#FAFBF9"/>
              <span style={{ fontSize: 10, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase' }}>Send</span>
            </div>
            <div onClick={()=>window.nav('fx', { from: walletCurrency, to: walletCurrency==='AED'?'GBP':'AED', amount:'1000' })} role="button" style={{ cursor:'pointer', background:'rgba(255,255,255,0.06)', borderRadius: 2, padding:'10px 0', display:'flex', flexDirection:'column', alignItems:'center', gap:4, border:'1px solid rgba(255,255,255,0.08)' }}>
              <Icon name="swap" size={16} stroke="#FAFBF9"/>
              <span style={{ fontSize: 10, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase' }}>Convert</span>
            </div>
            <div onClick={()=>window.appStore.showToast('Top-up details copied to clipboard')} role="button" style={{ cursor:'pointer', background:'rgba(255,255,255,0.06)', borderRadius: 2, padding:'10px 0', display:'flex', flexDirection:'column', alignItems:'center', gap:4, border:'1px solid rgba(255,255,255,0.08)' }}>
              <Icon name="receive" size={16} stroke="#FAFBF9"/>
              <span style={{ fontSize: 10, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase' }}>Receive</span>
            </div>
          </div>
        </div>
      </div>

      {/* mini-wallets row */}
      <div style={{ padding: '20px 16px 8px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ fontSize: 13, fontWeight:600, color: phoneStyles.text(dark) }}>Other currencies</div>
        <div onClick={()=>window.nav('home')} role="button" style={{ cursor:'pointer', fontSize: 12, color:'var(--falcon-primary)', fontWeight:600 }}>See all</div>
      </div>
      <div className="hide-scroll" style={{ display:'flex', gap: 10, padding:'0 16px', overflowX:'auto' }}>
        {otherCurrencies.map(c => {
          const ow = wallets[c];
          return (
            <div key={c} onClick={()=>setCurrency(c)} role="button" style={{ cursor:'pointer', minWidth: 144, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 3, padding: 12 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <FlagChip code={c} size={18}/>
                <span style={{ fontSize: 12, fontWeight:600, color: phoneStyles.text(dark) }}>{c}</span>
              </div>
              <div style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 15, color: phoneStyles.text(dark), marginTop: 8, fontVariantNumeric:'tabular-nums' }}>
                {hideBalances ? '••••' : formatAmount(ow.balance, c)}
              </div>
              <div style={{ fontSize: 11, color: ow.dir==='up'?'#34AC12':'#E74A49', marginTop: 2 }}>{ow.change}</div>
            </div>
          );
        })}
      </div>

      {/* recent activity */}
      <div style={{ padding: '20px 16px 6px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ fontSize:13, fontWeight:600, color: phoneStyles.text(dark) }}>Recent · {walletCurrency}</div>
        <div onClick={()=>window.nav('tx-list')} role="button" style={{ cursor:'pointer', fontSize: 12, color:'var(--falcon-primary)', fontWeight:600 }}>See all</div>
      </div>
      <div style={{ padding:'0 16px' }}>
        {currencyTx.length === 0 && (
          <div style={{ padding: 20, textAlign:'center', fontSize: 12, color: phoneStyles.muted(dark), background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}` }}>
            No recent activity in this wallet
          </div>
        )}
        {currencyTx.map((t,i)=>(
          <div key={t.id} onClick={()=>window.nav('tx-detail', { txId: t.id })} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'12px 0', borderBottom: i<currencyTx.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
            <div style={{ width:36,height:36,borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex',alignItems:'center',justifyContent:'center', color: phoneStyles.text(dark) }}>
              <Icon name={t.kind==='fx'?'swap':t.kind==='in'?'arrow-down-left':t.kind==='fee'?'spark':'arrow-up-right'} size={16}/>
            </div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight:600, color: phoneStyles.text(dark), whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{t.desc}</div>
              <div style={{ fontSize:11, color: phoneStyles.muted(dark) }}>{t.ts}</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums', color: t.amt.startsWith('+') ? '#34AC12' : phoneStyles.text(dark) }}>{t.amt}</div>
              <div style={{ fontSize:10, color: phoneStyles.muted(dark) }}>{t.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · FX QUOTE & CONVERT — live keypad + 30s lock
// ─────────────────────────────────────────────────────────────
function ScreenFXQuote({ dark }) {
  const fx = window.useAppStore(s => s.fx);
  const wallets = window.useAppStore(s => s.wallets);
  const { from, to, amount } = fx;
  const fromBalance = wallets[from].balance;
  const amt = parseFloat(amount) || 0;
  const quoted = window.appStore.quotedRate(from, to);
  const mid = window.appStore.rate(from, to);
  const toAmt = amt * quoted;
  const margin = amt * (mid - quoted); // in 'from' currency
  const insufficient = amt > fromBalance;

  const [pickerOpen, setPickerOpen] = React.useState(null); // 'from' | 'to' | null

  const setAmount = (next) => window.appStore.set({ fx: { ...fx, amount: next } });
  const setSide = (side, code) => {
    const next = { ...fx };
    next[side] = code;
    if (next.from === next.to) {
      // pick a different one for the other side
      const alt = ['AED','GBP','USD','EUR'].find(c => c !== code);
      next[side === 'from' ? 'to' : 'from'] = alt;
    }
    window.appStore.set({ fx: next });
    setPickerOpen(null);
  };
  const swap = () => window.appStore.set({ fx: { ...fx, from: to, to: from } });

  const onKey = (k) => {
    let next = amount || '';
    if (k === '⌫') next = next.slice(0, -1) || '0';
    else if (k === '.') { if (!next.includes('.')) next = (next || '0') + '.'; }
    else {
      if (next === '0') next = k;
      else if (next.includes('.') && next.split('.')[1].length >= 2) return;
      else next = next + k;
    }
    setAmount(next);
  };

  const confirm = () => {
    if (insufficient || amt <= 0) return;
    // Build a new tx
    const id = 'TX-' + (93030 + Math.floor(Math.random() * 100));
    const nowDate = new Date();
    const hh = String(nowDate.getHours()).padStart(2,'0');
    const mm = String(nowDate.getMinutes()).padStart(2,'0');
    const newTx = {
      id, kind: 'fx',
      desc: `Convert ${from} → ${to}`,
      ts: `Today · ${hh}:${mm}`,
      amt: `−${SYM[from]}${formatRaw(amt.toFixed(2))}`,
      sub: `+${SYM[to]}${formatRaw(toAmt.toFixed(2))}`,
      cur: from, status: 'settled',
      rate: quoted, src: from, dst: to, srcAmt: amt, dstAmt: toAmt,
    };
    // Update balances
    const newWallets = { ...wallets };
    newWallets[from] = { ...newWallets[from], balance: newWallets[from].balance - amt };
    newWallets[to]   = { ...newWallets[to],   balance: newWallets[to].balance + toAmt };
    window.appStore.set({
      wallets: newWallets,
      txList: [newTx, ...window.appStore.get().txList],
      selectedTxId: id,
    });
    window.appStore.showToast(`Converted ${SYM[from]}${formatRaw(amt.toFixed(2))} → ${SYM[to]}${formatRaw(toAmt.toFixed(2))}`);
    window.nav('tx-detail', { txId: id });
  };

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80, position:'relative' }}>
      <ScreenHeader dark={dark}
        onBack={()=>window.nav('home')}
        leading={<div style={{ width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}><Icon name="arrow-left" size={18}/></div>}
        title="Convert"
        trailing={<LockTimer onExpire={()=>window.appStore.set({ fx: { ...fx, lockedAt: Date.now() } })}/>}
      />

      {/* From / To stack */}
      <div style={{ padding:'4px 16px 0' }}>
        <div style={{ background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 3, overflow:'hidden' }}>
          <div style={{ padding:'14px 18px 12px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div style={{ fontSize:11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>From</div>
              <div style={{ fontSize:11, color: insufficient ? '#E74A49' : phoneStyles.muted(dark) }}>
                {insufficient ? 'Insufficient' : 'Available'} · {formatAmount(fromBalance, from)}
              </div>
            </div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:6 }}>
              <div onClick={()=>setPickerOpen('from')} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap:10, padding:'8px 12px 8px 8px', borderRadius: 2, background: phoneStyles.cardAlt(dark) }}>
                <FlagChip code={from} size={22}/>
                <span style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 14, color: phoneStyles.text(dark) }}>{from}</span>
                <Icon name="chevron-down" size={14} stroke={phoneStyles.muted(dark)}/>
              </div>
              <div style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 26, color: insufficient ? '#E74A49' : phoneStyles.text(dark), letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums' }}>
                {formatRaw(amount)}
              </div>
            </div>
          </div>

          <div style={{ position:'relative', height: 1, background: phoneStyles.border(dark) }}>
            <div onClick={swap} role="button" style={{ cursor:'pointer', position:'absolute', left: '50%', top:'50%', transform:'translate(-50%,-50%)', width:36, height:36, borderRadius: 2, background:'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="swap" size={16} stroke="var(--falcon-on-primary)" sw={2}/>
            </div>
          </div>

          <div style={{ padding:'12px 18px 14px' }}>
            <div style={{ fontSize:11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>To</div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:6 }}>
              <div onClick={()=>setPickerOpen('to')} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap:10, padding:'8px 12px 8px 8px', borderRadius: 2, background: phoneStyles.cardAlt(dark) }}>
                <FlagChip code={to} size={22}/>
                <span style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 14, color: phoneStyles.text(dark) }}>{to}</span>
                <Icon name="chevron-down" size={14} stroke={phoneStyles.muted(dark)}/>
              </div>
              <div style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 26, color:'var(--falcon-primary)', letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums' }}>
                {formatRaw(toAmt.toFixed(2))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Rate row */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 22px 6px' }}>
        <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>
          1 {from} = <span style={{ color: phoneStyles.text(dark), fontWeight:600, fontVariantNumeric:'tabular-nums', fontFamily:'JetBrains Mono, monospace' }}>{quoted.toFixed(5)}</span> {to}
        </div>
        <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>
          Margin <span style={{ color: phoneStyles.text(dark), fontWeight:600 }}>12&nbsp;bps</span>
        </div>
      </div>

      {/* Inline numeric keypad */}
      <div style={{ flex: 1 }}/>
      <Keypad onKey={onKey} dark={dark}/>

      <div style={{ padding: '8px 16px 0' }}>
        <button disabled={insufficient || amt <= 0} onClick={confirm} style={{
          cursor: (insufficient || amt <= 0) ? 'not-allowed' : 'pointer',
          width:'100%', height: 48, borderRadius: 3, border:0,
          background: (insufficient || amt <= 0) ? phoneStyles.cardAlt(dark) : 'var(--falcon-primary)',
          color: (insufficient || amt <= 0) ? phoneStyles.muted(dark) : 'var(--falcon-on-primary)',
          fontFamily:'Montserrat', fontWeight:600, fontSize:14,
        }}>
          {insufficient ? 'Insufficient balance' : (amt <= 0 ? 'Enter an amount' : `Convert ${formatAmount(amt, from)}`)}
        </button>
      </div>

      {/* Currency picker overlay */}
      {pickerOpen && <CurrencyPicker side={pickerOpen} current={fx[pickerOpen]} onPick={(c)=>setSide(pickerOpen, c)} onClose={()=>setPickerOpen(null)} dark={dark}/>}
    </div>
  );
}

function Keypad({ onKey, dark }) {
  const keys = ['1','2','3','4','5','6','7','8','9','.','0','⌫'];
  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 1, background: phoneStyles.border(dark), borderTop:`1px solid ${phoneStyles.border(dark)}`, borderBottom:`1px solid ${phoneStyles.border(dark)}` }}>
      {keys.map(k => (
        <div key={k} onClick={()=>onKey(k)} role="button" style={{
          cursor:'pointer', userSelect:'none',
          background: phoneStyles.surface(dark),
          padding:'14px 0', textAlign:'center',
          fontFamily:'Montserrat', fontWeight: 600, fontSize: 22,
          color: phoneStyles.text(dark),
        }}>{k}</div>
      ))}
    </div>
  );
}

function CurrencyPicker({ side, current, onPick, onClose, dark }) {
  const wallets = window.useAppStore(s => s.wallets);
  const codes = ['AED','GBP','USD','EUR'];
  return (
    <div onClick={onClose} style={{ position:'absolute', inset: 0, background:'rgba(0,0,0,0.4)', zIndex: 50, display:'flex', alignItems:'flex-end' }}>
      <div onClick={e=>e.stopPropagation()} className="send-sheet" style={{ width:'100%', background:'#FAFBF9', borderTopLeftRadius: 18, borderTopRightRadius: 18, paddingBottom: 24 }}>
        <div style={{ padding:'10px 0 0', display:'flex', justifyContent:'center' }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background:'rgba(14,31,28,0.18)' }}/>
        </div>
        <div style={{ padding:'12px 20px 6px', fontFamily:'Montserrat', fontWeight:700, fontSize:18, color:'#0E1F1C' }}>
          Select {side === 'from' ? 'source' : 'destination'} currency
        </div>
        <div style={{ padding:'4px 16px 0' }}>
          {codes.map(c => {
            const w = wallets[c];
            const active = c === current;
            return (
              <div key={c} onClick={()=>onPick(c)} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'14px 12px', borderRadius: 3, background: active ? 'rgba(232,78,156,0.06)' : 'transparent', border: `1px solid ${active ? 'var(--falcon-primary)' : 'transparent'}` }}>
                <FlagChip code={c} size={28}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color:'#0E1F1C' }}>{c} · {w.name}</div>
                  <div style={{ fontSize: 11, color:'rgba(14,31,28,0.55)', marginTop:2, fontFamily:'JetBrains Mono, monospace' }}>{formatAmount(w.balance, c)}</div>
                </div>
                {active && <Icon name="check" size={16} stroke="var(--falcon-primary)" sw={2.4}/>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function LockTimer({ onExpire }) {
  const fx = window.useAppStore(s => s.fx);
  const lockedAt = fx.lockedAt || Date.now();
  const total = fx.lockSeconds || 30;
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 250);
    return () => clearInterval(t);
  }, []);
  // Initialize lockedAt if missing
  React.useEffect(() => {
    if (!fx.lockedAt) window.appStore.set({ fx: { ...fx, lockedAt: Date.now() } });
  }, []);
  const elapsed = (now - lockedAt) / 1000;
  let s = Math.max(0, Math.ceil(total - elapsed));
  if (s <= 0) {
    // Auto-relock
    setTimeout(() => onExpire && onExpire(), 0);
    s = total;
  }
  return (
    <div style={{ display:'flex', alignItems:'center', gap: 6, fontSize:11, fontWeight:600, color:'var(--falcon-primary)', fontVariantNumeric:'tabular-nums', padding:'6px 10px', borderRadius: 2, background:'rgba(232,78,156,0.08)' }}>
      <div style={{ width:6, height:6, borderRadius: 999, background:'#34AC12' }}/>
      <Icon name="clock" size={11} stroke="var(--falcon-primary)"/> 0:{String(s).padStart(2,'0')}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 4 · SEND — drag-to-confirm gesture
// ─────────────────────────────────────────────────────────────
function ScreenSend({ dark, inSheet }) {
  const sendDraft = window.useAppStore(s => s.sendDraft);
  const wallets = window.useAppStore(s => s.wallets);
  const recipient = (window.BENEFICIARIES.find(b => b.id === sendDraft.recipientId)) || window.BENEFICIARIES[1];
  const amt = parseFloat(sendDraft.amount) || 0;
  const cur = recipient.cur;
  const fromBalance = wallets[cur].balance;
  // Need to debit AED-equivalent if recipient is non-AED — for the demo, debit from same currency wallet
  const debitCurrency = cur === 'AED' ? 'AED' : 'AED'; // always show debit from AED wallet for narrative
  const debitRate = window.appStore.quotedRate('AED', cur);
  const debitAmt = cur === 'AED' ? amt : amt / debitRate;
  const fee = cur === 'AED' ? 0 : 12; // SWIFT fee in destination cur
  const insufficient = wallets[debitCurrency].balance < debitAmt;

  const onConfirm = () => {
    if (insufficient || amt <= 0) return;
    const id = 'TX-' + (93040 + Math.floor(Math.random() * 100));
    const nowDate = new Date();
    const hh = String(nowDate.getHours()).padStart(2,'0');
    const mm = String(nowDate.getMinutes()).padStart(2,'0');
    const newTx = {
      id, kind: 'out',
      desc: recipient.name,
      ts: `Today · ${hh}:${mm}`,
      amt: `−${SYM[cur]}${formatRaw(amt.toFixed(2))}`,
      sub: sendDraft.reference.split(' · ')[0] || 'Payment',
      cur, status: 'pending',
      recipient: recipient.name, iban: recipient.iban, bank: recipient.bank,
      method: sendDraft.method, reference: sendDraft.reference,
    };
    const newWallets = { ...wallets };
    newWallets[debitCurrency] = { ...newWallets[debitCurrency], balance: newWallets[debitCurrency].balance - debitAmt - (cur==='AED'?0:fee*debitRate) };
    window.appStore.set({
      wallets: newWallets,
      txList: [newTx, ...window.appStore.get().txList],
      selectedTxId: id,
    });
    window.closeSheet && window.closeSheet();
    window.appStore.showToast(`Payment to ${recipient.name.split(' ').slice(0,2).join(' ')} sent`);
    window.nav('tx-detail', { txId: id });
  };

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: inSheet ? 28 : 56, paddingBottom: inSheet ? 0 : 80 }}>
      {inSheet ? (
        <div style={{ padding:'4px 20px 12px', flexShrink: 0 }}>
          <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 22, color: phoneStyles.text(dark), letterSpacing:'-0.01em' }}>Review payment</div>
          <div style={{ fontSize: 12, color: phoneStyles.muted(dark), marginTop: 2 }}>Step 3 of 3</div>
        </div>
      ) : (
        <ScreenHeader dark={dark} onBack={()=>window.nav('beneficiaries')}
          leading={<div style={{ width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark), cursor:'pointer' }}><Icon name="arrow-left" size={18}/></div>}
          title="Review payment" subtitle="Step 3 of 3"
        />
      )}
      <div className="hide-scroll" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>

      {/* Recipient card */}
      <div style={{ margin:'4px 16px 0', padding: 18, borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
        <div style={{ fontSize:11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>To</div>
        <div style={{ display:'flex', alignItems:'center', gap: 12, marginTop: 12 }}>
          <div style={{ width: 44, height:44, borderRadius: 2, background: 'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Montserrat', fontWeight: 700, fontSize: 14 }}>
            {recipient.name.split(' ').slice(0,2).map(s=>s[0]).join('')}
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight: 600, fontSize: 14, color: phoneStyles.text(dark) }}>{recipient.name}</div>
            <div style={{ fontSize: 12, color: phoneStyles.muted(dark), fontFamily:'JetBrains Mono, monospace' }}>{recipient.iban}</div>
          </div>
          <FlagChip code={cur} size={20}/>
        </div>
        <div style={{ marginTop: 14, paddingTop: 14, borderTop:`1px solid ${phoneStyles.border(dark)}`, display:'flex', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>Bank</div>
            <div style={{ fontSize: 12, fontWeight:600, color: phoneStyles.text(dark), marginTop: 2 }}>{recipient.bank}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>Method</div>
            <div style={{ fontSize: 12, fontWeight:600, color: phoneStyles.text(dark), marginTop: 2 }}>{sendDraft.method}</div>
          </div>
        </div>
      </div>

      {/* Amount card */}
      <div style={{ margin:'12px 16px 0', padding: 18, borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
        <div style={{ fontSize:11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>You send</div>
        <div style={{ display:'flex', alignItems:'baseline', gap: 6, marginTop: 8 }}>
          <span style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 32, color: phoneStyles.text(dark), letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums' }}>
            {SYM[cur]}{formatRaw(amt.toFixed(0))}<span style={{ opacity:0.5, fontSize:20 }}>.{(amt.toFixed(2)).split('.')[1]}</span>
          </span>
        </div>
        <div style={{ fontSize: 12, color: phoneStyles.muted(dark), marginTop: 4 }}>
          {cur === 'AED' ? `From AED Wallet` : `From AED Wallet · debited as AED ${formatRaw(debitAmt.toFixed(2))} @ ${debitRate.toFixed(5)}`}
        </div>
        <div style={{ marginTop: 14, paddingTop: 14, borderTop:`1px solid ${phoneStyles.border(dark)}` }}>
          {[
            ['Amount sent', `${SYM[cur]}${formatRaw(amt.toFixed(2))}`],
            ['SWIFT fee',   cur === 'AED' ? `AED 0.00` : `${SYM[cur]}${fee.toFixed(2)}`],
            ['Total debited (AED)', `AED ${formatRaw((debitAmt + (cur==='AED'?0:fee*debitRate)).toFixed(2))}`],
            ['Arrives by', cur === 'AED' ? 'Instant' : 'Today · 18:00 GST'],
          ].map(([k,v])=>(
            <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'7px 0' }}>
              <span style={{ fontSize:12, color: phoneStyles.muted(dark) }}>{k}</span>
              <span style={{ fontSize:12, fontWeight:600, color: phoneStyles.text(dark), fontVariantNumeric:'tabular-nums' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Reference */}
      <div style={{ margin:'12px 16px 16px', padding:'14px 18px', borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>Reference</div>
            <div style={{ fontSize: 13, color: phoneStyles.text(dark), marginTop: 4, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{sendDraft.reference}</div>
          </div>
          <Icon name="chevron" size={14} stroke={phoneStyles.muted(dark)}/>
        </div>
      </div>
      </div>

      {/* Slide-to-confirm gesture */}
      <div style={{ padding: inSheet ? '12px 16px 20px' : '0 16px', flexShrink: 0, background: phoneStyles.surface(dark), borderTop: inSheet ? `1px solid ${phoneStyles.border(dark)}` : 'none' }}>
        <SlideToConfirm onConfirm={onConfirm} disabled={insufficient || amt <= 0} dark={dark}
          label={insufficient ? 'Insufficient balance' : (amt <= 0 ? 'Enter an amount' : 'Slide to confirm payment')}
        />
        <div style={{ textAlign:'center', fontSize:11, color: phoneStyles.faint(dark), marginTop: 10, display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
          <Icon name="face-id" size={12} stroke={phoneStyles.faint(dark)}/> Confirmed with Face&nbsp;ID
        </div>
      </div>
    </div>
  );
}

// Real drag-to-confirm gesture
function SlideToConfirm({ onConfirm, disabled, dark, label }) {
  const trackRef = React.useRef(null);
  const [drag, setDrag] = React.useState(0);  // 0..1
  const [done, setDone] = React.useState(false);
  const draggingRef = React.useRef(false);
  const startXRef = React.useRef(0);
  const trackWRef = React.useRef(0);
  const KNOB = 44;

  const onStart = (clientX) => {
    if (disabled || done) return;
    const rect = trackRef.current.getBoundingClientRect();
    trackWRef.current = rect.width - KNOB - 12;
    startXRef.current = clientX;
    draggingRef.current = true;
  };
  const onMove = (clientX) => {
    if (!draggingRef.current) return;
    const dx = clientX - startXRef.current;
    const next = Math.max(0, Math.min(1, dx / trackWRef.current));
    setDrag(next);
  };
  const onEnd = () => {
    if (!draggingRef.current) return;
    draggingRef.current = false;
    if (drag > 0.85) {
      setDrag(1);
      setDone(true);
      setTimeout(()=>onConfirm && onConfirm(), 280);
    } else {
      setDrag(0);
    }
  };

  React.useEffect(() => {
    const move = (e) => onMove(e.clientX || (e.touches && e.touches[0].clientX));
    const up = () => onEnd();
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, [drag, disabled, done]);

  const knobX = 6 + drag * (trackWRef.current || 230);

  return (
    <div ref={trackRef} style={{
      position:'relative', height:56, borderRadius: 3,
      background: disabled ? phoneStyles.cardAlt(dark) : 'var(--falcon-primary)',
      overflow:'hidden', display:'flex', alignItems:'center',
      cursor: disabled ? 'not-allowed' : 'pointer',
    }}>
      <div
        onMouseDown={(e)=>onStart(e.clientX)}
        onTouchStart={(e)=>onStart(e.touches[0].clientX)}
        style={{
          position:'absolute', left: knobX, top:6, bottom:6, width: KNOB, borderRadius: 2,
          background: disabled ? phoneStyles.muted(dark) : 'var(--falcon-on-primary)',
          display:'flex', alignItems:'center', justifyContent:'center',
          transition: draggingRef.current ? 'none' : 'left 220ms cubic-bezier(0.2,0.8,0.2,1)',
          touchAction: 'none', userSelect: 'none',
          boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
        }}
      >
        {done ? <Icon name="check" size={18} stroke="var(--falcon-primary)" sw={2.4}/> : <Icon name="arrow-right" size={18} stroke="var(--falcon-primary)" sw={2}/>}
      </div>
      <div style={{
        flex:1, textAlign:'center',
        color: disabled ? phoneStyles.muted(dark) : 'var(--falcon-on-primary)',
        fontFamily:'Montserrat', fontWeight: 600, fontSize: 14, letterSpacing:'0.04em',
        opacity: 1 - drag * 1.1,
        userSelect:'none',
      }}>
        {label}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 5 · TRANSACTIONS LIST
// ─────────────────────────────────────────────────────────────
function ScreenTxList({ dark }) {
  const txList = window.useAppStore(s => s.txList);
  const filters = window.useAppStore(s => s.activityFilters);
  // Visual filter only — for clarity, we still show all transactions
  const groups = [
    { day:'Today',     items: txList.filter(t=>t.ts.startsWith('Today')) },
    { day:'Yesterday', items: txList.filter(t=>t.ts.startsWith('Yesterday')) },
    { day:'Earlier',   items: txList.filter(t=>!t.ts.startsWith('Today') && !t.ts.startsWith('Yesterday')) },
  ].filter(g => g.items.length > 0);

  const Pill = ({ active, children, removable, onClick }) => (
    <div onClick={onClick} role="button" style={{
      cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6, padding:'6px 12px',
      borderRadius: 2, fontSize:12, fontWeight:600,
      background: active ? 'var(--falcon-primary)' : phoneStyles.card(dark),
      color: active ? 'var(--falcon-on-primary)' : phoneStyles.text(dark),
      border: `1px solid ${active ? 'transparent' : phoneStyles.border(dark)}`,
      whiteSpace:'nowrap',
    }}>{children}{removable && <span style={{ opacity:0.7, marginLeft:2 }}>×</span>}</div>
  );

  // Visual-only filter pills
  const togglePill = (k, v) => {
    const next = { ...filters, [k]: filters[k] === v ? 'All' : v };
    window.appStore.set({ activityFilters: next });
  };

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark} title="Activity" subtitle="All wallets · Apr 2026"
        onBack={()=>window.nav('home')}
        trailing={
          <div style={{ display:'flex', gap:8 }}>
            <div onClick={()=>window.appStore.showToast('Search coming soon')} role="button" style={{ cursor:'pointer', width:34,height:34,borderRadius: 2, background: phoneStyles.cardAlt(dark), color: phoneStyles.text(dark), display:'flex',alignItems:'center',justifyContent:'center' }}><Icon name="search" size={16}/></div>
            <div onClick={()=>window.nav('statements')} role="button" style={{ cursor:'pointer', width:34,height:34,borderRadius: 2, background: phoneStyles.cardAlt(dark), color: phoneStyles.text(dark), display:'flex',alignItems:'center',justifyContent:'center' }}><Icon name="export" size={16}/></div>
          </div>
        }
      />

      {/* Filter rail */}
      <div className="hide-scroll" style={{ display:'flex', gap:8, padding:'2px 16px 14px', overflowX:'auto' }}>
        <Pill active={filters.currency === 'All' && filters.type === 'All'} onClick={()=>window.appStore.set({ activityFilters: { currency: 'All', type: 'All' } })}>All</Pill>
        <Pill active={filters.currency === 'AED'} removable={filters.currency === 'AED'} onClick={()=>togglePill('currency', 'AED')}>Currency: AED</Pill>
        <Pill active={filters.type === 'fx'} removable={filters.type === 'fx'} onClick={()=>togglePill('type', 'fx')}>Type: Convert</Pill>
        <Pill onClick={()=>window.appStore.showToast('More filters coming soon')}>+ Add filter</Pill>
      </div>

      {/* KPI strip */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, padding:'0 16px 12px' }}>
        <div style={{ background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 3, padding: 12 }}>
          <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>In · this month</div>
          <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 18, color:'#34AC12', marginTop: 4, fontVariantNumeric:'tabular-nums' }}>+AED 691,000</div>
        </div>
        <div style={{ background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 3, padding: 12 }}>
          <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>Out · this month</div>
          <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 18, color: phoneStyles.text(dark), marginTop: 4, fontVariantNumeric:'tabular-nums' }}>−AED 412,140</div>
        </div>
      </div>

      {/* Grouped list */}
      <div className="hide-scroll" style={{ flex:1, overflowY:'auto', padding:'0 16px' }}>
        {groups.map(g => (
          <div key={g.day} style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing:'0.06em', textTransform:'uppercase', color: phoneStyles.faint(dark), padding:'8px 4px' }}>{g.day}</div>
            <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px' }}>
              {g.items.map((t,i)=>(
                <div key={t.id} onClick={()=>window.nav('tx-detail', { txId: t.id })} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'12px 0', borderBottom: i<g.items.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
                  <div style={{ width:36,height:36,borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}>
                    <Icon name={t.kind==='fx'?'swap':t.kind==='in'?'arrow-down-left':t.kind==='fee'?'spark':'arrow-up-right'} size={16}/>
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize: 13, fontWeight:600, color: phoneStyles.text(dark), whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{t.desc}</div>
                    <div style={{ fontSize: 11, color: phoneStyles.muted(dark), display:'flex', alignItems:'center', gap:6 }}>
                      <FlagChip code={t.cur} size={11}/>
                      <span>{t.id}</span>
                      {t.status==='pending' && <span style={{ background:'rgba(240,173,78,0.15)', color:'#A06813', padding:'1px 6px', borderRadius:6, fontSize:10, fontWeight:600 }}>Pending</span>}
                    </div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <div style={{ fontSize: 13, fontWeight:600, fontVariantNumeric:'tabular-nums', color: t.amt.startsWith('+') ? '#34AC12' : phoneStyles.text(dark) }}>{t.amt}</div>
                    <div style={{ fontSize: 10, color: phoneStyles.muted(dark) }}>{t.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenOnboarding, ScreenWallet, ScreenFXQuote, ScreenSend, ScreenTxList, phoneStyles, TabBar, ScreenHeader });