// nav.jsx — bottom navigation + transaction form sheet

// ─── Bottom Nav ───────────────────────────────────────────────────
function BottomNav({ active, onChange, onFab, theme, accent }) {
  const tabs = [
    { id: 'home',   label: 'Beranda',   icon: 'home' },
    { id: 'tx',     label: 'Transaksi', icon: 'arrow-left-right' },
    { id: 'fab' },
    { id: 'report', label: 'Laporan',   icon: 'pie-chart' },
    { id: 'more',   label: 'Lainnya',   icon: 'layout-grid' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 28, paddingTop: 6,
      background: theme.surface,
      borderTop: `0.5px solid ${theme.border}`,
      boxShadow: '0 -6px 20px rgba(15,23,42,0.04)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around',
      zIndex: 20,
    }}>
      {tabs.map((t) => {
        if (t.id === 'fab') return (
          <button key="fab" onClick={onFab} style={{
            appearance: 'none', border: 0, cursor: 'pointer',
            width: 54, height: 54, borderRadius: '50%',
            background: `linear-gradient(135deg, ${accent.grad[0]}, ${accent.grad[1]})`,
            marginTop: -22,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 8px 22px ${accent[500]}66`,
          }}>
            <Icon name="plus" size={26} color="#fff" stroke={2.4} />
          </button>
        );
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            appearance: 'none', background: 'transparent', border: 0,
            cursor: 'pointer', flex: 1, padding: '8px 0',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          }}>
            <Icon name={t.icon} size={22} stroke={on ? 2.2 : 1.75} color={on ? theme.fg1 : theme.fg3} />
            <span style={{ fontSize: 10, fontWeight: on ? 700 : 500, color: on ? theme.fg1 : theme.fg3 }}>
              {t.label}
            </span>
          </button>
        );
      })}
    </div>
  );
}

// ─── Transaction Form ─────────────────────────────────────────────
function TxForm({ open, onClose, onSave, theme, accent, scenario, defaultBy, auth }) {
  const T = theme;
  const [kind, setKind]           = React.useState('expense');
  const [amount, setAmount]       = React.useState(0);
  const [cat, setCat]             = React.useState(null);
  const [note, setNote]           = React.useState('');
  const [date, setDate]           = React.useState('Hari ini');
  const [accountId, setAccountId] = React.useState('');
  const [accounts, setAccounts]   = React.useState([]);
  const [scanning, setScanning]   = React.useState(false);
  const [scanMsg, setScanMsg]     = React.useState('');
  const fileRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    setKind('expense'); setAmount(0); setCat(null);
    setNote(''); setDate('Hari ini'); setAccountId('');
    setScanMsg(''); setScanning(false);
    if (auth && auth.family && window.SB) {
      window.SB.from('accounts').select('id,name,type,balance')
        .eq('family_id', auth.family.id).neq('type','credit').order('name')
        .then(function(r){ if (!r.error) setAccounts(r.data || []); });
    }
  }, [open]);

  async function handleScan(file) {
    setScanning(true); setScanMsg('Membaca struk…');
    try {
      const b64 = await new Promise((res, rej) => {
        const r = new FileReader();
        r.onload = () => res(r.result.split(',')[1]);
        r.onerror = rej;
        r.readAsDataURL(file);
      });
      const resp = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          model: 'claude-sonnet-4-20250514',
          max_tokens: 400,
          messages: [{
            role: 'user',
            content: [
              { type: 'image', source: { type: 'base64', media_type: file.type || 'image/jpeg', data: b64 } },
              { type: 'text', text: 'Struk/nota/tagihan ini. Balas JSON saja tanpa backtick: {"total":<integer rupiah>,"merchant":"<nama toko>","category":"<makan|belanja|transport|tagihan|hiburan|kesehatan|pendidikan|rumah|anak|hadiah|donasi|lainnya>","note":"<keterangan singkat>"}' }
            ]
          }]
        })
      });
      const data = await resp.json();
      const text = (data.content||[]).filter(b=>b.type==='text').map(b=>b.text).join('');
      const parsed = JSON.parse(text.replace(/```json|```/g,'').trim());
      if (parsed.total > 0) setAmount(parsed.total);
      if (parsed.merchant || parsed.note) setNote([parsed.merchant, parsed.note].filter(Boolean).join(' — '));
      const catMap = {
        makan:'food_ex', belanja:'shop_ex', transport:'transport_ex', tagihan:'bills_ex',
        hiburan:'fun_ex', kesehatan:'health_ex', pendidikan:'edu_ex', rumah:'home_ex',
        anak:'kids_ex', hadiah:'gift_ex', donasi:'donate_ex', lainnya:'other_ex',
      };
      const ck = catMap[parsed.category];
      if (ck && CATEGORIES[ck]) setCat(CATEGORIES[ck]);
      setScanMsg('✓ ' + (parsed.merchant||'Struk') + ' · Rp ' + (parsed.total||0).toLocaleString('id-ID'));
    } catch(e) {
      setScanMsg('Gagal baca struk');
    }
    setScanning(false);
  }

  const cats    = Object.values(CATEGORIES).filter((c) => c.kind === kind);
  const canSave = amount > 0 && cat;
  const accentColor = kind==='expense' ? (T.danger||'#ef4444') : accent[500];

  return (
    <BottomSheet open={open} onClose={onClose} theme={T} height="92%" maxHeight={800}>

      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'4px 20px 14px' }}>
        <h2 style={{ margin:0, fontSize:18, fontWeight:800, color:T.fg1 }}>Catat Transaksi</h2>
        <button onClick={onClose} style={{
          appearance:'none', background:T.surfaceAlt, border:0,
          width:32, height:32, borderRadius:'50%',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}>
          <Icon name="x" size={18} color={T.fg2} stroke={2} />
        </button>
      </div>

      {/* Income / Expense toggle */}
      <div style={{ padding:'0 20px 16px' }}>
        <div style={{ display:'flex', padding:4, background:T.surfaceAlt, borderRadius:14, position:'relative' }}>
          <div style={{
            position:'absolute', top:4, bottom:4, width:'calc(50% - 4px)',
            left: kind==='income' ? 4 : 'calc(50% + 0px)',
            background: kind==='income' ? accent[500] : (T.danger||'#ef4444'),
            borderRadius:10, transition:'left 200ms cubic-bezier(0.22,0.61,0.36,1), background 200ms',
            boxShadow:'0 2px 8px rgba(0,0,0,0.15)',
          }} />
          {['income','expense'].map((k) => (
            <button key={k} onClick={() => { setKind(k); setCat(null); }} style={{
              position:'relative', flex:1, appearance:'none', border:0, background:'transparent',
              padding:'11px 0', cursor:'pointer', zIndex:1,
              fontSize:14, fontWeight:700, color: kind===k ? '#fff' : T.fg3,
              display:'flex', alignItems:'center', justifyContent:'center', gap:6,
              transition:'color 200ms',
            }}>
              <Icon name={k==='income' ? 'arrow-down-left' : 'arrow-up-right'}
                size={15} stroke={2.2} color={kind===k ? '#fff' : T.fg3} />
              {k==='income' ? 'Pemasukan' : 'Pengeluaran'}
            </button>
          ))}
        </div>
      </div>

      {/* Scrollable body */}
      <div style={{ flex:1, overflowY:'auto', padding:'0 20px 8px', display:'flex', flexDirection:'column', gap:18 }}>

        {/* Amount */}
        <div style={{
          background:T.surfaceAlt, borderRadius:16, padding:'14px 16px',
          borderLeft:`4px solid ${accentColor}`,
        }}>
          <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8 }}>
            Jumlah
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ color:T.fg3, fontSize:20, fontWeight:700, flexShrink:0 }}>Rp</span>
            <input
              type="text" inputMode="numeric"
              placeholder="0"
              value={amount > 0 ? amount.toLocaleString('id-ID') : ''}
              onChange={function(e){
                var raw = e.target.value.replace(/\D/g,'');
                setAmount(raw ? Math.min(parseInt(raw,10), 999999999999) : 0);
              }}
              style={{
                flex:1, border:0, outline:0, background:'transparent',
                fontFamily:'inherit', fontSize:32, fontWeight:800,
                color: amount>0 ? T.fg1 : T.fg4,
                letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums',
                minWidth:0,
              }}
            />
          </div>
        </div>

        {/* Scan struk button — terpisah dari amount field */}
        <div>
          <button onClick={() => fileRef.current && fileRef.current.click()}
            disabled={scanning}
            style={{
              appearance:'none', border:`1.5px dashed ${accent[300]||accent[500]}`,
              cursor: scanning ? 'wait' : 'pointer', width:'100%',
              background: scanning ? T.surfaceAlt : accent.tint||accent[50]||'rgba(16,185,129,0.06)',
              borderRadius:14, padding:'12px 16px',
              display:'flex', alignItems:'center', gap:12,
            }}>
            <div style={{
              width:40, height:40, borderRadius:12, flexShrink:0,
              background: scanning ? T.surfaceAlt : accent[100]||accent.tint,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              {scanning
                ? <span style={{ fontSize:18 }}>⏳</span>
                : <Icon name="scan" size={20} color={accent[600]||accent[500]} stroke={1.8} />
              }
            </div>
            <div style={{ textAlign:'left' }}>
              <div style={{ fontSize:13, fontWeight:700, color:accent[700]||accent[500] }}>
                {scanning ? 'Membaca struk…' : 'Scan / Upload Struk'}
              </div>
              <div style={{ fontSize:11, color:T.fg3, marginTop:2 }}>
                {scanMsg || 'Foto struk atau nota → AI otomatis isi jumlah & kategori'}
              </div>
            </div>
          </button>
          <input ref={fileRef} type="file" accept="image/*" capture="environment"
            style={{ display:'none' }}
            onChange={function(e){ if(e.target.files[0]) handleScan(e.target.files[0]); e.target.value=''; }} />
        </div>

        {/* Category */}
        <div>
          <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:12 }}>
            Kategori {!cat && <span style={{ color:'#ef4444' }}>*</span>}
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
            {cats.map((c) => {
              const on = cat && cat.id === c.id;
              return (
                <button key={c.id} onClick={() => setCat(on ? null : c)} style={{
                  appearance:'none',
                  border: on ? `2px solid ${c.color}` : '2px solid transparent',
                  cursor:'pointer',
                  background: on ? c.color+'18' : T.surfaceAlt,
                  padding:'10px 4px 8px', borderRadius:14,
                  display:'flex', flexDirection:'column', alignItems:'center', gap:5,
                  transition:'all 150ms',
                  boxShadow: on ? `0 2px 12px ${c.color}33` : 'none',
                }}>
                  <Icon name={c.icon} size={22} color={c.color} stroke={on ? 2.2 : 1.8} />
                  <span style={{
                    fontSize:10, fontWeight: on ? 700 : 500,
                    color: on ? c.color : T.fg2,
                    lineHeight:1.2, textAlign:'center',
                  }}>{c.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Rekening + Tanggal */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Rekening</div>
            <select value={accountId} onChange={(e) => setAccountId(e.target.value)} style={selectStyle(T)}>
              <option value="">— Pilih —</option>
              {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
          </div>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Tanggal</div>
            <select value={date} onChange={(e) => setDate(e.target.value)} style={selectStyle(T)}>
              <option>Hari ini</option>
              <option>Kemarin</option>
            </select>
          </div>
        </div>

        {/* Catatan */}
        <div>
          <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Catatan</div>
          <input type="text" value={note} onChange={(e) => setNote(e.target.value)}
            placeholder="Opsional — nama toko, keterangan, dll"
            style={{
              width:'100%', height:44, borderRadius:12,
              border:`1.5px solid ${T.border}`, outline:'none',
              background:T.surface, color:T.fg1,
              fontSize:14, padding:'0 14px', fontFamily:'inherit',
              boxSizing:'border-box',
            }} />
        </div>

        <div style={{ height:4 }} />
      </div>

      {/* Save button */}
      <div style={{ padding:'10px 20px 16px', background:T.surface, borderTop:`1px solid ${T.border}` }}>
        <button disabled={!canSave}
          onClick={() => { onSave?.({ kind, amount, cat, note, date, account_id: accountId||null }); onClose(); }}
          style={{
            appearance:'none', border:0, width:'100%', height:52, borderRadius:14,
            cursor: canSave ? 'pointer' : 'not-allowed',
            background: canSave
              ? `linear-gradient(135deg, ${accent.grad[0]}, ${accent.grad[1]})`
              : T.surfaceAlt,
            color: canSave ? '#fff' : T.fg4,
            fontSize:16, fontWeight:700, fontFamily:'inherit',
            boxShadow: canSave ? `0 6px 20px ${accent[500]}44` : 'none',
            transition:'all 200ms',
          }}>
          {canSave ? 'Simpan Transaksi' : 'Pilih kategori dulu'}
        </button>
      </div>

    </BottomSheet>
  );
}

function selectStyle(T) {
  return {
    appearance:'none', WebkitAppearance:'none',
    border:`1.5px solid ${T.border}`,
    background:T.surface, color:T.fg1,
    height:44, padding:'0 12px', borderRadius:12,
    fontSize:14, fontWeight:500,
    width:'100%', fontFamily:'inherit', outline:'none',
  };
}


// ─── Transfer Form ────────────────────────────────────────────────
function TransferForm({ open, onClose, onDone, theme, accent, auth }) {
  const T = theme;
  const [fromId, setFromId]   = React.useState('');
  const [toId, setToId]       = React.useState('');
  const [amount, setAmount]   = React.useState(0);
  const [note, setNote]       = React.useState('');
  const [date, setDate]       = React.useState('Hari ini');
  const [accounts, setAccounts] = React.useState([]);
  const [saving, setSaving]   = React.useState(false);
  const [msg, setMsg]         = React.useState('');

  React.useEffect(() => {
    if (!open) return;
    setFromId(''); setToId(''); setAmount(0); setNote(''); setDate('Hari ini');
    setMsg(''); setSaving(false);
    if (auth && auth.family && window.SB) {
      window.SB.from('accounts').select('id,name,type,balance')
        .eq('family_id', auth.family.id).eq('is_active', true).order('name')
        .then(function(r){ if(!r.error) setAccounts(r.data||[]); });
    }
  }, [open]);

  const fromAcc   = accounts.find(a => a.id === fromId);
  const toAcc     = accounts.find(a => a.id === toId);
  const toInvest  = toAcc && toAcc.type === 'investment';
  const canSave   = fromId && toId && fromId !== toId && amount > 0;

  async function handleSave() {
    if (!canSave || saving) return;
    setSaving(true); setMsg('');
    // Resolve date
    var today = new Date();
    var resolvedDate =
      (!date || date === 'Hari ini') ? today.toISOString().split('T')[0] :
      date === 'Kemarin' ? new Date(today.setDate(today.getDate()-1)).toISOString().split('T')[0] :
      date;

    var res = await window.sbTransfer(auth.family.id, auth.user.id, {
      fromId, toId, amount, toType: toAcc.type,
      note: note || ('Transfer ke ' + (toAcc.name||'rekening')),
      date: resolvedDate,
    });

    if (res.error) {
      setMsg('Error: ' + (res.error.message || 'Gagal'));
      setSaving(false);
      return;
    }
    window.dispatchEvent(new Event('tx-added'));
    onDone && onDone();
    onClose();
  }

  const fmtBal = (n) => n >= 1000000 ? 'Rp ' + (n/1000000).toFixed(1).replace('.0','') + 'jt'
    : n >= 1000 ? 'Rp ' + Math.round(n/1000) + 'rb' : 'Rp ' + n;

  return (
    <BottomSheet open={open} onClose={onClose} theme={T} height="auto" maxHeight={620}>

      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'4px 20px 14px' }}>
        <div>
          <h2 style={{ margin:0, fontSize:18, fontWeight:800, color:T.fg1 }}>Transfer</h2>
          <div style={{ fontSize:11, color:T.fg3, marginTop:2 }}>Pindah saldo antar rekening</div>
        </div>
        <button onClick={onClose} style={{
          appearance:'none', background:T.surfaceAlt, border:0,
          width:32, height:32, borderRadius:'50%',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}>
          <Icon name="x" size={18} color={T.fg2} stroke={2} />
        </button>
      </div>

      <div style={{ padding:'0 20px 8px', display:'flex', flexDirection:'column', gap:16 }}>

        {/* Amount */}
        <div style={{
          background:T.surfaceAlt, borderRadius:16, padding:'14px 16px',
          borderLeft:`4px solid ${accent[500]}`,
        }}>
          <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8 }}>Jumlah</div>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ color:T.fg3, fontSize:20, fontWeight:700 }}>Rp</span>
            <input type="text" inputMode="numeric" placeholder="0"
              value={amount > 0 ? amount.toLocaleString('id-ID') : ''}
              onChange={function(e){
                var raw = e.target.value.replace(/\D/g,'');
                setAmount(raw ? Math.min(parseInt(raw,10), 999999999999) : 0);
              }}
              style={{
                flex:1, border:0, outline:0, background:'transparent',
                fontFamily:'inherit', fontSize:32, fontWeight:800,
                color: amount>0 ? T.fg1 : T.fg4,
                letterSpacing:'-0.02em',
              }} />
          </div>
        </div>

        {/* From → To */}
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Dari</div>
            <select value={fromId} onChange={e=>setFromId(e.target.value)} style={selectStyle(T)}>
              <option value="">— Pilih —</option>
              {accounts.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
            {fromAcc && <div style={{ fontSize:10, color:T.fg3, marginTop:3 }}>Saldo: {fmtBal(fromAcc.balance)}</div>}
          </div>

          <div style={{ paddingTop:18, color:T.fg3 }}>
            <Icon name="arrow-right" size={20} color={accent[500]} stroke={2} />
          </div>

          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Ke</div>
            <select value={toId} onChange={e=>setToId(e.target.value)} style={selectStyle(T)}>
              <option value="">— Pilih —</option>
              {accounts.filter(a=>a.id!==fromId).map(a => (
                <option key={a.id} value={a.id}>
                  {a.name}{a.type==='investment' ? ' 📈' : ''}
                </option>
              ))}
            </select>
            {toAcc && <div style={{ fontSize:10, color:T.fg3, marginTop:3 }}>Saldo: {fmtBal(toAcc.balance)}</div>}
          </div>
        </div>

        {/* Info banner kalau ke investasi */}
        {toInvest && (
          <div style={{
            background:'rgba(139,92,246,0.08)', border:'1px solid rgba(139,92,246,0.2)',
            borderRadius:12, padding:'10px 14px',
            display:'flex', alignItems:'flex-start', gap:10,
          }}>
            <span style={{ fontSize:16, flexShrink:0 }}>📈</span>
            <div style={{ fontSize:12, color:'#6d28d9', lineHeight:1.5 }}>
              <strong>Transfer ke investasi</strong> — saldo {toAcc.name} dan <em>cost basis</em> akan bertambah Rp {amount>0?amount.toLocaleString('id-ID'):0}. Dicatat sebagai investasi, bukan pengeluaran.
            </div>
          </div>
        )}

        {/* Warning kalau saldo tidak cukup */}
        {fromAcc && amount > 0 && amount > fromAcc.balance && (
          <div style={{
            background:'rgba(239,68,68,0.08)', border:'1px solid rgba(239,68,68,0.2)',
            borderRadius:12, padding:'10px 14px', fontSize:12, color:'#dc2626',
          }}>
            ⚠️ Saldo {fromAcc.name} tidak cukup ({fmtBal(fromAcc.balance)})
          </div>
        )}

        {/* Tanggal + Catatan */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Tanggal</div>
            <select value={date} onChange={e=>setDate(e.target.value)} style={selectStyle(T)}>
              <option>Hari ini</option>
              <option>Kemarin</option>
            </select>
          </div>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:T.fg3, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6 }}>Catatan</div>
            <input type="text" value={note} onChange={e=>setNote(e.target.value)}
              placeholder="Opsional"
              style={{
                width:'100%', height:44, borderRadius:12, boxSizing:'border-box',
                border:`1.5px solid ${T.border}`, outline:'none',
                background:T.surface, color:T.fg1, fontSize:14, padding:'0 14px', fontFamily:'inherit',
              }} />
          </div>
        </div>

        {msg && <div style={{ fontSize:12, color:'#ef4444', textAlign:'center' }}>{msg}</div>}
      </div>

      {/* Save */}
      <div style={{ padding:'10px 20px 16px', background:T.surface, borderTop:`1px solid ${T.border}` }}>
        <button disabled={!canSave || saving} onClick={handleSave} style={{
          appearance:'none', border:0, width:'100%', height:52, borderRadius:14,
          cursor: canSave ? 'pointer' : 'not-allowed',
          background: canSave ? `linear-gradient(135deg, ${accent.grad[0]}, ${accent.grad[1]})` : T.surfaceAlt,
          color: canSave ? '#fff' : T.fg4,
          fontSize:16, fontWeight:700, fontFamily:'inherit',
          boxShadow: canSave ? `0 6px 20px ${accent[500]}44` : 'none',
        }}>
          {saving ? 'Memproses…' : canSave ? (toInvest ? '📈 Investasikan' : '↔ Transfer') : 'Lengkapi data dulu'}
        </button>
      </div>

    </BottomSheet>
  );
}


// ─── FAB Picker — pilih tipe transaksi ───────────────────────────
function FabPicker({ open, onClose, onSelect, theme, accent }) {
  const T = theme;
  const options = [
    { id:'income',   label:'Pemasukan',   icon:'arrow-down-left',  color:accent[500],   desc:'Gaji, bonus, dll' },
    { id:'expense',  label:'Pengeluaran', icon:'arrow-up-right',   color:T.danger||'#ef4444', desc:'Belanja, makan, dll' },
    { id:'transfer', label:'Transfer',    icon:'arrow-left-right', color:'#8b5cf6',     desc:'Pindah / investasi' },
  ];
  return (
    <BottomSheet open={open} onClose={onClose} theme={T} height="auto" maxHeight={340}>
      <div style={{ padding:'4px 20px 20px' }}>
        <div style={{ fontSize:16, fontWeight:800, color:T.fg1, marginBottom:16 }}>Catat apa?</div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {options.map(opt => (
            <button key={opt.id} onClick={() => { onSelect(opt.id); }}
              style={{
                appearance:'none', border:`1.5px solid ${opt.color}22`,
                cursor:'pointer', background: opt.color+'0d',
                borderRadius:16, padding:'14px 16px',
                display:'flex', alignItems:'center', gap:14, textAlign:'left',
              }}>
              <div style={{
                width:44, height:44, borderRadius:14, flexShrink:0,
                background: opt.color+'20',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <Icon name={opt.icon} size={22} color={opt.color} stroke={2} />
              </div>
              <div>
                <div style={{ fontSize:15, fontWeight:700, color:T.fg1 }}>{opt.label}</div>
                <div style={{ fontSize:12, color:T.fg3, marginTop:2 }}>{opt.desc}</div>
              </div>
              <div style={{ marginLeft:'auto' }}>
                <Icon name="chevron-right" size={18} color={T.fg4} stroke={1.5} />
              </div>
            </button>
          ))}
        </div>
      </div>
    </BottomSheet>
  );
}

Object.assign(window, { BottomNav, TxForm, TransferForm, FabPicker });