// app-screens.jsx — AnarchyFi reskinned UI screens
// Exports to window: TokenIcon, TokenPair, Nav, SwapScreen, LiquidityScreen, ManageScreen, POOLS

const { useState, useRef, useEffect } = React;

function useMobile() {
  const [m, setM] = useState(typeof window !== 'undefined' && window.innerWidth < 768);
  useEffect(() => {
    const fn = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return m;
}

/* Epoch clock — 7d epochs aligned to MinterUpgradeable.active_period() */
function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => { const iv = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(iv); }, []);
  const s = target == null ? 0 : Math.max(0, Math.floor((target - now) / 1000));
  return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60, total: s, ready: target != null };
}

const { fmt, ethers: E } = window.Chain;
const DEADLINE = () => BigInt(Math.floor(Date.now() / 1000) + 20 * 60);
const SLIPPAGE_BPS = 50n;
const withSlip = (v) => (v * (10000n - SLIPPAGE_BPS)) / 10000n;
const SECONDS_PER_YEAR = 365 * 86400;

/* PairAPI row → the shape the tables render. APR = weekly gauge emissions in USD annualised over gauge TVL. */
function toPool(p, prices, archPrice) {
  const staked = p.gauge !== E.ZeroAddress && p.total_supply > 0n
    ? fmt.toNum(p.gauge_total_supply, 18) * p.lpPrice : 0;
  const weeklyUsd = fmt.toNum(p.emissions, 18) * archPrice;
  const apr = staked > 0 ? (weeklyUsd * 52 / staked) * 100 : 0;
  const myPool = fmt.toNum(p.account_lp_balance, 18) * p.lpPrice;
  const myStake = fmt.toNum(p.account_gauge_balance, 18) * p.lpPrice;
  return {
    id: p.pair_address, address: p.pair_address, pair: [p.token0_symbol, p.token1_symbol],
    type: p.stable ? 'Stable' : 'Volatile', stable: p.stable,
    tvl: fmt.usd(p.tvl), tvlNum: p.tvl, apr: p.gauge === E.ZeroAddress ? '—' : fmt.pct(apr), aprNum: apr,
    boosted: false, votes: p.gauge !== E.ZeroAddress, gauge: p.gauge, bribe: p.bribe,
    myPool: myPool > 0 ? fmt.usd(myPool) : '—', myStake: myStake > 0 ? fmt.usd(myStake) : '—',
    raw: p,
  };
}

const TOKEN_CFG = {
  ARCH: { bg: '#d62534', label: 'A' },
  ETH:  { bg: '#627EEA', label: 'Ξ' },
  BTC:  { bg: '#F7931A', label: '₿' },
  USDC: { bg: '#2775CA', label: '$' },
  USDT: { bg: '#26A17B', label: '₮' },
  ARB:  { bg: '#28A0F0', label: 'A' },
  BNB:  { bg: '#F0B90B', label: 'B' },
  WBNB: { bg: '#F0B90B', label: 'B' },
  WETH: { bg: '#627EEA', label: 'Ξ' },
  FTM:  { bg: '#1969FF', label: 'F' },
};

function TokenIcon({ symbol, size = 24, style }) {
  const c = TOKEN_CFG[symbol] || { bg: '#4a4640', label: (symbol || '?').slice(0, 1) };
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: c.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.46, color: '#fff', fontWeight: 700,
      fontFamily: 'var(--font-m)', flexShrink: 0, ...style,
    }}>{c.label}</div>
  );
}

function TokenPair({ tokens, size = 24 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <TokenIcon symbol={tokens[0]} size={size} />
      <TokenIcon symbol={tokens[1]} size={size} style={{ marginLeft: -(size * 0.28) }} />
    </div>
  );
}

/* ── NAV ─────────────────────────────────────────────────────────────── */
const NAV_TABS = [['swap','SWAP'],['liquidity','LIQUIDITY'],['vote','VOTE'],['delegate','DELEGATE'],['pro','PRO'],['match','MATCH'],['bribe','BRIBE'],['il','IL']];
const NAV_TABS_SHORT = { liquidity:'LIQ', delegate:'DELG' };

function Nav({ screen, setScreen, accent, connected, onWalletClick }) {
  const isMobile = useMobile();
  const chain = useChain();
  const epoch = useEpoch();
  const ep = useCountdown(epoch.endsAt);
  const short = chain.account ? `${chain.account.slice(0, 6)}...${chain.account.slice(-4)}` : '';
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      height: 58, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: `0 ${isMobile ? 10 : 22}px`, background: 'rgba(5,5,5,0.94)',
      borderBottom: '1px solid rgba(232,230,225,0.09)', backdropFilter: 'blur(14px)',
      gap: 8,
    }} role="navigation">
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 9, flexShrink: 0 }}>
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: accent, animation: 'navBlink 1.2s steps(2) infinite', flexShrink: 0 }} />
        <span style={{ fontFamily: 'var(--font-d)', fontSize: isMobile ? 14 : 18, color: 'var(--ink)', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>ANARCHY.FI</span>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 2, flex: 1, justifyContent: 'center', overflowX: 'auto', overflowY: 'hidden', scrollbarWidth: 'none' }}>
        {NAV_TABS.map(([key, label]) => {
          const active = screen === key || (screen === 'manage' && key === 'liquidity');
          const fullLabel = isMobile ? (NAV_TABS_SHORT[key] || label) : label;
          return (
            <button key={key} onClick={() => setScreen(key)} style={{
              background: 'none', border: 'none', cursor: 'pointer', position: 'relative',
              fontFamily: 'var(--font-m)', fontSize: isMobile ? 9 : 10.5, letterSpacing: isMobile ? '0.05em' : '0.12em',
              color: active ? 'var(--ink)' : 'var(--ink-dim)', padding: isMobile ? '8px 7px' : '8px 11px',
              transition: 'color 0.18s', whiteSpace: 'nowrap', flexShrink: 0,
            }}>
              {fullLabel}
              {active && <div style={{
                position: 'absolute', bottom: 0, left: 4, right: 4, height: 2,
                background: accent, borderRadius: '2px 2px 0 0',
              }} />}
            </button>
          );
        })}
      </div>

      {/* Epoch clock — global header widget */}
      {!isMobile && (
        <div title="Epoch = 7 days, aligned to MinterUpgradeable.active_period()" style={{
          display:'flex', alignItems:'center', gap:8, flexShrink:0,
          border:'1px solid rgba(232,230,225,0.12)', padding:'5px 11px', background:'rgba(232,230,225,0.03)',
        }}>
          <span style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.16em' }}>EPOCH {epoch.number ?? '—'}</span>
          <span style={{ fontFamily:'var(--font-c)', fontSize:15, color: ep.ready && ep.d < 1 ? '#ffd47c' : 'var(--ink)', letterSpacing:'0.05em' }}>
            {ep.ready ? `${ep.d}d ${String(ep.h).padStart(2,'0')}h ${String(ep.m).padStart(2,'0')}m` : '—'}
          </span>
          <span style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.1em', borderLeft:'1px solid rgba(232,230,225,0.12)', paddingLeft:8 }}>{chain.chain.short}</span>
        </div>
      )}

      {/* Wallet button */}
      {connected ? (
        <button onClick={onWalletClick} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'flex-end', flexShrink: 0,
          padding: isMobile ? '4px 8px' : '5px 12px', border: '1px solid rgba(232,230,225,0.12)',
          background: 'none', cursor: 'pointer', gap: 1,
        }}>
          {!isMobile && <span style={{ fontFamily: 'var(--font-m)', fontSize: 12, color: 'var(--ink)', letterSpacing: '0.04em' }}>{chain.wallet?.info?.name || 'WALLET'}</span>}
          <span style={{ fontFamily: 'var(--font-m)', fontSize: 10, color: isMobile ? 'var(--ink)' : 'var(--ink-dim)' }}>{short}</span>
        </button>
      ) : (
        <button onClick={onWalletClick} style={{
          padding: isMobile ? '7px 10px' : '8px 20px',
          background: accent, border: `1px solid ${accent}`,
          cursor: 'pointer', fontFamily: 'var(--font-d)', fontSize: isMobile ? 11 : 14,
          letterSpacing: '0.08em', color: '#fff', flexShrink: 0,
          boxShadow: `0 0 14px ${accent}44`, transition: 'all 0.2s',
          display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
        }}>
          {isMobile ? 'CONNECT' : <><span style={{ fontSize: 12 }}>⬡</span> CONNECT WALLET</>}
        </button>
      )}
    </nav>
  );
}

/* ── CARD WRAPPER ────────────────────────────────────────────────────── */
function Card({ children, style, accent, width }) {
  return (
    <div style={{
      position: 'relative', width: width || 440,
      background: 'rgba(10,8,7,0.88)', border: '1px solid rgba(232,230,225,0.09)',
      backdropFilter: 'blur(16px)', ...style,
    }}>
      {/* corner brackets */}
      {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
        <div key={v+h} style={{
          position: 'absolute', [v]: -1, [h]: -1, width: 16, height: 16,
          [`border${v.charAt(0).toUpperCase()+v.slice(1)}`]: `2px solid ${accent}`,
          [`border${h.charAt(0).toUpperCase()+h.slice(1)}`]: `2px solid ${accent}`,
        }} />
      ))}
      {children}
    </div>
  );
}

/* ── SWAP SCREEN ─────────────────────────────────────────────────────── */
function SwapScreen({ accent, onTx }) {
  const isMobile = useMobile();
  const chain = useChain();
  const TOKENS_LIST = chain.tokens.map(t => t.symbol);
  const [fromTok, setFromTok]   = useState('USDC');
  const [toTok, setToTok]       = useState(null);
  const [fromAmt, setFromAmt]   = useState('');
  const [picking, setPicking]   = useState(null);
  const [quote, setQuote]       = useState(null);   // { out, outNoFee, stable, error }

  useEffect(() => { if (TOKENS_LIST.length && !TOKENS_LIST.includes(fromTok)) setFromTok(TOKENS_LIST[0]); }, [TOKENS_LIST.join()]);

  const from = chain.tokenBySym[fromTok];
  const to = toTok ? chain.tokenBySym[toTok] : null;
  const { data: fromBal } = useTokenBalance(from);
  const { data: toBal } = useTokenBalance(to);
  const BALANCE = fromBal == null || !from ? null : fmt.toNum(fromBal, from.decimals);

  const amountIn = (() => { try { return from && fromAmt ? fmt.parse(fromAmt, from.decimals) : 0n; } catch { return 0n; } })();

  useEffect(() => {
    if (!chain.read || !from || !to || amountIn <= 0n) { setQuote(null); return; }
    let alive = true;
    const t = setTimeout(async () => {
      try {
        const c = chain.read;
        const [out, stable] = await c.router.getAmountOut(amountIn, from.address, to.address);
        if (out === 0n) throw new Error('No pool for this pair');
        let outForUser = out;
        try {
          const pair = await c.router.pairFor(from.address, to.address, stable);
          outForUser = await c.at('Pair', pair).getAmountOutFor.staticCall(amountIn, from.address, chain.account ?? E.ZeroAddress, { from: chain.account ?? E.ZeroAddress });
        } catch {}
        if (alive) setQuote({ out: outForUser, outNoFee: out, stable, error: null });
      } catch (e) {
        if (alive) setQuote({ out: 0n, error: window.Chain.decodeError(e).message });
      }
    }, 250);
    return () => { alive = false; clearTimeout(t); };
  }, [chain.read, from?.address, to?.address, amountIn.toString(), chain.account, chain.blockNumber]);

  const toAmt = quote?.out ? fmt.units(quote.out, to.decimals, 6) : '';
  function setPct(p) {
    if (BALANCE == null) return;
    let a = BALANCE * p / 100;
    if (from.native && p === 100) a = Math.max(0, a - 0.01);
    setFromAmt(a.toFixed(Math.min(6, from.decimals)));
  }
  function flip() {
    if (!toTok) return;
    setFromTok(toTok); setToTok(fromTok);
    setFromAmt(toAmt);
  }
  function onFromChange(v) { setFromAmt(v.replace(/[^0-9.]/g, '')); }

  const insufficient = BALANCE != null && parseFloat(fromAmt || '0') > BALANCE;
  const canSwap = amountIn > 0n && to && quote?.out > 0n && !insufficient && chain.connected;

  function doSwap() {
    const minOut = withSlip(quote.out);
    const routes = [{ from: from.native ? chain.book.contracts.weth : from.address, to: to.native ? chain.book.contracts.weth : to.address, stable: quote.stable }];
    onTx('swap', async (w, stage) => {
      const me = chain.account;
      if (from.native) return w.router.swapExactETHForTokens(minOut, routes, me, DEADLINE(), { value: amountIn });
      await ensureAllowance(w, me, from.address, chain.book.contracts.router, amountIn, stage);
      stage('sign');
      if (to.native) return w.router.swapExactTokensForETH(amountIn, minOut, routes, me, DEADLINE());
      return w.router.swapExactTokensForTokens(amountIn, minOut, routes, me, DEADLINE());
    });
  }

  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', minHeight:'100vh', paddingTop:58, paddingLeft: isMobile ? 12 : 0, paddingRight: isMobile ? 12 : 0 }}>
      {/* Token picker overlay */}
      {picking && (
        <div onClick={() => setPicking(null)} style={{
          position:'fixed', inset:0, background:'rgba(5,5,5,0.82)', zIndex:300,
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Card accent={accent} width={300} style={{ padding: 24 }} onClick={e => e.stopPropagation()}>
            <div style={{ fontFamily:'var(--font-d)', fontSize:16, color:'var(--ink)', letterSpacing:'0.08em', marginBottom:16 }}>SELECT TOKEN</div>
            <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
              {TOKENS_LIST.filter(t => t !== (picking==='from'?toTok:fromTok)).map(tok => (
                <button key={tok} onClick={() => {
                  if (picking==='from') setFromTok(tok); else { setToTok(tok); }
                  setPicking(null);
                }} style={{
                  display:'flex', alignItems:'center', gap:12,
                  background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)',
                  padding:'10px 14px', cursor:'pointer', color:'var(--ink)',
                  fontFamily:'var(--font-m)', fontSize:12, letterSpacing:'0.08em',
                  transition:'background 0.15s', textAlign:'left',
                }}>
                  <TokenIcon symbol={tok} size={26} />{tok}
                </button>
              ))}
            </div>
          </Card>
        </div>
      )}

      <Card accent={accent} width={isMobile ? '100%' : 432} style={{ padding: isMobile ? '22px 16px' : '30px 28px' }}>
        {/* header */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:22 }}>
          <span style={{ fontFamily:'var(--font-d)', fontSize:22, color:'var(--ink)', letterSpacing:'0.06em' }}>SWAP</span>
          <button style={{ background:'none', border:'1px solid rgba(232,230,225,0.14)', padding:'4px 10px', cursor:'pointer', color:'var(--ink-dim)', fontFamily:'var(--font-c)', fontSize:14, letterSpacing:'0.05em' }}>⚙ SLIPPAGE</button>
        </div>

        {/* FROM */}
        <div style={{ background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)', padding:16, marginBottom:2 }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
            <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.18em' }}>FROM</span>
            <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>
              BAL: <span style={{ color:'var(--ink)' }}>{BALANCE == null ? '—' : fmt.num(BALANCE, 4)} {fromTok}</span>
            </span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
            <input value={fromAmt} onChange={e => onFromChange(e.target.value)} placeholder="0.00"
              style={{ background:'none', border:'none', outline:'none', fontFamily:'var(--font-m)', fontSize:26, fontWeight:700, color:'var(--ink)', width:160, minWidth:0 }} />
            <button onClick={() => setPicking('from')} style={{
              display:'flex', alignItems:'center', gap:7,
              background:'rgba(232,230,225,0.07)', border:'1px solid rgba(232,230,225,0.14)',
              padding:'7px 12px', cursor:'pointer', color:'var(--ink)',
              fontFamily:'var(--font-m)', fontSize:12, letterSpacing:'0.07em', flexShrink:0,
            }}>
              <TokenIcon symbol={fromTok} size={18} />{fromTok} <span style={{ color:'var(--ink-mute)', fontSize:9 }}>▼</span>
            </button>
          </div>
        </div>

        {/* % row */}
        <div style={{ display:'flex', gap:3, marginBottom:3 }}>
          {[10,25,50,75,100].map(p => (
            <button key={p} onClick={() => setPct(p)} style={{
              flex:1, background:'rgba(232,230,225,0.03)', border:'1px solid rgba(232,230,225,0.07)',
              padding:'3px 0', cursor:'pointer', color:'var(--ink-dim)',
              fontFamily:'var(--font-c)', fontSize:13, letterSpacing:'0.04em',
              transition:'all 0.15s',
            }}>{p}%</button>
          ))}
        </div>

        {/* flip */}
        <div style={{ display:'flex', justifyContent:'center', margin:'8px 0' }}>
          <button onClick={flip} style={{
            background:'rgba(232,230,225,0.04)', border:`1px solid ${accent}44`,
            width:34, height:34, cursor:'pointer', color:accent, fontSize:17,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>⇅</button>
        </div>

        {/* TO */}
        <div style={{ background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)', padding:16, marginBottom:20 }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
            <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.18em' }}>TO</span>
            <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>BAL: {toBal != null && to ? <span style={{ color:'var(--ink)' }}>{fmt.num(fmt.toNum(toBal, to.decimals), 4)} {toTok}</span> : '—'}</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
            <span style={{ fontFamily:'var(--font-m)', fontSize:26, fontWeight:700, color: toTok ? 'var(--ink)' : 'var(--ink-mute)' }}>
              {toAmt || '0.00'}
            </span>
            <button onClick={() => setPicking('to')} style={{
              display:'flex', alignItems:'center', gap:7, flexShrink:0,
              background: toTok ? 'rgba(232,230,225,0.07)' : `${accent}18`,
              border:`1px solid ${toTok ? 'rgba(232,230,225,0.14)' : accent}`,
              padding:'7px 12px', cursor:'pointer',
              color: toTok ? 'var(--ink)' : accent,
              fontFamily:'var(--font-m)', fontSize:12, letterSpacing:'0.07em',
            }}>
              {toTok ? <><TokenIcon symbol={toTok} size={18} />{toTok}</> : 'SELECT TOKEN'}
              <span style={{ fontSize:9, opacity:0.7 }}>▼</span>
            </button>
          </div>
        </div>

        {quote?.out > 0n && (
          <div style={{
            marginBottom:14, padding:'9px 14px',
            background:'rgba(232,230,225,0.03)', border:'1px solid rgba(232,230,225,0.06)',
            display:'flex', flexDirection:'column', gap:5,
            fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.1em',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between' }}><span>RATE</span><span style={{ color:'var(--ink)' }}>1 {fromTok} = {fmt.num(fmt.toNum(quote.out, to.decimals) / parseFloat(fromAmt), 6)} {toTok}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between' }}><span>MIN RECEIVED ({Number(SLIPPAGE_BPS)/100}% SLIPPAGE)</span><span style={{ color:'var(--ink)' }}>{fmt.units(withSlip(quote.out), to.decimals, 6)} {toTok}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between' }}><span>ROUTE</span><span style={{ color:'var(--ink)' }}>{quote.stable ? 'STABLE' : 'VOLATILE'} POOL</span></div>
          </div>
        )}
        {quote?.error && (
          <div style={{ marginBottom:14, fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c', letterSpacing:'0.06em' }}>{quote.error}</div>
        )}

        <button onClick={() => canSwap && doSwap()} style={{
          width:'100%', padding:'14px',
          background: canSwap ? accent : 'rgba(232,230,225,0.05)',
          border:`1px solid ${canSwap ? accent : 'rgba(232,230,225,0.1)'}`,
          cursor: canSwap ? 'pointer' : 'not-allowed',
          fontFamily:'var(--font-d)', fontSize:18, letterSpacing:'0.1em',
          color: canSwap ? '#fff' : 'var(--ink-mute)',
          boxShadow: canSwap ? `0 0 24px ${accent}44` : 'none',
          transition:'all 0.2s',
        }}>
          {!chain.connected ? 'CONNECT WALLET' : !toTok ? 'SELECT TOKEN' : !fromAmt ? 'ENTER AMOUNT' : insufficient ? 'INSUFFICIENT BALANCE' : quote?.error ? 'NO ROUTE' : !quote ? 'QUOTING...' : 'SWAP'}
        </button>
      </Card>
    </div>
  );
}

/* ── LIQUIDITY SCREEN ────────────────────────────────────────────────── */
function LiquidityScreen({ accent, onSelect, onTx }) {
  const isMobile = useMobile();
  const chain = useChain();
  const [infoPool, setInfoPool] = useState(null);
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState('all');
  const { data: pairData, loading, error } = usePairs();
  const POOLS = (pairData?.pairs ?? []).map(p => toPool(p, pairData.price, pairData.archPrice)).sort((a, b) => b.tvlNum - a.tvlNum);
  const claimable = POOLS.filter(p => p.raw.account_gauge_earned > 0n);
  function claimAll() {
    onTx('claim-emissions', async (w) => {
      const gauges = claimable.map(p => p.gauge);
      const ids = [];
      for (const p of claimable) {
        const g = w.at('VeGauge', p.gauge);
        const n = Number(await g.balanceOf(chain.account));
        for (let i = 0; i < n; i++) ids.push({ gauge: p.gauge, id: await g.tokenOfOwnerByIndex(chain.account, i) });
      }
      const gs = ids.map(x => x.gauge), tids = ids.map(x => x.id);
      return w.voter.claimRewards(gs, tids);
    });
  }
  const filtered = POOLS.filter(p => {
    const q = search.toLowerCase();
    const matchQ = p.pair.some(t => t.toLowerCase().includes(q));
    const matchF = filter === 'all' || (filter === 'stable' && p.type === 'Stable') || (filter === 'volatile' && p.type === 'Volatile') || (filter === 'mine' && p.myPool !== '—');
    return matchQ && matchF;
  });

  return (
    <div style={{ minHeight:'100vh', paddingTop:58 }}>
      <div style={{ width:'100%', maxWidth:900, padding:'40px 24px 60px', margin:'0 auto' }}>
        {/* Page header */}
        <div style={{ marginBottom:28 }}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:6 }}>
            <div style={{ width:22, height:2, background:accent }} />
            <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:accent, letterSpacing:'0.42em' }}>LIQUIDITY POOLS</span>
          </div>
          <div style={{ fontFamily:'var(--font-d)', fontSize:48, color:'var(--ink)', letterSpacing:'0.01em', lineHeight:1 }}>POOLS</div>
        </div>

        <Card accent={accent} width="100%" style={{ padding:0 }}>
          {/* Toolbar */}
          <div style={{ padding: isMobile?'12px 14px':'18px 20px', display:'flex', gap:8, borderBottom:'1px solid rgba(232,230,225,0.07)', flexWrap:'wrap' }}>
            <div style={{ flex:1, minWidth:140, display:'flex', alignItems:'center', gap:10, background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)', padding:'0 12px', height:36 }}>
              <span style={{ color:'var(--ink-mute)', fontSize:13 }}>⌕</span>
              <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search..."
                style={{ background:'none', border:'none', outline:'none', fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)', width:'100%', letterSpacing:'0.06em' }} />
            </div>
            <div style={{ display:'flex', gap:4 }}>
              {(isMobile
                ? [['all','ALL'],['stable','STB'],['volatile','VOL'],['mine','MINE']]
                : [['all','ALL'],['stable','STABLE'],['volatile','VOLATILE'],['mine','MY POOLS']]
              ).map(([k,l]) => (
                <button key={k} onClick={() => setFilter(k)} style={{
                  background: filter===k ? accent : 'rgba(232,230,225,0.04)',
                  border: `1px solid ${filter===k ? accent : 'rgba(232,230,225,0.1)'}`,
                  padding: isMobile?'0 8px':'0 12px', height:36, cursor:'pointer',
                  fontFamily:'var(--font-m)', fontSize: isMobile?9:10, letterSpacing:'0.08em',
                  color: filter===k ? '#fff' : 'var(--ink-dim)',
                  boxShadow: filter===k ? `0 0 10px ${accent}44` : 'none', transition:'all 0.15s',
                }}>{l}</button>
              ))}
            </div>
            {!isMobile && <>
              <button onClick={() => POOLS[0] && onSelect(POOLS[0])} style={{ background:accent, border:`1px solid ${accent}`, padding:'0 16px', height:36, cursor:'pointer', fontFamily:'var(--font-d)', fontSize:14, letterSpacing:'0.08em', color:'#fff', boxShadow:`0 0 16px ${accent}55` }}>+ ADD / REMOVE</button>
              <button onClick={() => claimable.length && claimAll()} style={{ background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.1)', padding:'0 14px', height:36, cursor: claimable.length ? 'pointer' : 'not-allowed', fontFamily:'var(--font-m)', fontSize:10, letterSpacing:'0.1em', color: claimable.length ? 'var(--ink)' : 'var(--ink-dim)' }}>CLAIM ALL ({claimable.length})</button>
            </>}
            {isMobile && <button onClick={() => POOLS[0] && onSelect(POOLS[0])} style={{ background:accent, border:`1px solid ${accent}`, padding:'0 12px', height:36, cursor:'pointer', fontFamily:'var(--font-d)', fontSize:12, letterSpacing:'0.06em', color:'#fff' }}>+ ADD</button>}
          </div>

          {/* Table header */}
          <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr 26px 58px 24px':'200px 1fr 100px 110px 110px 40px', padding: isMobile?'8px 14px':'10px 20px', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
            {(isMobile?['PAIR','','APR','']:['PAIR','TVL','APR','MY POOL','MY STAKE','']).map((h,i) => (
              <div key={i} style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', letterSpacing:'0.15em', textAlign: (isMobile ? i>1 : i>1) ? 'right' : 'left' }}>{h}</div>
            ))}
          </div>

          {/* Rows */}
          {filtered.map((pool, i) => (
            <PoolRow key={pool.id} pool={pool} accent={accent} odd={i%2===0} onClick={() => onSelect(pool)} onInfo={() => setInfoPool(pool)} />
          ))}
          {filtered.length === 0 && (
            <div style={{ padding:'40px 20px', textAlign:'center', fontFamily:'var(--font-c)', fontSize:18, color:'var(--ink-mute)', letterSpacing:'0.1em' }}>
              {loading && !pairData ? 'LOADING POOLS...' : error ? `COULD NOT LOAD POOLS — ${error.toUpperCase()}` : chain.book === null ? 'NOT DEPLOYED ON THIS NETWORK' : 'NO POOLS FOUND'}
            </div>
          )}
        </Card>
      </div>

      {/* Mobile info sheet */}
      {infoPool && (
        <MobileInfoSheet
          title={infoPool.pair.join('/')}
          tokens={infoPool.pair}
          accent={accent}
          onClose={() => setInfoPool(null)}
          stats={[
            { label:'TYPE',     value: infoPool.type.toUpperCase(), mono:true },
            { label:'APR',      value: infoPool.apr, hi:true },
            { label:'TVL',      value: infoPool.tvl },
            { label:'GAUGE',    value: infoPool.votes ? 'YES' : 'NO', color: infoPool.votes ? '#4ade80' : 'var(--ink-mute)' },
            { label:'MY POOL',  value: infoPool.myPool, color: infoPool.myPool==='—'?'var(--ink-mute)':undefined },
            { label:'MY STAKE', value: infoPool.myStake, color: infoPool.myStake==='—'?'var(--ink-mute)':undefined },
          ]}
        />
      )}
    </div>
  );
}

function PoolRow({ pool, accent, odd, onClick, onInfo }) {
  const [hov, setHov] = useState(false);
  const isMobile = useMobile();
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr 26px 58px 24px' : '200px 1fr 100px 110px 110px 40px',
        padding: isMobile ? '12px 14px' : '14px 20px',
        cursor:'pointer', transition:'background 0.15s',
        background: hov ? 'rgba(232,230,225,0.04)' : odd ? 'rgba(232,230,225,0.015)' : 'transparent',
        borderBottom:'1px solid rgba(232,230,225,0.04)',
        alignItems:'center',
      }}>
      <div style={{ display:'flex', alignItems:'center', gap: isMobile ? 8 : 10 }}>
        <TokenPair tokens={pool.pair} size={isMobile ? 18 : 22} />
        <div>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <span style={{ fontFamily:'var(--font-m)', fontSize: isMobile ? 12 : 13, color:'var(--ink)', letterSpacing:'0.06em' }}>{pool.pair.join('/')}</span>
            {pool.boosted && !isMobile && <span style={{ fontFamily:'var(--font-c)', fontSize:12, color:'#ffd47c', letterSpacing:'0.04em' }}>⚡BOOST</span>}
          </div>
          <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.1em' }}>
            {pool.type.toUpperCase()}{pool.boosted && isMobile ? ' ⚡' : ''}
          </span>
          {!pool.votes && (
            <div style={{ marginTop:3, fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.1em', border:'1px solid rgba(232,230,225,0.14)', padding:'2px 6px', display:'inline-block' }}>NO VOTING POWER</div>
          )}
          {pool.votes && !isMobile && (
            <div style={{ marginTop:3, fontFamily:'var(--font-m)', fontSize:9, color:accent, letterSpacing:'0.1em', border:`1px solid ${accent}55`, background:`${accent}12`, padding:'2px 6px', display:'inline-block' }}>VOTING ELIGIBLE</div>
          )}
        </div>
      </div>
      {!isMobile && <div style={{ fontFamily:'var(--font-m)', fontSize:13, color:'var(--ink)', textAlign:'left' }}>{pool.tvl}</div>}
      {/* ℹ — mobile only, own column */}
      {isMobile && (
        <div style={{ display:'flex', justifyContent:'center' }}>
          <button onClick={e => { e.stopPropagation(); onInfo(); }} style={{
            background:'rgba(232,230,225,0.07)', border:'1px solid rgba(232,230,225,0.18)',
            width:20, height:20, cursor:'pointer', color:'var(--ink-dim)',
            fontFamily:'var(--font-m)', fontSize:10, display:'flex', alignItems:'center', justifyContent:'center',
          }}>ℹ</button>
        </div>
      )}
      {/* APR */}
      <div style={{ fontFamily:'var(--font-m)', fontSize:13, color:pool.boosted ? '#ffd47c' : '#4ade80', textAlign:'right' }}>{pool.apr}</div>
      {!isMobile && <div style={{ fontFamily:'var(--font-m)', fontSize:13, color: pool.myPool==='—' ? 'var(--ink-mute)' : 'var(--ink)', textAlign:'right' }}>{pool.myPool}</div>}
      {!isMobile && <div style={{ fontFamily:'var(--font-m)', fontSize:13, color: pool.myStake==='—' ? 'var(--ink-mute)' : 'var(--ink)', textAlign:'right' }}>{pool.myStake}</div>}
      <div style={{ display:'flex', justifyContent:'flex-end', color: hov ? accent : 'var(--ink-mute)', fontSize:14, transition:'color 0.15s' }}>→</div>
    </div>
  );
}

/* ── MANAGE SCREEN ───────────────────────────────────────────────────── */
function ManageScreen({ pool: initial, accent, onBack, onTx, onBoosted }) {
  const [tab, setTab] = useState('staking');
  const isMobile = useMobile();
  const chain = useChain();
  const { data: pairData } = usePairs();
  const live = pairData?.pairs.find(p => p.pair_address === initial.address);
  const pool = live ? toPool(live, pairData.price, pairData.archPrice) : initial;

  const { data: positions, loading: posLoading } = useLoad(async (c) => {
    if (!chain.account || pool.gauge === E.ZeroAddress) return [];
    const rows = await c.positionLens.positionsOf(pool.gauge, chain.account);
    const g = c.at('VeGauge', pool.gauge);
    const [extBribe, intBribe] = await Promise.all([g.external_bribe(), g.internal_bribe()]);
    return rows.map(r => ({
      tokenId: r.tokenId, amount: r.amount, latchedInitialFee: Number(r.latchedInitialFee), entry: Number(r.entry), end: Number(r.end),
      voted: r.voted, earned: r.earned, exitFeeRate: Number(r.exitFeeRate), feeFree: r.feeFree, netIfWithdrawnNow: r.netIfWithdrawnNow,
      withdrawBlocker: r.withdrawBlocker, extBribe, intBribe,
    }));
  }, [pool.gauge]);

  return (
    <div style={{ minHeight:'100vh', paddingTop:58 }}>
      <div style={{ width:'100%', maxWidth:900, padding: isMobile?'20px 14px 60px':'40px 24px 60px', margin:'0 auto', display:'flex', gap:24, alignItems:'flex-start', flexWrap:'wrap', flexDirection: isMobile?'column':'row' }}>
        {/* Left panel */}
        <div style={{ flex: isMobile ? '1 1 100%' : '0 0 460px', width: isMobile ? '100%' : undefined }}>
          <button onClick={onBack} style={{
            display:'flex', alignItems:'center', gap:6, background:'none', border:'none',
            cursor:'pointer', color:'var(--ink-dim)', fontFamily:'var(--font-m)', fontSize:11, letterSpacing:'0.1em',
            marginBottom:20, padding:0,
          }}>← BACK TO POOLS</button>

          <Card accent={accent} width="100%" style={{ padding:'26px 26px' }}>
            {/* Pool header */}
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:22 }}>
              <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                <TokenPair tokens={pool.pair} size={28} />
                <div>
                  <div style={{ fontFamily:'var(--font-d)', fontSize:18, color:'var(--ink)', letterSpacing:'0.04em' }}>
                    {pool.pair.join('/')}
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:2 }}>
                    <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.1em' }}>{pool.type.toUpperCase()}</span>
                    {!pool.votes && <span style={{ fontFamily:'var(--font-c)', fontSize:12, color:'var(--ink-mute)' }}>NO GAUGE</span>}
                  </div>
                </div>
              </div>
              {chain.explorerAddr(pool.address) ? (
                <a href={chain.explorerAddr(pool.address)} target="_blank" rel="noreferrer" title={pool.address} style={{ textDecoration:'none', border:'1px solid rgba(232,230,225,0.14)', padding:'4px 10px', color:'var(--ink-dim)', fontFamily:'var(--font-m)', fontSize:10 }}>{fmt.short(pool.address)}</a>
              ) : (
                <span title={pool.address} style={{ border:'1px solid rgba(232,230,225,0.14)', padding:'4px 10px', color:'var(--ink-dim)', fontFamily:'var(--font-m)', fontSize:10 }}>{fmt.short(pool.address)}</span>
              )}
            </div>

            {/* Tab bar */}
            <div style={{ display:'flex', background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.07)', marginBottom:22, position:'relative' }}>
              {[['deposit','DEPOSIT'],['staking','STAKING'],['positions',`POSITIONS${positions?.length ? ` (${positions.length})` : ''}`]].map(([k,l]) => (
                <button key={k} onClick={() => setTab(k)} style={{
                  flex:1, padding:'9px 0', background: tab===k ? accent : 'none',
                  border:'none', cursor:'pointer',
                  fontFamily:'var(--font-m)', fontSize:10, letterSpacing:'0.12em',
                  color: tab===k ? '#fff' : 'var(--ink-dim)',
                  boxShadow: tab===k ? `0 0 16px ${accent}55` : 'none',
                  transition:'all 0.18s',
                }}>{l}</button>
              ))}
            </div>

            {tab === 'deposit'   && <DepositTab   pool={pool} accent={accent} onTx={onTx} />}
            {tab === 'staking'   && <StakingTab   pool={pool} accent={accent} onTx={onTx} onBoosted={onBoosted} />}
            {tab === 'positions' && <PositionsTab positions={positions ?? []} loading={posLoading} pool={pool} accent={accent} onTx={onTx} />}
          </Card>
        </div>

        {/* Right stats */}
        <div style={{ flex:1, minWidth: isMobile?'100%':200, display:'flex', flexDirection: isMobile?'row':'column', flexWrap:'wrap', gap:10, marginTop: isMobile?0:64 }}>
          {[
            { label:'TVL', value:pool.tvl },
            { label:'APR', value:pool.apr, highlight:true },
            { label:'MY POOL', value:pool.myPool },
            { label:'MY STAKE', value:pool.myStake },
          ].map(s => (
            <div key={s.label} style={{ padding: isMobile?'10px 12px':'14px 16px', border:'1px solid rgba(232,230,225,0.08)', background:'rgba(10,8,7,0.7)', flex: isMobile?'1 1 calc(50% - 5px)':undefined }}>
              <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.18em', marginBottom:4 }}>{s.label}</div>
              <div style={{ fontFamily:'var(--font-d)', fontSize: isMobile?20:28, color: s.highlight ? accent : 'var(--ink)', letterSpacing:'0.02em' }}>{s.value}</div>
            </div>
          ))}
          <div style={{ padding: isMobile?'10px 12px':'14px 16px', border:'1px solid rgba(232,230,225,0.08)', background:'rgba(10,8,7,0.7)', flex: isMobile?'1 1 100%':undefined }}>
            <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.18em', marginBottom:4 }}>RESERVES</div>
            <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink)', lineHeight:1.7 }}>
              {pool.raw ? <>{fmt.units(pool.raw.reserve0, pool.raw.token0_decimals, 2)} {pool.pair[0]}<br/>{fmt.units(pool.raw.reserve1, pool.raw.token1_decimals, 2)} {pool.pair[1]}</> : '—'}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function TokenAmountBox({ label, symbol, value, onChange, balance, decimals, onMax, tokens }) {
  return (
    <div style={{ background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)', padding:'14px 16px', marginBottom:8 }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
        <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.16em' }}>{label}</span>
        <button onClick={onMax} disabled={balance == null} style={{ background:'none', border:'none', cursor: balance == null ? 'default' : 'pointer', padding:0, fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>
          BAL: <span style={{ color:'var(--ink)' }}>{balance == null ? '—' : fmt.units(balance, decimals, 4)}</span>
        </button>
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <input value={value} onChange={e => onChange(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0.00"
          style={{ background:'none', border:'none', outline:'none', fontFamily:'var(--font-m)', fontSize:22, fontWeight:700, color:'var(--ink)', width:140 }} />
        <div style={{ display:'flex', alignItems:'center', gap:6, background:'rgba(232,230,225,0.07)', border:'1px solid rgba(232,230,225,0.12)', padding:'6px 10px' }}>
          {tokens ? <TokenPair tokens={tokens} size={18} /> : <TokenIcon symbol={symbol} size={18} />}
          <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink)' }}>{symbol}</span>
        </div>
      </div>
    </div>
  );
}

const safeParse = (v, d) => { try { return v ? fmt.parse(v, d) : 0n; } catch { return 0n; } };

function DepositTab({ pool, accent, onTx }) {
  const chain = useChain();
  const [a0, setA0] = useState(''); const [a1, setA1] = useState('');
  const [mode, setMode] = useState('add');
  const [lpAmt, setLpAmt] = useState('');
  const raw = pool.raw;
  const t0 = chain.tokenByAddr[raw?.token0.toLowerCase()] || { address: raw?.token0, symbol: pool.pair[0], decimals: raw?.token0_decimals };
  const t1 = chain.tokenByAddr[raw?.token1.toLowerCase()] || { address: raw?.token1, symbol: pool.pair[1], decimals: raw?.token1_decimals };
  const weth = chain.book?.contracts.weth.toLowerCase();
  const isEth = (t) => t.address?.toLowerCase() === weth;
  const { data: b0 } = useTokenBalance(isEth(t0) ? { ...t0, native: true } : t0);
  const { data: b1 } = useTokenBalance(isEth(t1) ? { ...t1, native: true } : t1);
  const lpBal = raw?.account_lp_balance ?? null;

  // Keep the two sides at the pool ratio: editing one side fills the other.
  function edit0(v) { setA0(v); if (raw && raw.reserve0 > 0n) { const x = safeParse(v, t0.decimals); setA1(x ? fmt.units(x * raw.reserve1 / raw.reserve0, t1.decimals, 6) : ''); } }
  function edit1(v) { setA1(v); if (raw && raw.reserve1 > 0n) { const x = safeParse(v, t1.decimals); setA0(x ? fmt.units(x * raw.reserve0 / raw.reserve1, t0.decimals, 6) : ''); } }

  const x0 = safeParse(a0, t0.decimals), x1 = safeParse(a1, t1.decimals), lp = safeParse(lpAmt, 18);
  const canAdd = x0 > 0n && x1 > 0n && chain.connected && (b0 == null || x0 <= b0) && (b1 == null || x1 <= b1);
  const canRemove = lp > 0n && chain.connected && (lpBal == null || lp <= lpBal);

  function add() {
    onTx('deposit', async (w, stage) => {
      const me = chain.account, router = chain.book.contracts.router;
      if (isEth(t0) || isEth(t1)) {
        const [tok, ta, eth] = isEth(t0) ? [t1, x1, x0] : [t0, x0, x1];
        await ensureAllowance(w, me, tok.address, router, ta, stage);
        stage('sign');
        return w.router.addLiquidityETH(tok.address, pool.stable, ta, withSlip(ta), withSlip(eth), me, DEADLINE(), { value: eth });
      }
      await ensureAllowance(w, me, t0.address, router, x0, stage);
      await ensureAllowance(w, me, t1.address, router, x1, stage);
      stage('sign');
      return w.router.addLiquidity(t0.address, t1.address, pool.stable, x0, x1, withSlip(x0), withSlip(x1), me, DEADLINE());
    });
  }
  function remove() {
    onTx('withdraw', async (w, stage) => {
      const me = chain.account, router = chain.book.contracts.router;
      const [q0, q1] = await w.router.quoteRemoveLiquidity(t0.address, t1.address, pool.stable, lp);
      await ensureAllowance(w, me, pool.address, router, lp, stage);
      stage('sign');
      if (isEth(t0) || isEth(t1)) {
        const [tok, qt, qe] = isEth(t0) ? [t1, q1, q0] : [t0, q0, q1];
        return w.router.removeLiquidityETH(tok.address, pool.stable, lp, withSlip(qt), withSlip(qe), me, DEADLINE());
      }
      return w.router.removeLiquidity(t0.address, t1.address, pool.stable, lp, withSlip(q0), withSlip(q1), me, DEADLINE());
    });
  }

  return (
    <div>
      <div style={{ display:'flex', gap:4, marginBottom:12 }}>
        {[['add','ADD LIQUIDITY'],['remove','REMOVE']].map(([k,l]) => (
          <button key={k} onClick={() => setMode(k)} style={{ flex:1, padding:'6px 0', background: mode===k ? 'rgba(232,230,225,0.08)' : 'none', border:`1px solid ${mode===k ? 'rgba(232,230,225,0.2)' : 'rgba(232,230,225,0.07)'}`, cursor:'pointer', fontFamily:'var(--font-m)', fontSize:9.5, letterSpacing:'0.12em', color: mode===k ? 'var(--ink)' : 'var(--ink-dim)' }}>{l}</button>
        ))}
      </div>
      {mode === 'add' ? (
        <>
          <TokenAmountBox label={t0.symbol} symbol={t0.symbol} value={a0} onChange={edit0} balance={b0} decimals={t0.decimals} onMax={() => b0 != null && edit0(fmt.units(isEth(t0) && b0 > 10n**16n ? b0 - 10n**16n : b0, t0.decimals, 6))} />
          <TokenAmountBox label={t1.symbol} symbol={t1.symbol} value={a1} onChange={edit1} balance={b1} decimals={t1.decimals} onMax={() => b1 != null && edit1(fmt.units(isEth(t1) && b1 > 10n**16n ? b1 - 10n**16n : b1, t1.decimals, 6))} />
          <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', margin:'4px 0 14px', letterSpacing:'0.06em' }}>
            Amounts follow the pool ratio. You receive {pool.pair.join('/')} LP tokens; stake them under STAKING to earn emissions.
          </div>
          <button onClick={() => canAdd && add()} style={{
            width:'100%', padding:'13px', background: canAdd ? accent : 'rgba(232,230,225,0.05)', border:`1px solid ${canAdd ? accent : 'rgba(232,230,225,0.1)'}`,
            cursor: canAdd ? 'pointer' : 'not-allowed', fontFamily:'var(--font-d)', fontSize:17, letterSpacing:'0.1em',
            color: canAdd ? '#fff' : 'var(--ink-mute)', boxShadow: canAdd ? `0 0 20px ${accent}44` : 'none', transition:'all 0.2s',
          }}>{!chain.connected ? 'CONNECT WALLET' : 'DEPOSIT'}</button>
        </>
      ) : (
        <>
          <TokenAmountBox label="LP TO REMOVE" symbol="LP" tokens={pool.pair} value={lpAmt} onChange={setLpAmt} balance={lpBal} decimals={18} onMax={() => lpBal != null && setLpAmt(fmt.units(lpBal, 18, 18))} />
          <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', margin:'4px 0 14px', letterSpacing:'0.06em' }}>
            Only unstaked LP can be removed. Staked LP is withdrawn from the position first.
          </div>
          <button onClick={() => canRemove && remove()} style={{
            width:'100%', padding:'13px', background: canRemove ? accent : 'rgba(232,230,225,0.05)', border:`1px solid ${canRemove ? accent : 'rgba(232,230,225,0.1)'}`,
            cursor: canRemove ? 'pointer' : 'not-allowed', fontFamily:'var(--font-d)', fontSize:17, letterSpacing:'0.1em',
            color: canRemove ? '#fff' : 'var(--ink-mute)', boxShadow: canRemove ? `0 0 20px ${accent}44` : 'none', transition:'all 0.2s',
          }}>{!chain.connected ? 'CONNECT WALLET' : 'REMOVE LIQUIDITY'}</button>
        </>
      )}
    </div>
  );
}

function StakingTab({ pool, accent, onTx, onBoosted }) {
  const chain = useChain();
  const [amt, setAmt] = useState('');
  const lpBal = pool.raw?.account_lp_balance ?? null;
  const amount = safeParse(amt, 18);
  const hasGauge = pool.gauge && pool.gauge !== E.ZeroAddress;
  const canStake = hasGauge && amount > 0n && chain.connected && (lpBal == null || amount <= lpBal);
  const { data: exitFee } = useLoad(async (c) => hasGauge ? Number(await c.globals.getGaugeInitialExitFee(pool.gauge, false)) : null, [pool.gauge]);

  function stake() {
    onTx('stake', async (w, stage) => {
      await ensureAllowance(w, chain.account, pool.address, pool.gauge, amount, stage);
      stage('sign');
      return w.at('VeGauge', pool.gauge).deposit(amount);
    });
  }

  return (
    <div>
      <TokenAmountBox label="AMOUNT TO STAKE" symbol="LP" tokens={pool.pair} value={amt} onChange={setAmt} balance={lpBal} decimals={18} onMax={() => lpBal != null && setAmt(fmt.units(lpBal, 18, 18))} />
      {!hasGauge && (
        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c', margin:'6px 0 12px', lineHeight:1.6 }}>
          This pool has no gauge yet, so LP cannot be staked here.
        </div>
      )}
      {hasGauge && exitFee != null && (
        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', margin:'6px 0 12px', lineHeight:1.6 }}>
          Staking mints a position NFT. Its exit fee starts at <span style={{ color:'var(--ink)' }}>{(exitFee/100).toFixed(2)}%</span> and decays over 52 weeks.
        </div>
      )}
      <div style={{ height:1, background:'rgba(232,230,225,0.07)', marginBottom:16 }} />
      <button onClick={() => canStake && stake()} style={{
        width:'100%', padding:'12px', background: canStake ? accent : 'rgba(232,230,225,0.05)', border:`1px solid ${canStake ? accent : 'rgba(232,230,225,0.1)'}`,
        cursor: canStake ? 'pointer' : 'not-allowed', fontFamily:'var(--font-d)', fontSize:17, letterSpacing:'0.1em',
        color: canStake ? '#fff' : 'var(--ink-mute)', boxShadow: canStake ? `0 0 20px ${accent}44` : 'none', marginBottom:10, transition:'all 0.2s',
      }}>{!chain.connected ? 'CONNECT WALLET' : 'STAKE'}</button>
      <button onClick={onBoosted} disabled title="Boosted gauges are not deployed on this network" style={{
        width:'100%', padding:'12px',
        background:'transparent', border:'1px solid rgba(232,230,225,0.12)',
        cursor:'not-allowed', fontFamily:'var(--font-d)', fontSize:17, letterSpacing:'0.1em', color:'var(--ink-mute)',
        display:'flex', alignItems:'center', justifyContent:'center', gap:10, transition:'all 0.2s',
      }}>
        <span style={{ fontSize:16 }}>⚡</span>
        BOOSTED STAKE — NOT AVAILABLE
        <span style={{ fontSize:16 }}>⚡</span>
      </button>
    </div>
  );
}

function PositionsTab({ positions, loading, pool, accent, onTx }) {
  const chain = useChain();
  const [withdrawAmt, setWithdrawAmt] = useState({});
  if (!chain.connected) {
    return <div style={{ textAlign:'center', padding:'32px 0', color:'var(--ink-mute)', fontFamily:'var(--font-c)', fontSize:18, letterSpacing:'0.08em' }}>CONNECT A WALLET TO SEE POSITIONS</div>;
  }
  if (positions.length === 0) {
    return (
      <div style={{ textAlign:'center', padding:'32px 0', color:'var(--ink-mute)', fontFamily:'var(--font-c)', fontSize:18, letterSpacing:'0.08em' }}>
        {loading ? 'LOADING...' : <>NO ACTIVE POSITIONS<br /><span style={{ fontSize:13, marginTop:8, display:'block', color:'var(--ink-mute)' }}>stake to earn rewards</span></>}
      </div>
    );
  }
  const lpPrice = pool.raw?.lpPrice ?? 0;
  const gauge = pool.gauge;
  const bribeTokens = chain.tokens.filter(t => !t.native).map(t => t.address);

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
      {positions.map(pos => {
        const W = 52;
        const weeks = Math.min(W, Math.max(0, (Math.floor(Date.now()/1000) - pos.entry) / (7*86400)));
        const feePct = pos.feeFree ? 0 : pos.exitFeeRate / 100;
        const lockedPct = pos.latchedInitialFee / 100;
        const usd = fmt.toNum(pos.amount, 18) * lpPrice;
        const feeNow = usd * feePct / 100;
        const feeColor = feePct > 15 ? '#ef4444' : feePct > 8 ? '#ffd47c' : '#4ade80';
        const votingLocked = pos.voted;
        const id = pos.tokenId.toString();
        const wAmt = withdrawAmt[id] ?? '';
        const wParsed = safeParse(wAmt, 18);
        const withdrawAll = !wAmt || wParsed >= pos.amount;
        const amountToWithdraw = withdrawAll ? pos.amount : wParsed;
        const blocked = pos.withdrawBlocker !== '0x00000000';
        return (
          <div key={id} style={{ border:'1px solid rgba(232,230,225,0.1)', padding:16, background:'rgba(232,230,225,0.02)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', gap:10, marginBottom:10, flexWrap:'wrap' }}>
              <div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:12.5, color:'var(--ink)', letterSpacing:'0.05em' }}>NFT #{id} — {fmt.units(pos.amount, 18, 4)} LP</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', marginTop:3 }}>VALUE: {fmt.usd(usd)} · STAKED {new Date(pos.entry*1000).toISOString().slice(0,10)}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                {votingLocked && <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:accent, letterSpacing:'0.1em', border:`1px solid ${accent}66`, background:`${accent}12`, padding:'3px 7px', display:'inline-block' }}>🔒 VOTING — LOCKED</div>}
              </div>
            </div>

            {/* exit fee decay */}
            <div style={{ background:'rgba(232,230,225,0.03)', border:'1px solid rgba(232,230,225,0.08)', padding:'12px 14px', marginBottom:12 }}>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8, flexWrap:'wrap', gap:8 }}>
                <span style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', letterSpacing:'0.16em' }}>EXIT FEE · WEEK {weeks.toFixed(1)} / 52</span>
                <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>{pos.feeFree ? 'fee-free gauge' : `rate locked at deposit: ${lockedPct.toFixed(2)}%`}</span>
              </div>
              <div style={{ height:4, background:'rgba(232,230,225,0.07)', position:'relative', overflow:'hidden', marginBottom:10 }}>
                <div style={{ position:'absolute', inset:'0 auto 0 0', width:`${(weeks/W)*100}%`, background:`linear-gradient(90deg, ${accent}, #4ade80)` }} />
              </div>
              <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                {[
                  { l:'EXIT TODAY', v:`${feePct.toFixed(2)}%`, s:`−${fmt.usd(feeNow)}`, c:feeColor },
                  { l:'NET IF WITHDRAWN NOW', v:`${fmt.units(pos.netIfWithdrawnNow, 18, 4)} LP`, s:fmt.usd(fmt.toNum(pos.netIfWithdrawnNow, 18) * lpPrice), c:'var(--ink)' },
                ].map(m => (
                  <div key={m.l} style={{ flex:'1 1 90px', padding:'8px 10px', background:'rgba(232,230,225,0.03)', border:'1px solid rgba(232,230,225,0.07)' }}>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:8.5, color:'var(--ink-mute)', letterSpacing:'0.12em', marginBottom:4 }}>{m.l}</div>
                    <div style={{ fontFamily:'var(--font-d)', fontSize:17, color:m.c }}>{m.v}</div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-dim)', marginTop:2 }}>{m.s}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* claims */}
            <div style={{ marginBottom:12 }}>
              <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', letterSpacing:'0.16em', marginBottom:8 }}>CLAIMS — ONE TX EACH</div>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  { l:'LP EMISSIONS', v:`${fmt.units(pos.earned, 18, 4)} ARCH`, tx:'VeGauge.getReward(tokenId)', k:'claim-emissions', enabled: pos.earned > 0n,
                    run: (w) => w.at('VeGauge', gauge).getReward(pos.tokenId) },
                  { l:'BRIBES + TRADING FEES', v:'for voted pools', tx:'Voter.claimFees(bribes, tokens)', k:'claim-bribes', enabled: true,
                    run: async (w) => {
                      const n = Number(await w.voter.poolVoteLength(pos.tokenId, gauge));
                      const pools = await Promise.all(Array.from({ length: n }, (_, i) => w.voter.poolVote(pos.tokenId, gauge, i)));
                      if (!pools.length) throw new Error('This NFT has not voted, so it has no bribes to claim.');
                      const gauges = await Promise.all(pools.map(p => w.voter.gauges(p)));
                      const bribes = [];
                      for (const g of gauges) { bribes.push(await w.voter.external_bribes(g)); bribes.push(await w.voter.internal_bribes(g)); }
                      return w.voter.claimFees(bribes, bribes.map(() => bribeTokens));
                    } },
                ].map(c => (
                  <div key={c.k} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10, padding:'9px 12px', background:'rgba(232,230,225,0.03)', border:'1px solid rgba(232,230,225,0.07)', flexWrap:'wrap' }}>
                    <div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink)', letterSpacing:'0.08em' }}>{c.l}</div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', marginTop:3 }}>{c.tx}</div>
                    </div>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <span style={{ fontFamily:'var(--font-c)', fontSize:14, color:'#ffd47c' }}>{c.v}</span>
                      <button onClick={() => c.enabled && onTx(c.k, c.run)} style={{
                        background:'rgba(232,230,225,0.05)', border:'1px solid rgba(232,230,225,0.14)',
                        padding:'5px 10px', cursor: c.enabled ? 'pointer' : 'not-allowed', color: c.enabled ? 'var(--ink-dim)' : 'var(--ink-mute)',
                        fontFamily:'var(--font-m)', fontSize:9, letterSpacing:'0.1em',
                      }}>CLAIM</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* exit sequence */}
            <div style={{ display:'flex', gap:6, flexWrap:'wrap', alignItems:'center' }}>
              <button onClick={() => votingLocked && onTx('reset', (w) => w.voter.reset(pos.tokenId, gauge))} disabled={!votingLocked} style={{
                background: votingLocked ? `${accent}18` : 'rgba(232,230,225,0.03)',
                border:`1px solid ${votingLocked ? accent : 'rgba(232,230,225,0.09)'}`,
                padding:'7px 12px', cursor: votingLocked ? 'pointer' : 'not-allowed',
                color: votingLocked ? accent : 'var(--ink-mute)',
                fontFamily:'var(--font-m)', fontSize:9.5, letterSpacing:'0.1em',
              }}>{votingLocked ? 'STEP 1 · RESET VOTES' : '✓ NO ACTIVE VOTES'}</button>
              <input value={wAmt} onChange={e => setWithdrawAmt(s => ({ ...s, [id]: e.target.value.replace(/[^0-9.]/g,'') }))} placeholder={`all (${fmt.units(pos.amount, 18, 4)})`}
                style={{ width:120, background:'rgba(232,230,225,0.05)', border:'1px solid rgba(232,230,225,0.1)', padding:'6px 8px', outline:'none', fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink)' }} />
              <button onClick={() => !votingLocked && !blocked && onTx('withdraw', (w) => w.at('VeGauge', gauge).withdrawStakedToken(pos.tokenId, amountToWithdraw))} disabled={votingLocked || blocked}
                title={votingLocked ? 'Reset your votes before withdrawing.' : blocked ? `Withdrawal blocked (${pos.withdrawBlocker})` : undefined} style={{
                background:'rgba(232,230,225,0.05)', border:'1px solid rgba(232,230,225,0.12)',
                padding:'7px 12px', cursor: (votingLocked || blocked) ? 'not-allowed' : 'pointer',
                color: (votingLocked || blocked) ? 'var(--ink-mute)' : 'var(--ink-dim)',
                fontFamily:'var(--font-m)', fontSize:9.5, letterSpacing:'0.1em',
              }}>{`STEP 2 · WITHDRAW${withdrawAll ? ' ALL' : ''} (−${fmt.usd(fmt.toNum(amountToWithdraw, 18) * lpPrice * feePct / 100)} FEE)`}</button>
            </div>
            {votingLocked && (
              <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c', marginTop:9, lineHeight:1.6 }}>
                Reset your votes before withdrawing. Full withdrawal burns the position NFT.
              </div>
            )}
            {!votingLocked && blocked && (
              <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c', marginTop:9, lineHeight:1.6 }}>
                Withdrawal is currently blocked by the gauge (code {pos.withdrawBlocker}).
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/* ── VOTE SCREEN ─────────────────────────────────────────────────────── */
function useVoteData() {
  const chain = useChain();
  const { data: pairData } = usePairs();
  const gaugePools = (pairData?.pairs ?? []).filter(p => p.gauge !== E.ZeroAddress);
  const key = gaugePools.map(p => p.pair_address).join();
  return useLoad(async (c) => {
    if (!pairData) return null;
    const { price, archPrice } = pairData;
    const bribeTokenAddrs = chain.tokens.filter(t => !t.native).map(t => t.address);
    const [totalWeight, voteDelay, epochStart] = await Promise.all([c.voter.totalWeight(), c.voter.VOTE_DELAY(), gaugePools.length ? c.at('Bribe', gaugePools[0].bribe).getNextEpochStart() : 0n]);
    const usdOf = (token, amt) => fmt.toNum(amt, chain.tokenByAddr[token.toLowerCase()]?.decimals ?? 18) * (price[token.toLowerCase()] ?? 0);

    const pools = await Promise.all(gaugePools.map(async (p) => {
      const [weight, ext, intb] = await Promise.all([c.voter.weights(p.pair_address), c.voter.external_bribes(p.gauge), c.voter.internal_bribes(p.gauge)]);
      let bribesUsd = 0, feesUsd = 0;
      for (const [addr, into] of [[ext, 'b'], [intb, 'f']]) {
        if (!addr || addr === E.ZeroAddress) continue;
        const b = c.at('Bribe', addr);
        const rows = await Promise.all(bribeTokenAddrs.map(t => b.rewardData(t, epochStart).catch(() => null)));
        rows.forEach((r, i) => { if (r) { const u = usdOf(bribeTokenAddrs[i], r.rewardsPerEpoch); if (into === 'b') bribesUsd += u; else feesUsd += u; } });
      }
      return { ...toPool(p, price, archPrice), weight, ext, intb, bribesUsd, feesUsd };
    }));

    const nfts = [];
    if (chain.account) {
      for (const p of gaugePools) {
        const g = c.at('VeGauge', p.gauge);
        const n = Number(await g.balanceOf(chain.account));
        for (let i = 0; i < n; i++) {
          const id = await g.tokenOfOwnerByIndex(chain.account, i);
          const [vp, voted, last, amount] = await Promise.all([g.getVotingPowerView(id), g.voted(id), c.voter.lastVoted(id, p.gauge), g.getAmount(id)]);
          const n2 = Number(await c.voter.poolVoteLength(id, p.gauge));
          const votedPools = await Promise.all(Array.from({ length: n2 }, (_, k) => c.voter.poolVote(id, p.gauge, k)));
          const votedWeights = await Promise.all(votedPools.map(vp2 => c.voter.votes(id, p.gauge, vp2)));
          nfts.push({ key: `${p.gauge}:${id}`, gauge: p.gauge, gaugeLabel: `${p.token0_symbol}/${p.token1_symbol}`, tokenId: id, vp, voted, lastVoted: Number(last), amount,
            current: Object.fromEntries(votedPools.map((vp2, k) => [vp2.toLowerCase(), votedWeights[k]])) });
        }
      }
    }
    if (chain.account) {
      const [keys, deps] = await c.custody.getUserDeposits(chain.account);
      for (let i = 0; i < keys.length; i++) {
        const d = deps[i];
        if (await c.custody.nftDelegated(keys[i])) continue;
        const p = gaugePools.find(gp => gp.gauge.toLowerCase() === d.underlyingVotingSource.toLowerCase());
        if (!p) continue;
        const g = c.at('VeGauge', p.gauge);
        const id = d.tokenId;
        const [vp, voted, last] = await Promise.all([g.getVotingPowerView(id), g.voted(id), c.voter.lastVoted(id, p.gauge)]);
        const n2 = Number(await c.voter.poolVoteLength(id, p.gauge));
        const votedPools = await Promise.all(Array.from({ length: n2 }, (_, k) => c.voter.poolVote(id, p.gauge, k)));
        const votedWeights = await Promise.all(votedPools.map(vp2 => c.voter.votes(id, p.gauge, vp2)));
        nfts.push({ key: `custody:${keys[i]}`, nftKey: keys[i], gauge: p.gauge, gaugeLabel: `${p.token0_symbol}/${p.token1_symbol} · IN CUSTODY`, tokenId: id, vp, voted, lastVoted: Number(last), amount: d.underlyingAmount,
          current: Object.fromEntries(votedPools.map((vp2, k) => [vp2.toLowerCase(), votedWeights[k]])) });
      }
    }
    const totalVp = nfts.reduce((a, n) => a + n.vp, 0n);
    return { pools, nfts, totalWeight, voteDelay: Number(voteDelay), totalVp,
      totalBribes: pools.reduce((a, p) => a + p.bribesUsd, 0), totalFees: pools.reduce((a, p) => a + p.feesUsd, 0) };
  }, [key, pairData?.archPrice]);
}

function VoteScreen({ accent, onTx }) {
  const isMobile = useMobile();
  const chain = useChain();
  const [infoVote, setInfoVote] = useState(null);
  const epoch = useEpoch();
  const ep = useCountdown(epoch.endsAt);
  const { data, loading, error } = useVoteData();

  const [votes, setVotes]   = useState({});
  const [search, setSearch] = useState('');
  const [nftOpen, setNftOpen] = useState(false);
  const [selKey, setSelKey]   = useState(null);
  const nfts = data?.nfts ?? [];
  const sel = nfts.find(n => n.key === selKey) ?? nfts[0] ?? null;
  const selVP = sel ? fmt.toNum(sel.vp, 18) : 0;
  const TOTAL_VP = selVP;

  useEffect(() => {
    if (!sel) return;
    const cur = {};
    for (const [pool, w] of Object.entries(sel.current)) cur[pool] = fmt.toNum(w, 18).toFixed(0);
    setVotes(cur);
  }, [sel?.key]);

  const totalAlloc = Object.values(votes).reduce((a,v) => a+(parseFloat(v)||0), 0);
  const vpPct      = TOTAL_VP > 0 ? Math.min((totalAlloc/TOTAL_VP)*100, 100) : 0;
  const anyVoted   = totalAlloc > 0;
  const nowSec = Math.floor(Date.now()/1000);
  const cooldownLeft = sel ? Math.max(0, sel.lastVoted + (data?.voteDelay ?? 0) - nowSec) : 0;
  const canCast = anyVoted && sel && chain.connected && cooldownLeft === 0;

  function setVote(id, val) { setVotes(p => ({...p, [id]: val.replace(/[^0-9.]/g,'')})); }
  function setMax(id) {
    const used = Object.entries(votes).reduce((a,[k,v]) => k===id ? a : a+(parseFloat(v)||0), 0);
    setVote(id, Math.max(0, TOTAL_VP - used).toFixed(0));
  }
  function cast() {
    const entries = Object.entries(votes).filter(([, v]) => parseFloat(v) > 0);
    const pools = entries.map(([p]) => p), weights = entries.map(([, v]) => fmt.parse(v, 18));
    onTx('vote', (w) => sel.nftKey ? w.custody.selfVote(sel.nftKey, pools, weights) : w.voter.vote(sel.tokenId, sel.gauge, pools, weights));
  }
  function resetVotes() { onTx('reset', (w) => sel.nftKey ? w.custody.selfResetVotes(sel.nftKey) : w.voter.reset(sel.tokenId, sel.gauge)); }

  const totalWeightNum = data ? fmt.toNum(data.totalWeight, 18) : 0;
  const weeklyEmissionUsd = data ? data.pools.reduce((a, p) => a + fmt.toNum(p.raw.emissions, 18), 0) : 0;
  const VOTE_POOLS = (data?.pools ?? []).map(p => {
    const w = fmt.toNum(p.weight, 18);
    const rewardsUsd = p.bribesUsd + p.feesUsd;
    const per1k = w > 0 ? rewardsUsd / w * 1000 : rewardsUsd > 0 ? Infinity : 0;
    const voteApr = w > 0 && data ? (rewardsUsd * 52) / (w * (data.pools[0]?.raw.lpPrice ?? 1)) * 100 : 0;
    return { id: p.address.toLowerCase(), address: p.address, pair: p.pair, name: p.pair.join('/'), sub: p.type, totalVotes: w,
      pct: totalWeightNum > 0 ? (w / totalWeightNum * 100) : 0, apr: voteApr, rewards: rewardsUsd, estimPer1k: per1k, bribesUsd: p.bribesUsd, feesUsd: p.feesUsd, gauge: p.gauge };
  }).sort((a, b) => b.totalVotes - a.totalVotes);

  const filtered = VOTE_POOLS.filter(p => {
    const q = search.toLowerCase();
    return p.name.toLowerCase().includes(q) || p.sub.toLowerCase().includes(q) || p.pair.some(t=>t.toLowerCase().includes(q));
  });
  const avgApr = VOTE_POOLS.length ? VOTE_POOLS.reduce((a, p) => a + (isFinite(p.apr) ? p.apr : 0), 0) / VOTE_POOLS.length : 0;

  return (
    <div style={{ minHeight:'100vh', paddingTop:58 }}>
      <div style={{ width:'100%', maxWidth:960, padding:'36px 24px 60px', margin:'0 auto' }}>

        {/* Page header */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:isMobile?16:22 }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:6 }}>
              <div style={{ width:22, height:2, background:accent }} />
              <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:accent, letterSpacing:'0.42em' }}>GOVERNANCE</span>
            </div>
            <div style={{ fontFamily:'var(--font-d)', fontSize: isMobile?36:48, color:'var(--ink)', letterSpacing:'0.01em', lineHeight:1 }}>VOTE</div>
          </div>
          {!isMobile && sel && sel.voted && <button onClick={resetVotes} style={{ background:'none', border:`1px solid ${accent}`, padding:'7px 16px', cursor:'pointer', color:accent, fontFamily:'var(--font-m)', fontSize:10, letterSpacing:'0.15em' }}>RESET VOTES</button>}
        </div>

        {/* Stats bar */}
        <Card accent={accent} width="100%" style={{ marginBottom:14 }}>
          <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr 1fr':'1fr 1fr 1fr 1fr 1fr', gap:0 }}>
            {[
              { label:'YOUR VOTING POWER', value: data ? fmt.num(fmt.toNum(data.totalVp, 18), 2) : '—', hi:false, mono:false },
              { label:'AVG VOTE APR',      value: data ? fmt.pct(avgApr) : '—', hi:true,  mono:false },
              { label:`EPOCH ${epoch.number ?? '—'} ENDS`, value: ep.ready ? `${ep.d}d ${String(ep.h).padStart(2,'0')}h ${String(ep.m).padStart(2,'0')}m ${String(ep.s).padStart(2,'0')}s` : '—', hi:false, mono:true },
              { label:'BRIBES NEXT EPOCH', value: data ? fmt.usd(data.totalBribes) : '—', hi:false, mono:false },
              { label:'FEES NEXT EPOCH',   value: data ? fmt.usd(data.totalFees) : '—',   hi:false, mono:false },
            ].map((st,i) => (
              <div key={st.label} style={{
                padding: isMobile?'12px 14px':'18px 20px',
                borderLeft: (isMobile ? i%2!==0 : i>0) ? '1px solid rgba(232,230,225,0.07)' : 'none',
                borderTop: (isMobile && i>=2) ? '1px solid rgba(232,230,225,0.07)' : 'none',
              }}>
                <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.2em', marginBottom:isMobile?4:7 }}>{st.label}</div>
                <div style={{
                  fontFamily: st.mono ? 'var(--font-c)' : 'var(--font-d)',
                  fontSize: isMobile ? (st.mono ? 16 : 18) : (st.mono ? 22 : 26), lineHeight:1,
                  color: st.hi ? accent : 'var(--ink)', letterSpacing:'0.02em',
                }}>{st.value}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* Main vote card */}
        <Card accent={accent} width="100%" style={{ padding:0, position:'relative' }}>

          {/* NFT Dropdown */}
          {nftOpen && (
            <div onClick={()=>setNftOpen(false)} style={{ position:'fixed', inset:0, zIndex:300 }}>
              <div onClick={e=>e.stopPropagation()} style={{
                position:'absolute', top:58, right:20,
                background:'#0a0807', border:`1px solid ${accent}55`,
                padding:'8px 0', minWidth:220, zIndex:301,
              }}>
                {nfts.map(n => (
                  <button key={n.key} onClick={()=>{ setSelKey(n.key); setNftOpen(false); }} style={{
                    display:'block', width:'100%', textAlign:'left',
                    background: sel?.key===n.key ? `${accent}18` : 'none',
                    border:'none', padding:'9px 16px', cursor:'pointer',
                    fontFamily:'var(--font-m)', fontSize:11, letterSpacing:'0.08em',
                    color: sel?.key===n.key ? accent : 'var(--ink)',
                  }}>NFT #{n.tokenId.toString()} · {n.gaugeLabel} <span style={{ color:'var(--ink-dim)' }}>· {fmt.num(fmt.toNum(n.vp, 18), 0)} VP{n.voted ? ' · voted' : ''}</span></button>
                ))}
                {nfts.length === 0 && <div style={{ padding:'9px 16px', fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)' }}>No staked positions in your wallet</div>}
              </div>
            </div>
          )}

          {/* Toolbar */}
          <div style={{ padding:'14px 18px', display:'flex', gap:10, alignItems:'center', borderBottom:'1px solid rgba(232,230,225,0.07)', flexWrap:'wrap' }}>
            <div style={{ flex:1, minWidth:220, display:'flex', alignItems:'center', gap:10, background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)', padding:'0 14px', height:38 }}>
              <span style={{ color:'var(--ink-mute)', fontSize:14 }}>⌕</span>
              <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Search..."
                style={{ background:'none', border:'none', outline:'none', fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)', width:'100%', letterSpacing:'0.06em' }} />
            </div>
            <button onClick={()=>setNftOpen(!nftOpen)} style={{
              display:'flex', alignItems:'center', gap:8,
              background:'none', border:`1px solid ${accent}`,
              padding:'0 16px', height:38, cursor:'pointer',
              fontFamily:'var(--font-m)', fontSize:10, color:accent, letterSpacing:'0.1em',
              boxShadow:`0 0 10px ${accent}22`,
            }}>
              {sel ? `NFT #${sel.tokenId.toString()} · ${sel.gaugeLabel}` : chain.connected ? 'NO POSITIONS' : 'CONNECT WALLET'} <span style={{ fontSize:9 }}>▼</span>
            </button>
          </div>

          {/* Table header */}
          <div style={{
            display:'grid',
            gridTemplateColumns: isMobile ? '1fr 60px 110px' : '1fr 110px 70px 80px 120px 100px 130px',
            padding: isMobile?'8px 14px':'9px 18px', borderBottom:'1px solid rgba(232,230,225,0.07)',
            alignItems:'center',
          }}>
            {(isMobile ? ['POOL','APR','YOUR VOTE'] : ['POOL','↓ TOTAL VOTES','APR','REWARDS','ESTIMATION','YOUR VOTES','']).map((h,i) => (
              <div key={i} style={{
                fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)',
                letterSpacing:'0.15em', textAlign: i>0 ? 'center' : 'left',
              }}>{h}</div>
            ))}
          </div>

          {/* Vote rows */}
          {filtered.map((pool,i) => (
            <VoteRow
              key={pool.id} pool={pool} accent={accent} odd={i%2===0}
              voteVal={votes[pool.id]||''}
              onVoteChange={v => setVote(pool.id, v)}
              onMax={() => setMax(pool.id)}
              totalVP={TOTAL_VP}
              onInfo={() => setInfoVote(pool)}
            />
          ))}
          {filtered.length === 0 && (
            <div style={{ padding:'40px 20px', textAlign:'center', fontFamily:'var(--font-c)', fontSize:18, color:'var(--ink-mute)', letterSpacing:'0.1em' }}>
              {loading && !data ? 'LOADING GAUGES...' : error ? `COULD NOT LOAD — ${error.toUpperCase()}` : 'NO GAUGES FOUND'}
            </div>
          )}

          {/* Bottom: VP bar + cast */}
          <div style={{ padding:'16px 18px', borderTop:'1px solid rgba(232,230,225,0.09)', background:'rgba(232,230,225,0.015)' }}>
            {/* VP bar */}
            <div style={{ marginBottom:12 }}>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                <div style={{ display:'flex', gap:28 }}>
                  <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', letterSpacing:'0.06em' }}>
                    VotingPower used: <span style={{ color: anyVoted ? accent : 'var(--ink-mute)' }}>{vpPct.toFixed(2)}%</span>
                  </span>
                  <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', letterSpacing:'0.06em' }}>
                    Voted this epoch: <span style={{ color: sel?.voted ? '#4ade80' : 'var(--ink-dim)' }}>{sel?.voted ? 'Yes' : 'No'}</span>
                  </span>
                </div>
                <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', letterSpacing:'0.06em' }}>
                  {fmt.num(totalAlloc, 0)} / {fmt.num(TOTAL_VP, 0)} VP
                </span>
              </div>
              <div style={{ height:3, background:'rgba(232,230,225,0.07)', position:'relative', overflow:'hidden' }}>
                <div style={{
                  position:'absolute', left:0, top:0, height:'100%',
                  width:`${vpPct}%`,
                  background:`linear-gradient(90deg, ${accent}, #ffd47c)`,
                  transition:'width 0.3s',
                  boxShadow: anyVoted ? `0 0 8px ${accent}88` : 'none',
                }} />
              </div>
            </div>

            <button onClick={() => canCast && cast()} style={{
              width:'100%', padding:'13px',
              background: canCast ? accent : 'rgba(232,230,225,0.05)',
              border:`1px solid ${canCast ? accent : 'rgba(232,230,225,0.1)'}`,
              cursor: canCast ? 'pointer' : 'not-allowed',
              fontFamily:'var(--font-d)', fontSize:18, letterSpacing:'0.12em',
              color: canCast ? '#fff' : 'var(--ink-mute)',
              boxShadow: canCast ? `0 0 28px ${accent}55` : 'none',
              transition:'all 0.2s',
            }}>{!chain.connected ? 'CONNECT WALLET' : !sel ? 'NO POSITION TO VOTE WITH' : cooldownLeft > 0 ? `VOTE COOLDOWN ${fmt.countdown(cooldownLeft)}` : sel.voted ? 'RE-CAST VOTES' : 'CAST VOTES'}</button>
            <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', marginTop:8, letterSpacing:'0.06em' }}>
              Weights are relative: the numbers you enter are split proportionally across your NFT's full voting power. Casting again replaces the previous vote.
            </div>
          </div>
        </Card>
      </div>

      {/* Mobile info sheet */}
      {infoVote && (
        <MobileInfoSheet
          title={infoVote.name}
          tokens={infoVote.pair}
          accent={accent}
          onClose={() => setInfoVote(null)}
          stats={[
            { label:'TOTAL VOTES', value: fmt.num(infoVote.totalVotes, 0), sub: infoVote.pct.toFixed(1)+'%' },
            { label:'APR',         value: fmt.pct(infoVote.apr), hi:true, color:'#4ade80' },
            { label:'REWARDS',     value: fmt.usd(infoVote.rewards) },
            { label:'EST / 1K',    value: isFinite(infoVote.estimPer1k) ? fmt.usd(infoVote.estimPer1k) : '∞', sub:'per 1K votes' },
            { label:'BRIBES',      value: fmt.usd(infoVote.bribesUsd), mono:true },
            { label:'FEES',        value: fmt.usd(infoVote.feesUsd), mono:true },
          ]}
        />
      )}
    </div>
  );
}

function VoteRow({ pool, accent, odd, voteVal, onVoteChange, onMax, totalVP, onInfo }) {
  const [hov, setHov] = useState(false);
  const isMobile = useMobile();
  const myVote = parseFloat(voteVal) || 0;
  const myPct  = myVote && totalVP ? (myVote/totalVP*100).toFixed(1)+'%' : '—';
  const voted  = myVote > 0;

  return (
    <div
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
      style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr 60px 110px' : '1fr 110px 70px 80px 120px 100px 130px',
        padding: isMobile ? '11px 14px' : '13px 18px', alignItems:'center',
        transition:'background 0.14s',
        background: hov ? 'rgba(232,230,225,0.04)' : odd ? 'rgba(232,230,225,0.016)' : 'transparent',
        borderBottom:'1px solid rgba(232,230,225,0.04)',
      }}>
      {/* Pool */}
      <div style={{ display:'flex', alignItems:'center', gap: isMobile?8:10 }}>
        <TokenPair tokens={pool.pair} size={isMobile?18:22} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily:'var(--font-m)', fontSize: isMobile?12:13, color:'var(--ink)', letterSpacing:'0.05em' }}>{pool.name}</div>
          <div style={{ fontFamily:'var(--font-m)', fontSize: isMobile?9:10, color:'var(--ink-dim)', marginTop:1 }}>{pool.sub}</div>
        </div>
        {isMobile && (
          <button onClick={e => { e.stopPropagation(); onInfo && onInfo(); }} style={{
            background:'rgba(232,230,225,0.07)', border:'1px solid rgba(232,230,225,0.18)',
            width:22, height:22, cursor:'pointer', color:'var(--ink-dim)',
            fontFamily:'var(--font-m)', fontSize:11, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
          }}>ℹ</button>
        )}
      </div>
      {!isMobile && <div style={{ textAlign:'center' }}>
        <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)' }}>{fmt.num(pool.totalVotes, 0)}</div>
        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>{pool.pct.toFixed(1)}%</div>
      </div>}
      <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'#4ade80', textAlign:'center' }}>{fmt.pct(pool.apr)}</div>
      {!isMobile && <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)', textAlign:'center' }}>{fmt.usd(pool.rewards)}</div>}
      {!isMobile && <div style={{ textAlign:'center' }}>
        <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)' }}>{isFinite(pool.estimPer1k) ? fmt.usd(pool.estimPer1k) : '∞'}</div>
        <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.08em', marginTop:1 }}>PER 1K VOTES</div>
      </div>}
      {!isMobile && <div style={{ textAlign:'center' }}>
        <div style={{ fontFamily:'var(--font-m)', fontSize:12, color: voted ? accent : 'var(--ink-mute)' }}>
          {voted ? fmt.num(myVote, 0) : '—'}
        </div>
        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', marginTop:1 }}>{myPct}</div>
      </div>}
      <div style={{ display:'flex', gap:4, paddingLeft: isMobile?0:4 }}>
        <input
          value={voteVal}
          onChange={e => onVoteChange(e.target.value)}
          placeholder="0"
          inputMode="decimal"
          style={{
            flex:1, background:'rgba(232,230,225,0.05)',
            border:`1px solid ${voted ? accent+'88' : 'rgba(232,230,225,0.1)'}`,
            padding:'6px 8px', outline:'none',
            fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)',
            width:0, minWidth:0, transition:'border-color 0.15s',
          }}
        />
        <button onClick={onMax} style={{
          background:`${accent}1a`, border:`1px solid ${accent}55`,
          padding:'6px 9px', cursor:'pointer',
          fontFamily:'var(--font-m)', fontSize:9, color:accent,
          letterSpacing:'0.1em', flexShrink:0, transition:'all 0.15s',
        }}>MAX</button>
      </div>
    </div>
  );
}

Object.assign(window, { TokenIcon, TokenPair, Nav, SwapScreen, LiquidityScreen, ManageScreen, VoteScreen, Card, useMobile, useCountdown, toPool, TokenAmountBox, safeParse, DEADLINE, withSlip });

/* ── MOBILE INFO SHEET ───────────────────────────────────────────────── */
function MobileInfoSheet({ title, tokens, stats, onClose, accent }) {
  return (
    <div style={{
      position:'fixed', inset:0, zIndex:600,
      background:'rgba(5,5,5,0.82)', backdropFilter:'blur(4px)',
      display:'flex', alignItems:'flex-end',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        position:'relative', width:'100%',
        background:'rgba(8,6,5,0.99)', borderTop:`2px solid ${accent}`,
        padding:'20px 18px 36px', animation:'fadeUp 0.2s forwards',
      }}>
        {/* accent line */}
        <div style={{ position:'absolute', top:0, left:0, right:0, height:2, background:`linear-gradient(90deg, ${accent}, transparent)` }} />

        {/* Header */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <TokenPair tokens={tokens} size={24} />
            <span style={{ fontFamily:'var(--font-d)', fontSize:18, color:'var(--ink)', letterSpacing:'0.04em' }}>{title}</span>
          </div>
          <button onClick={onClose} style={{
            background:'none', border:'1px solid rgba(232,230,225,0.18)', width:28, height:28,
            cursor:'pointer', color:'var(--ink-dim)', fontSize:14,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>✕</button>
        </div>

        {/* Stats grid */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding:'10px 12px',
              background:'rgba(232,230,225,0.04)',
              border:`1px solid ${s.hi ? accent+'44' : 'rgba(232,230,225,0.08)'}`,
            }}>
              <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.18em', marginBottom:5 }}>{s.label}</div>
              <div style={{ fontFamily: s.mono ? 'var(--font-c)' : 'var(--font-d)', fontSize: s.mono ? 16 : 20, color: s.hi ? accent : s.color || 'var(--ink)', letterSpacing:'0.02em' }}>{s.value}</div>
              {s.sub && <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', marginTop:3, letterSpacing:'0.08em' }}>{s.sub}</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MobileInfoSheet });