// wallet-screens.jsx — Settings → Wallet sub-pages
// Overview · Tokens · Transactions · Activity Log

const WALLET_SUB_TABS = [
  { id: 'overview', label: 'Overview' },
  { id: 'tokens', label: 'Tokens' },
  { id: 'transactions', label: 'Transactions' },
  { id: 'activity', label: 'Activity Log' },
];

const CHAINS = [
  { id: 'ethereum', label: 'Ethereum', short: 'ETH' },
  { id: 'arbitrum', label: 'Arbitrum', short: 'ARB' },
  { id: 'base', label: 'Base', short: 'BASE' },
  { id: 'polygon', label: 'Polygon', short: 'MATIC' },
  { id: 'optimism', label: 'Optimism', short: 'OP' },
  { id: 'sepolia', label: 'Sepolia', short: 'SEP', testnet: true },
];

// ── Shared: Wallet shell with sub-tabs ──
function WalletShell({ dark, activeSubTab = 'overview', children, topRight }) {
  const t = dark ? G.d : G.l;
  return (
    <div className="gh-scroll" style={{ height: '100%', overflow: 'auto', /* full bleed */ }}>
        {/* Sub-tabs */}
        <div style={{ display: 'flex', borderBottom: `1px solid ${t.border}`, padding: '0 32px' }}>
          {WALLET_SUB_TABS.map(tab => (
            <div key={tab.id} style={{
              padding: '11px 16px', fontSize: 13, fontWeight: tab.id === activeSubTab ? 600 : 400,
              color: tab.id === activeSubTab ? t.fg : t.fg2,
              borderBottom: tab.id === activeSubTab ? `2px solid ${t.fg}` : '2px solid transparent',
              cursor: 'pointer',
            }}>{tab.label}</div>
          ))}
        </div>
        <div style={{ padding: '24px 32px', maxWidth: 720 }}>
          {children}
        </div>
    </div>
  );
}

// ── Chain tabs bar ──
function ChainTabs({ dark, active = 'ethereum', showTestnets = false }) {
  const t = dark ? G.d : G.l;
  const visible = showTestnets ? CHAINS : CHAINS.filter(c => !c.testnet);
  return (
    <div style={{ display: 'flex', gap: 4, marginBottom: 20, flexWrap: 'wrap', alignItems: 'center' }}>
      {visible.map(c => (
        <div key={c.id} style={{
          padding: '5px 12px', borderRadius: 8, fontSize: 12, fontWeight: c.id === active ? 600 : 400,
          background: c.id === active ? t.fg : 'transparent',
          color: c.id === active ? t.bg : t.fg2,
          border: c.id === active ? 'none' : `1px solid ${t.border}`,
          cursor: 'pointer',
        }}>{c.label}</div>
      ))}
    </div>
  );
}


// ═════════════════════════════════════════════════════════════
// 1. OVERVIEW
// ═════════════════════════════════════════════════════════════
function WalletOverview({ dark, showTestnets = false, activeChain = 'ethereum' }) {
  const t = dark ? G.d : G.l;
  return (
    <WalletShell dark={dark} activeSubTab="overview">
      {/* Address card */}
      <div style={{
        padding: 20, marginBottom: 20, borderRadius: 16,
        background: dark ? '#161616' : '#0A0A0A', color: '#FAFAF9',
        border: dark ? '1px solid rgba(255,255,255,0.08)' : 'none',
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
          <div style={{ width: 44, height: 44, borderRadius: 14, background: 'rgba(255,255,255,.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="key" size={20} color="#fff" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, opacity: 0.5, fontFamily: G.mono, letterSpacing: 1, marginBottom: 4 }}>ENS</div>
            <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 2 }}>liu.eth</div>
            <div style={{ fontSize: 13, fontFamily: G.mono, opacity: 0.7, marginBottom: 0 }}>0x7f3a9bc1e4f29ac0d3b8e1f5a6c9d2e0b4f7a1b29C</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ height: 32, padding: '0 14px', background: 'rgba(255,255,255,0.1)', color: '#fff', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 16, fontSize: 12, fontWeight: 500, fontFamily: G.font, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="copy" size={12} color="#fff" /> Copy
            </button>
            <button style={{ height: 32, padding: '0 14px', background: 'rgba(255,255,255,0.1)', color: '#fff', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 16, fontSize: 12, fontWeight: 500, fontFamily: G.font, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="ext" size={12} color="#fff" /> Explorer
            </button>
          </div>
        </div>
      </div>

      {/* Network switcher */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Network</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11, color: t.fg3 }}>Show testnets</span>
          <Toggle on={showTestnets} dark={dark} />
        </div>
      </div>
      <ChainTabs dark={dark} active={activeChain} showTestnets={showTestnets} />

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
        <Card style={{ padding: 16 }}>
          <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>TOTAL VALUE</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6 }}>$8,241</div>
          <div style={{ fontSize: 11, color: t.fg3, marginTop: 4 }}>≈ 2.184 ETH</div>
        </Card>
        <Card style={{ padding: 16 }}>
          <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>ETH BALANCE</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6 }}>2.184</div>
          <div style={{ fontSize: 11, color: t.fg3, marginTop: 4 }}>+0.03 this week</div>
        </Card>
        <Card style={{ padding: 16 }}>
          <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>SIGNATURES</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6 }}>347</div>
          <div style={{ fontSize: 11, color: t.fg3, marginTop: 4 }}>lifetime</div>
        </Card>
      </div>

      {/* Last signature / last tx */}
      <SettingRow dark={dark} label="Last signature" value="2 hours ago · Approve USDC · skill: Tip Bot" />
      <SettingRow dark={dark} label="Last on-chain transaction" value="0xa3f8…c912 · confirmed · 4h ago" action="View" />

      <Divider style={{ margin: '20px 0' }} />

      {/* Existing settings from old wallet page */}
      <SectionHeader title="Security" dark={dark} small />
      <SettingRow dark={dark} label="Confirm every signature" value="Even for low-risk reads." toggle={true} />
      <SettingRow dark={dark} label="Spending cap (per day)" value="0.5 ETH" action="Edit" />
      <SectionHeader title="Backup" dark={dark} small />
      <SettingRow dark={dark} label="Reveal seed phrase" value="Requires device password." action="Reveal" />
      <SettingRow dark={dark} label="Export private key" value="Encrypted file." action="Export" />
      <SettingRow dark={dark} label="Disconnect wallet" value="Remove keys from this device." action="Disconnect" />
    </WalletShell>
  );
}


// ═════════════════════════════════════════════════════════════
// 2. TOKENS
// ═════════════════════════════════════════════════════════════

const TOKEN_LIST = [
  { symbol: 'ETH', name: 'Ether', balance: '2.1840', usd: '$8,241.12', change: '+2.4%', up: true, icon: 'Ξ' },
  { symbol: 'USDC', name: 'USD Coin', balance: '1,820.50', usd: '$1,820.50', change: '+0.01%', up: true, icon: '$' },
  { symbol: 'WETH', name: 'Wrapped Ether', balance: '0.5200', usd: '$1,964.40', change: '+2.3%', up: true, icon: 'W' },
  { symbol: 'UNI', name: 'Uniswap', balance: '142.00', usd: '$1,207.00', change: '-1.8%', up: false, icon: 'U' },
  { symbol: 'LINK', name: 'Chainlink', balance: '85.30', usd: '$1,364.80', change: '+5.1%', up: true, icon: '⬡' },
  { symbol: 'ARB', name: 'Arbitrum', balance: '500.00', usd: '$610.00', change: '-0.5%', up: false, icon: 'A' },
  { symbol: 'AAVE', name: 'Aave', balance: '3.20', usd: '$582.40', change: '+3.2%', up: true, icon: 'Aa' },
  { symbol: 'DAI', name: 'Dai', balance: '0.00', usd: '$0.00', change: '+0.0%', up: true, icon: '◈' },
];

function WalletTokens({ dark, state = 'loaded', activeChain = 'ethereum', showAddDialog = false, hideZero = false }) {
  const t = dark ? G.d : G.l;
  const tokens = hideZero ? TOKEN_LIST.filter(tk => tk.balance !== '0.00') : TOKEN_LIST;

  return (
    <WalletShell dark={dark} activeSubTab="tokens">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <SectionHeader title="Tokens" sub={state === 'loaded' ? `${tokens.length} tokens on ${CHAINS.find(c=>c.id===activeChain)?.label}` : ''} dark={dark} />
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: t.fg3 }}>Hide zero</span>
          <Toggle on={hideZero} dark={dark} />
          <Button variant="secondary" size="sm" icon={<Icon name="plus" size={12} />}>Add token</Button>
        </div>
      </div>
      <ChainTabs dark={dark} active={activeChain} />

      {/* Loading */}
      {state === 'loading' && (
        <div style={{ padding: '60px 0', textAlign: 'center' }}>
          <div style={{ width: 32, height: 32, border: `3px solid ${t.border}`, borderTopColor: t.fg, borderRadius: '50%', margin: '0 auto 16px', animation: 'gh-shimmer 1s linear infinite' }} />
          <div style={{ fontSize: 13, color: t.fg3 }}>Fetching token balances…</div>
        </div>
      )}

      {/* RPC error */}
      {state === 'error' && (
        <Card style={{ padding: 20, textAlign: 'center', border: `1px solid #ff5f57` }}>
          <Icon name="warn" size={28} color="#ff5f57" />
          <div style={{ fontSize: 15, fontWeight: 600, marginTop: 12 }}>RPC Error</div>
          <div style={{ fontSize: 13, color: t.fg2, marginTop: 4, lineHeight: 1.5 }}>
            Could not reach the Ethereum RPC endpoint.<br/>Check your connection and try again.
          </div>
          <div style={{ marginTop: 16 }}>
            <Button variant="primary" size="md" icon={<Icon name="refresh" size={13} color={t.bg} />}>Retry</Button>
          </div>
        </Card>
      )}

      {/* Empty */}
      {state === 'empty' && (
        <div style={{ padding: '60px 0', textAlign: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
            <Icon name="layers" size={24} color={t.fg3} />
          </div>
          <div style={{ fontSize: 15, fontWeight: 600 }}>No tokens found</div>
          <div style={{ fontSize: 13, color: t.fg3, marginTop: 4 }}>This wallet has no token balances on {CHAINS.find(c=>c.id===activeChain)?.label}.</div>
          <div style={{ marginTop: 16 }}>
            <Button variant="secondary" size="md" icon={<Icon name="plus" size={13} />}>Add token manually</Button>
          </div>
        </div>
      )}

      {/* Loaded */}
      {state === 'loaded' && (
        <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14, overflow: 'hidden' }}>
          {/* Header row */}
          <div style={{ display: 'flex', padding: '8px 16px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 0.6, textTransform: 'uppercase', borderBottom: `1px solid ${t.border}` }}>
            <span style={{ flex: 2 }}>Token</span>
            <span style={{ flex: 1, textAlign: 'right' }}>Balance</span>
            <span style={{ flex: 1, textAlign: 'right' }}>Value</span>
            <span style={{ width: 70, textAlign: 'right' }}>24h</span>
          </div>
          {tokens.map((tk, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', padding: '12px 16px',
              borderTop: i === 0 ? 'none' : `1px solid ${t.border2}`,
            }}>
              <div style={{ flex: 2, display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 16, background: t.surface2, border: `1px solid ${t.border}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 14, fontWeight: 600, fontFamily: G.mono,
                }}>{tk.icon}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{tk.symbol}</div>
                  <div style={{ fontSize: 11, color: t.fg3 }}>{tk.name}</div>
                </div>
              </div>
              <div style={{ flex: 1, textAlign: 'right', fontSize: 13, fontFamily: G.mono }}>{tk.balance}</div>
              <div style={{ flex: 1, textAlign: 'right', fontSize: 13, fontWeight: 500 }}>{tk.usd}</div>
              <div style={{ width: 70, textAlign: 'right', fontSize: 12, fontFamily: G.mono, color: tk.up ? '#28c840' : '#ff5f57' }}>{tk.change}</div>
            </div>
          ))}
        </div>
      )}

      {/* Add token dialog */}
      {showAddDialog && (
        <>
          <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 100 }} />
          <div style={{
            position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
            width: 420, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 18,
            boxShadow: t.shadowLg, zIndex: 101, padding: '24px 24px 20px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ fontSize: 17, fontWeight: 600 }}>Add Token</div>
              <button style={{ background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer' }}><Icon name="close" size={18} /></button>
            </div>
            <div style={{ fontSize: 12, fontWeight: 500, color: t.fg2, marginBottom: 6 }}>Contract address</div>
            <div style={{
              height: 44, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10,
              background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 10, marginBottom: 16,
              fontFamily: G.mono, fontSize: 13, color: t.fg3,
            }}>0x…</div>
            <Divider style={{ margin: '4px 0 16px' }} />
            <div style={{ fontSize: 12, fontWeight: 500, color: t.fg2, marginBottom: 10 }}>Popular tokens</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20 }}>
              {['USDT', 'WBTC', 'SHIB', 'PEPE', 'LDO', 'RPL', 'ENS', 'CRV'].map(s => (
                <div key={s} style={{
                  padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 500,
                  background: t.surface2, border: `1px solid ${t.border}`, cursor: 'pointer',
                }}>{s}</div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <Button variant="secondary" size="md">Cancel</Button>
              <Button variant="primary" size="md">Add</Button>
            </div>
          </div>
        </>
      )}
    </WalletShell>
  );
}


// ═════════════════════════════════════════════════════════════
// 3. TRANSACTIONS
// ═════════════════════════════════════════════════════════════

const TX_DATA = [
  { dir: 'out', amount: '0.25 ETH', token: 'ETH', counterparty: 'vitalik.eth', gas: '0.0021', hash: '0xa3f8…c912', block: '19,842,103', time: '4h ago', status: 'confirmed', type: 'Transfer' },
  { dir: 'in', amount: '500 USDC', token: 'USDC', counterparty: '0x3a9b…f102', gas: '0.0018', hash: '0xb7e2…a841', block: '19,842,088', time: '6h ago', status: 'confirmed', type: 'Transfer' },
  { dir: 'out', amount: '∞ USDC', token: 'USDC', counterparty: 'Uniswap V3', gas: '0.0032', hash: '0xc1d4…e720', block: '19,841,990', time: '8h ago', status: 'confirmed', type: 'Approve' },
  { dir: 'out', amount: '1.5 ETH', token: 'ETH', counterparty: '0x8f2c…d451', gas: '0.0045', hash: '0xd9a1…b334', block: '—', time: '12 min ago', status: 'pending', type: 'Transfer' },
  { dir: 'out', amount: '142 UNI', token: 'UNI', counterparty: 'Uniswap V3', gas: '0.0058', hash: '0xe4f7…c289', block: '19,841,512', time: '1d ago', status: 'confirmed', type: 'Contract Call' },
  { dir: 'in', amount: '0.8 ETH', token: 'ETH', counterparty: 'chen.eth', gas: '0.0021', hash: '0xf2b3…a194', block: '19,840,847', time: '2d ago', status: 'confirmed', type: 'Transfer' },
  { dir: 'out', amount: '—', token: '', counterparty: 'Ghast Tip Bot', gas: '—', hash: '0x1a2b…3c4d', block: '—', time: '2d ago', status: 'confirmed', type: 'Sign-only' },
  { dir: 'out', amount: '0.1 ETH', token: 'ETH', counterparty: '0xdead…beef', gas: '0.0034', hash: '0x5e6f…7a8b', block: '19,839,221', time: '3d ago', status: 'failed', type: 'Transfer' },
];

function WalletTransactions({ dark, state = 'loaded', expandedTx = null, activeChain = 'ethereum' }) {
  const t = dark ? G.d : G.l;
  return (
    <WalletShell dark={dark} activeSubTab="transactions"
      topRight={<Button variant="secondary" size="sm" icon={<Icon name="download" size={12} />}>Export CSV</Button>}>
      <SectionHeader title="Transactions" sub={state === 'loaded' ? '128 transactions on Ethereum' : ''} dark={dark} />
      <ChainTabs dark={dark} active={activeChain} />

      {/* Filters */}
      {state === 'loaded' && (
        <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
          {[
            { label: 'Type', value: 'All' },
            { label: 'Status', value: 'All' },
            { label: 'Time', value: 'All time' },
          ].map((f, i) => (
            <div key={i} style={{
              height: 32, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 6,
              background: t.surface, border: `1px solid ${t.border}`, borderRadius: 8,
              fontSize: 12, color: t.fg2, cursor: 'pointer',
            }}>
              <span style={{ color: t.fg3 }}>{f.label}:</span>
              <span style={{ fontWeight: 500, color: t.fg }}>{f.value}</span>
              <Icon name="chevronDown" size={11} color={t.fg3} />
            </div>
          ))}
        </div>
      )}

      {/* Loading */}
      {state === 'loading' && (
        <div style={{ padding: '60px 0', textAlign: 'center' }}>
          <div style={{ width: 32, height: 32, border: `3px solid ${t.border}`, borderTopColor: t.fg, borderRadius: '50%', margin: '0 auto 16px', animation: 'gh-shimmer 1s linear infinite' }} />
          <div style={{ fontSize: 13, color: t.fg3 }}>Loading transactions…</div>
        </div>
      )}

      {/* Empty */}
      {state === 'empty' && (
        <div style={{ padding: '60px 0', textAlign: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
            <Icon name="history" size={24} color={t.fg3} />
          </div>
          <div style={{ fontSize: 15, fontWeight: 600 }}>No transactions</div>
          <div style={{ fontSize: 13, color: t.fg3, marginTop: 4 }}>This wallet has no transaction history on this chain.</div>
        </div>
      )}

      {/* Loaded */}
      {state === 'loaded' && (
        <>
          <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14, overflow: 'hidden' }}>
            {/* Header */}
            <div style={{ display: 'flex', padding: '8px 16px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 0.6, textTransform: 'uppercase', borderBottom: `1px solid ${t.border}` }}>
              <span style={{ width: 30 }}></span>
              <span style={{ flex: 2 }}>Amount</span>
              <span style={{ flex: 2 }}>Counterparty</span>
              <span style={{ flex: 1 }}>Type</span>
              <span style={{ width: 80, textAlign: 'right' }}>Gas</span>
              <span style={{ width: 90, textAlign: 'right' }}>Time</span>
              <span style={{ width: 24 }}></span>
            </div>
            {TX_DATA.map((tx, i) => {
              const isExpanded = expandedTx === i;
              const isFailed = tx.status === 'failed';
              const isPending = tx.status === 'pending';
              return (
                <React.Fragment key={i}>
                  <div style={{
                    display: 'flex', alignItems: 'center', padding: '11px 16px',
                    borderTop: i === 0 ? 'none' : `1px solid ${t.border2}`,
                    background: isFailed ? (dark ? 'rgba(255,95,87,0.06)' : 'rgba(255,95,87,0.04)') : isPending ? (dark ? 'rgba(254,188,46,0.06)' : 'rgba(254,188,46,0.04)') : 'transparent',
                    cursor: 'pointer',
                  }}>
                    {/* Direction arrow */}
                    <div style={{ width: 30 }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: 6,
                        background: tx.dir === 'in' ? (dark ? 'rgba(40,200,64,0.12)' : 'rgba(40,200,64,0.1)') : t.surface2,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        transform: tx.dir === 'in' ? 'rotate(180deg)' : 'none',
                      }}>
                        <Icon name="arrowUp" size={12} color={tx.dir === 'in' ? '#28c840' : t.fg2} />
                      </div>
                    </div>
                    <div style={{ flex: 2 }}>
                      <div style={{ fontSize: 13, fontWeight: 500, fontFamily: G.mono, display: 'flex', alignItems: 'center', gap: 6 }}>
                        {tx.amount}
                        {isPending && <span style={{ display: 'inline-block', width: 10, height: 10, border: `2px solid ${t.fg3}`, borderTopColor: '#febc2e', borderRadius: '50%', animation: 'gh-shimmer 0.8s linear infinite' }} />}
                      </div>
                    </div>
                    <div style={{ flex: 2, fontSize: 12, color: t.fg2, fontFamily: G.mono }}>{tx.counterparty}</div>
                    <div style={{ flex: 1 }}>
                      <Tag variant={isFailed ? 'outline' : 'default'} style={isFailed ? { color: '#ff5f57', borderColor: '#ff5f57' } : {}}>
                        {tx.type}
                      </Tag>
                    </div>
                    <div style={{ width: 80, textAlign: 'right', fontSize: 12, fontFamily: G.mono, color: t.fg3 }}>{tx.gas}</div>
                    <div style={{ width: 90, textAlign: 'right', fontSize: 12, color: t.fg3 }}>{tx.time}</div>
                    <div style={{ width: 24, display: 'flex', justifyContent: 'center' }}>
                      <Icon name={isExpanded ? 'chevronDown' : 'chevronRight'} size={12} color={t.fg4} />
                    </div>
                  </div>

                  {/* Pending: cancel/speedup */}
                  {isPending && !isExpanded && (
                    <div style={{ padding: '6px 16px 10px 46px', borderTop: `1px dashed ${t.border}`, display: 'flex', gap: 8 }}>
                      <Button variant="secondary" size="sm">Speed up</Button>
                      <Button variant="ghost" size="sm" style={{ color: '#ff5f57' }}>Cancel</Button>
                      <span style={{ fontSize: 11, color: t.fg3, display: 'flex', alignItems: 'center', gap: 4 }}>
                        <StatusDot status="pending" size={6} /> Waiting for confirmation…
                      </span>
                    </div>
                  )}

                  {/* Expanded detail */}
                  {isExpanded && (
                    <div style={{ padding: '14px 16px 14px 46px', background: t.surface2, borderTop: `1px solid ${t.border2}` }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: '8px 12px', fontSize: 12 }}>
                        <span style={{ color: t.fg3 }}>Full hash</span>
                        <span style={{ fontFamily: G.mono, display: 'flex', alignItems: 'center', gap: 6 }}>
                          {tx.hash.replace('…', '4f8e9a2b7c3d1e0f5a6b8c9d2e4f7a1b')}
                          <Icon name="copy" size={11} color={t.fg3} style={{ cursor: 'pointer' }} />
                        </span>
                        <span style={{ color: t.fg3 }}>Block</span>
                        <span style={{ fontFamily: G.mono }}>{tx.block}</span>
                        <span style={{ color: t.fg3 }}>Status</span>
                        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                          <StatusDot status={isFailed ? 'off' : isPending ? 'pending' : 'on'} size={6} />
                          {tx.status}
                        </span>
                      </div>
                      <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
                        <Button variant="secondary" size="sm" icon={<Icon name="ext" size={11} />}>View on Explorer</Button>
                        <Button variant="ghost" size="sm">Raw input data</Button>
                        <Button variant="ghost" size="sm">Decoded ABI</Button>
                      </div>
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>
          {/* Virtual scroll indicator */}
          <div style={{ textAlign: 'center', padding: '14px 0', fontSize: 11, color: t.fg3, fontFamily: G.mono }}>
            Showing 8 of 128 · scroll for more
          </div>
        </>
      )}
    </WalletShell>
  );
}


// ═════════════════════════════════════════════════════════════
// 4. ACTIVITY LOG
// ═════════════════════════════════════════════════════════════

const ACTIVITY_LOG = [
  { time: '2 hours ago', type: 'Signature requested', detail: 'Approve USDC spending by skill "Tip Bot" · sig: 0xab12…ef34 · on-chain: yes', icon: 'edit' },
  { time: '4 hours ago', type: 'Network switched', detail: 'Switched from Arbitrum to Ethereum mainnet', icon: 'refresh' },
  { time: '6 hours ago', type: 'Spending cap changed', detail: 'Daily limit changed from 1.0 ETH → 0.5 ETH', icon: 'settings' },
  { time: 'Yesterday', type: 'Signature requested', detail: 'Sign message for skill "Auth Hardening" · sig: 0xcd56…7890 · on-chain: no (sign-only)', icon: 'edit' },
  { time: 'Yesterday', type: 'Backup reminder dismissed', detail: 'Dismissed seed phrase backup reminder', icon: 'bell' },
  { time: '3 days ago', type: 'Wallet connected', detail: 'Wallet created during first-run setup · EVM address bound', icon: 'link' },
  { time: '3 days ago', type: 'Seed revealed', detail: 'Seed phrase viewed after device password verification', icon: 'eye' },
  { time: '4 days ago', type: 'Private key exported', detail: 'Encrypted keystore file exported to ~/Downloads/ghast-key.json', icon: 'download' },
];

function WalletActivity({ dark, expandedItem = null }) {
  const t = dark ? G.d : G.l;
  return (
    <WalletShell dark={dark} activeSubTab="activity">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <SectionHeader title="Activity Log" sub="Local actions — not on-chain transactions." dark={dark} />
        <Button variant="ghost" size="sm" style={{ color: '#ff5f57' }}>Clear log</Button>
      </div>
      <Card style={{ padding: 12, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10, background: t.surface2 }}>
        <Icon name="info" size={14} color={t.fg3} />
        <span style={{ fontSize: 12, color: t.fg2, lineHeight: 1.4 }}>
          Clearing the log removes local records only. On-chain transactions are immutable and unaffected.
        </span>
      </Card>

      <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14, overflow: 'hidden' }}>
        {ACTIVITY_LOG.map((entry, i) => {
          const isExpanded = expandedItem === i;
          const isSensitive = entry.type === 'Seed revealed' || entry.type === 'Private key exported';
          return (
            <React.Fragment key={i}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px',
                borderTop: i === 0 ? 'none' : `1px solid ${t.border2}`,
                background: isSensitive ? (dark ? 'rgba(254,188,46,0.05)' : 'rgba(254,188,46,0.04)') : 'transparent',
                cursor: 'pointer',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: isSensitive ? (dark ? 'rgba(254,188,46,0.12)' : 'rgba(254,188,46,0.1)') : t.surface2,
                  border: `1px solid ${isSensitive ? 'rgba(254,188,46,0.3)' : t.border}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={entry.icon} size={14} color={isSensitive ? '#febc2e' : t.fg2} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
                    {entry.type}
                    {isSensitive && <Tag style={{ background: 'rgba(254,188,46,0.15)', color: '#b88a00', border: 'none', height: 18, fontSize: 10 }}>Sensitive</Tag>}
                  </div>
                  <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{entry.time}</div>
                </div>
                <Icon name={isExpanded ? 'chevronDown' : 'chevronRight'} size={13} color={t.fg4} />
              </div>
              {isExpanded && (
                <div style={{ padding: '12px 16px 14px 58px', background: t.surface2, borderTop: `1px solid ${t.border2}`, fontSize: 12, color: t.fg2, lineHeight: 1.55 }}>
                  {entry.detail}
                </div>
              )}
            </React.Fragment>
          );
        })}
      </div>
    </WalletShell>
  );
}

Object.assign(window, {
  WalletShell, ChainTabs,
  WalletOverview, WalletTokens, WalletTransactions, WalletActivity,
  WALLET_SUB_TABS, CHAINS, TOKEN_LIST, TX_DATA, ACTIVITY_LOG,
});