// app-delegate.jsx — Flow B (Delegating User) + Flow C (Solo Custodied Voter)
// Exports to window: DelegateScreen, useDelegateData
const { useState, useEffect, useMemo } = React;
const { Card, useMobile, useCountdown, TokenPair, useChain, useLoad, useEpoch, usePairs } = window;
const { fmt: dfmt, ethers: DE } = window.Chain;

/* ── shared bits ─────────────────────────────────────────────────────── */
function DgCall({ children }) {
  return <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', letterSpacing:'0.02em', marginTop:6, wordBreak:'break-all', lineHeight:1.5 }}>TX &nbsp;{children}</div>;
}
function DgLabel({ children, accent }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
      <div style={{ width:14, height:2, background:accent }} />
      <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', letterSpacing:'0.24em' }}>{children}</span>
    </div>
  );
}
function DgBadge({ children, color = 'var(--ink-dim)', solid }) {
  return <span style={{ fontFamily:'var(--font-m)', fontSize:9, letterSpacing:'0.12em', color: solid ? '#000' : color, background: solid ? color : `${color}14`, border:`1px solid ${color}55`, padding:'3px 8px', whiteSpace:'nowrap' }}>{children}</span>;
}
function DgBtn({ children, onClick, accent, kind = 'ghost', disabled, full, title }) {
  const bg = kind === 'primary' ? accent : kind === 'danger' ? 'rgba(239,68,68,0.1)' : 'rgba(232,230,225,0.05)';
  const bd = kind === 'primary' ? accent : kind === 'danger' ? 'rgba(239,68,68,0.35)' : 'rgba(232,230,225,0.14)';
  const fg = kind === 'primary' ? '#fff' : kind === 'danger' ? '#ef4444' : 'var(--ink-dim)';
  return (
    <button title={title} onClick={disabled ? undefined : onClick} disabled={disabled} style={{
      width: full ? '100%' : undefined, padding: kind === 'primary' ? '11px 16px' : '6px 11px',
      background: disabled ? 'rgba(232,230,225,0.04)' : bg,
      border:`1px solid ${disabled ? 'rgba(232,230,225,0.1)' : bd}`,
      cursor: disabled ? 'not-allowed' : 'pointer',
      fontFamily: kind === 'primary' ? 'var(--font-d)' : 'var(--font-m)',
      fontSize: kind === 'primary' ? 16 : 9.5, letterSpacing: kind === 'primary' ? '0.1em' : '0.11em',
      color: disabled ? 'var(--ink-mute)' : fg,
      boxShadow: kind === 'primary' && !disabled ? `0 0 20px ${accent}44` : 'none', transition:'all 0.16s',
    }}>{children}</button>
  );
}
function DgBox({ children, style, tone }) {
  const c = tone === 'warn' ? 'rgba(255,212,124,' : tone === 'bad' ? 'rgba(239,68,68,' : 'rgba(232,230,225,';
  return <div style={{ background:`${c}${tone ? '0.05' : '0.03'})`, border:`1px solid ${c}${tone ? '0.25' : '0.08'})`, padding:'14px 16px', ...style }}>{children}</div>;
}
function DgInfo({ text }) {
  const [on, setOn] = useState(false);
  return (
    <span style={{ position:'relative', display:'inline-flex', marginLeft:6 }}
      onMouseEnter={() => setOn(true)} onMouseLeave={() => setOn(false)} onClick={e => { e.stopPropagation(); setOn(v => !v); }}>
      <span style={{ width:14, height:14, borderRadius:'50%', border:'1px solid rgba(232,230,225,0.3)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-dim)', cursor:'help', lineHeight:1 }}>i</span>
      {on && (
        <span style={{ position:'absolute', bottom:'calc(100% + 8px)', left:'50%', transform:'translateX(-50%)', width:250, background:'rgba(8,6,5,0.98)', border:'1px solid rgba(232,230,225,0.2)', padding:'10px 12px', fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', lineHeight:1.7, letterSpacing:'0.03em', zIndex:200, pointerEvents:'none', textTransform:'none' }}>{text}</span>
      )}
    </span>
  );
}
function DgEmpty({ children }) {
  return <div style={{ fontFamily:'var(--font-c)', fontSize:17, color:'var(--ink-mute)', letterSpacing:'0.08em', padding:'12px 0' }}>{children}</div>;
}

/* ── data ────────────────────────────────────────────────────────────── */
const NO_KEY = '0x0000000000000000000000000000000000000000000000000000000000000000';
const vpNum = (v) => dfmt.toNum(v, 18);

async function readTiers(fd) {
  const tiers = [];
  for (let i = 0; i < 12; i++) {
    try { const t = await fd.tier(i); tiers.push({ t: i, vp: t.amountNeeded, disc: Number(t.feeDiscount) }); } catch { break; }
  }
  return tiers;
}
function tierFor(tiers, vp) {
  let t = null;
  for (const x of tiers) if (vp >= x.vp) t = x;
  return t;
}
const discPct = (d) => (d / 1e16).toFixed(0) + '%';

function useDelegateData() {
  const chain = useChain();
  const pairData = usePairs().data;
  const gauges = useMemo(() => (pairData?.pairs ?? []).filter(p => p.gauge && p.gauge !== DE.ZeroAddress), [pairData]);
  const gaugeKey = gauges.map(g => g.gauge).join(',');
  return useLoad(async (c) => {
    const book = c.custody.target;
    const byGauge = Object.fromEntries(gauges.map(g => [g.gauge.toLowerCase(), g]));
    const labelOf = (src) => { const g = byGauge[src.toLowerCase()]; return g ? `${g.token0_symbol}/${g.token1_symbol} LP` : dfmt.short(src); };
    const usdOf = (src, amount) => { const g = byGauge[src.toLowerCase()]; return g ? vpNum(amount) * g.lpPrice : 0; };

    const [tiers, activePeriod, delegatorAddrs] = await Promise.all([
      readTiers(c.feeDiscount), c.minter.active_period(), c.delegatorLens.registeredDelegators(),
    ]);

    const wallet = [];
    const approved = {};
    let custody = [];
    let userTier = 0, effectiveBalance = 0n, blockedUntil = 0;
    if (chain.account) {
      for (const g of gauges) {
        const ve = c.at('VeGauge', g.gauge);
        const [n, ok] = await Promise.all([ve.balanceOf(chain.account), ve.isApprovedForAll(chain.account, book)]);
        approved[g.gauge.toLowerCase()] = ok;
        for (let i = 0; i < Number(n); i++) {
          const id = await ve.tokenOfOwnerByIndex(chain.account, i);
          const [amount, vp, voted] = await Promise.all([ve.getAmount(id), ve.getVotingPowerView(id), ve.voted(id)]);
          wallet.push({ key: `${g.gauge}:${id}`, gauge: g.gauge, tokenId: id, label: labelOf(g.gauge), amount, vp, voted, usd: usdOf(g.gauge, amount) });
        }
      }
      const rows = await c.delegatorLens.userPositions(chain.account);
      custody = await Promise.all(rows.map(async (r) => {
        const [exit, epochsVoted, vp, sched] = await Promise.all([
          c.delegatorLens.exitInfo(chain.account, r.nftKey),
          c.custody.getNftEpochsVoted(r.nftKey),
          c.at('VeGauge', r.source).getVotingPowerView(r.tokenId),
          c.groupVotingSource.isWithdrawalScheduled(r.nftKey),
        ]);
        const voteActive = epochsVoted.some(e => e === activePeriod);
        return {
          key: r.nftKey, nftKey: r.nftKey, source: r.source, tokenId: r.tokenId, amount: r.amount, vp,
          label: labelOf(r.source), usd: usdOf(r.source, r.amount),
          delegated: r.delegated, groupKey: r.groupKey, delegator: r.delegator,
          registered: r.benefitContract !== DE.ZeroAddress, benefitValue: r.benefitValue,
          unlockStartedAt: Number(r.unlockStartedAt), unlockReadyAt: Number(r.unlockReadyAt),
          voteActive, state: r.delegated ? 'delegated' : voteActive ? 'self' : 'custodied',
          exit: {
            unlockStarted: exit.unlockStarted, unlockReadyAt: Number(exit.unlockReadyAt), secondsUntilFree: Number(exit.secondsUntilFree),
            instantExitFeeBps: Number(exit.instantExitFeeBps), groupVotedThisEpoch: exit.groupVotedThisEpoch,
            canInstantExitNow: exit.canInstantExitNow, canFinishUnlockNow: exit.canFinishUnlockNow, blocker: exit.blocker,
            withdrawalScheduled: exit.withdrawalScheduled || sched,
          },
        };
      }));
      [userTier, effectiveBalance, blockedUntil] = await Promise.all([
        c.feeDiscount.userToLvl(chain.account), c.feeDiscount.effectiveBalance(chain.account), c.feeDiscount.registrationBlockedUntil(chain.account),
      ]);
    }

    const delegators = await Promise.all(delegatorAddrs.map(async (a) => {
      const d = await c.delegatorLens.delegatorInfo(a);
      const groups = await Promise.all(gauges.map(g => c.delegatorLens.group(a, g.gauge).catch(() => null)));
      const live = groups.filter(g => g && g.groupKey !== NO_KEY);
      return {
        id: a, address: a, name: dfmt.short(a), fee: Number(d.delegatorFeeRate) / 1e16, tier: Number(d.tier),
        active: d.isActive && d.registered, missed: Number(d.missedEpochs), lockedArch: d.lockedArch,
        group: live.reduce((s, g) => s + g.members.length, 0),
        vp: live.reduce((s, g) => s + g.aggregatedPower, 0n),
        byUnderlying: Object.fromEntries(live.map(g => [g.underlying.toLowerCase(), { groupKey: g.groupKey, votedThisEpoch: g.votedThisEpoch, joinOpen: g.joinOpen, operable: g.operable, voteOpensAt: Number(g.voteOpensAt) }])),
      };
    }));

    return { wallet, approved, custody, delegators, tiers, userTier: Number(userTier), effectiveBalance, blockedUntil: Number(blockedUntil), activePeriod, gauges };
  }, [gaugeKey]);
}

// Rewards for one custodied position, epoch by epoch.
function useRewardRows(pos, account) {
  return useLoad(async (c) => {
    if (!pos || !account) return null;
    if (!pos.delegated) {
      const count = Number(await c.soloRewardsHarvester.votedEpochCount(pos.nftKey));
      return { solo: true, count };
    }
    const epochs = [...await c.groupVotingSource.getGroupEpochsVoted(pos.groupKey)].slice(-6).reverse();
    const rows = [];
    for (const epoch of epochs) {
      const pools = await c.groupVotingSource.getGroupPoolsVotedInEpoch(pos.groupKey, epoch);
      const items = [];
      for (const pool of pools) {
        for (const internal of [false, true]) {
          const bribe = await c.delegatorRewardManager.bribeForEpoch(internal, pool, epoch);
          if (bribe === DE.ZeroAddress) continue;
          const tokens = await c.at('Bribe', bribe).getRewardTokensForEpoch(epoch);
          if (!tokens.length) continue;
          const pend = await c.delegatorLens.pendingBribeRewards(pos.groupKey, internal, pool, epoch, tokens);
          for (let i = 0; i < tokens.length; i++) {
            const share = await c.delegatorLens.memberBribeShare(pos.groupKey, bribe, pool, tokens[i], epoch, account);
            const sym = await c.at('ERC20', tokens[i]).symbol().catch(() => dfmt.short(tokens[i]));
            const dec = Number(await c.at('ERC20', tokens[i]).decimals().catch(() => 18));
            items.push({ pool, internal, bribe, token: tokens[i], sym, dec, settled: pend[i].settled, settleable: pend[i].settleable, groupTotal: pend[i].groupTotal, memberPool: pend[i].memberPool, share: share.share, claimed: share.claimed });
          }
        }
      }
      rows.push({ epoch, items });
    }
    return { solo: false, rows };
  }, [pos?.nftKey, pos?.groupKey]);
}

/* ── SCREEN ──────────────────────────────────────────────────────────── */
function DelegateScreen({ accent, onTx, onNav, dev = true }) {
  const isMobile = useMobile();
  const chain = useChain();
  const epoch = useEpoch();
  const ep = useCountdown(epoch.endsAt);
  const { data, loading, error } = useDelegateData();
  const [tab, setTab] = useState('positions');
  const [posPicker, setPosPicker] = useState(false);
  const [sel, setSel] = useState(null);
  const [pickedDelegator, setPicked] = useState(null);
  const [regFee, setRegFee] = useState(false);
  const [forceDialog, setForceDialog] = useState(false);

  const wallet = data?.wallet ?? [];
  const custody = data?.custody ?? [];
  const delegators = data?.delegators ?? [];
  const tiers = data?.tiers ?? [];
  const selPos = custody.find(p => p.key === sel) ?? custody[0] ?? null;
  const joinCopy = ep.ready ? `${ep.d}d ${String(ep.h).padStart(2,'0')}h` : '—';
  const fdAddr = chain.book?.contracts.feeDiscount;
  const custodyAddr = chain.book?.contracts.custody;
  const nowSec = Math.floor(Date.now() / 1000);
  const myTier = tiers[data?.userTier ?? 0] ?? null;

  function approveGauge(n) { onTx('setApprovalForAll', (w) => w.at('VeGauge', n.gauge).setApprovalForAll(custodyAddr, true)); }
  function deposit(n) { onTx('depositNFT', (w) => w.custody.depositNFT(n.gauge, n.tokenId)); }
  function delegate() {
    if (!pickedDelegator || !selPos) return;
    onTx('delegateNFTs', (w) => w.delegatorVotingManager.delegateNFTs(selPos.source, [selPos.nftKey], pickedDelegator.address, regFee));
    setTab('positions');
  }
  function register(p) { onTx('registerForBenefit', (w) => w.custody.registerForBenefit(p.nftKey, fdAddr)); }
  function selfReset(p) { onTx('resetVotes', (w) => w.custody.selfResetVotes(p.nftKey)); }
  function leaveGroup(p) { onTx('withdrawNFTs', (w) => w.delegatorVotingManager.withdrawNFTs(p.source, p.delegator, [p.nftKey])); }
  function withdrawFromCustody(p) { onTx('withdrawNFT', (w) => w.custody.withdrawNFT(p.nftKey)); }
  function schedule(p) { onTx('scheduleWithdrawal', (w) => w.delegatorVotingManager.scheduleWithdrawal(p.source, p.delegator, [p.nftKey])); }
  function executeScheduled(p) { onTx('executeScheduledWithdrawal', (w) => w.groupVotingSource.executeScheduledWithdrawal([p.nftKey])); }
  function startUnlock(p) { onTx('startUnlock', (w) => w.feeDiscount.startUnlockDelegatedNFT(chain.account, p.nftKey)); }
  function finishUnlock(p) { onTx('finishUnlock', (w) => w.feeDiscount.finishUnlockDelegatedNFT(chain.account, p.nftKey)); }
  function forceUnlock(p) { onTx('forceUnlock', (w) => w.feeDiscount.forceUnlockDelegatedNFT(chain.account, p.nftKey)); }

  const TABS = [['positions','POSITIONS'],['delegators','DELEGATORS'],['rewards','REWARDS'],['exit','EXIT']];
  const stateOf = (p) => p.state === 'delegated'
    ? { txt:`DELEGATED · ${dfmt.short(p.delegator)}`, color:accent }
    : p.state === 'self' ? { txt:'SELF-VOTING', color:'#4ade80' } : { txt:'CUSTODIED · NOT DELEGATED', color:'#ffd47c' };
  const posLine = (p) => `${p.label} — ${dfmt.units(p.amount, 18, 2)} LP`;
  const posSub = (p) => `${dfmt.usd(p.usd)} · VP ${dfmt.num(vpNum(p.vp), 0)}`;

  return (
    <div style={{ minHeight:'100vh', paddingTop:58 }}>
      <div style={{ width:'100%', maxWidth:1000, padding: isMobile?'22px 14px 70px':'36px 24px 80px', margin:'0 auto' }}>

        {/* header */}
        <div style={{ marginBottom:20 }}>
          <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' }}>CUSTODY &amp; DELEGATION</span>
          </div>
          <div style={{ fontFamily:'var(--font-d)', fontSize: isMobile?36:48, color:'var(--ink)', lineHeight:1 }}>DELEGATE</div>
          <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', marginTop:8, lineHeight:1.6, maxWidth:640 }}>
            Hand voting to a professional delegator, or keep your position in custody and vote for yourself. Positions are held by <span style={{ color:'var(--ink)' }}>DelegatorCustody</span> — they leave your wallet.
          </div>
        </div>

        {!chain.connected && <DgBox tone="warn" style={{ marginBottom:14 }}><span style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'#ffd47c' }}>Connect a wallet to see your positions.</span></DgBox>}
        {error && <DgBox tone="bad" style={{ marginBottom:14 }}><span style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'#ef4444' }}>{error}</span></DgBox>}

        {/* subtabs */}
        <div style={{ display:'flex', gap:2, marginBottom:14, borderBottom:'1px solid rgba(232,230,225,0.09)' }}>
          {TABS.map(([k,l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              background: tab===k ? 'rgba(232,230,225,0.05)' : 'none', border:'none',
              borderBottom:`2px solid ${tab===k ? accent : 'transparent'}`, cursor:'pointer',
              padding:'9px 16px', fontFamily:'var(--font-m)', fontSize:10, letterSpacing:'0.14em',
              color: tab===k ? 'var(--ink)' : 'var(--ink-dim)', transition:'all 0.16s',
            }}>{l}</button>
          ))}
        </div>

        {/* ── POSITIONS ── */}
        {tab === 'positions' && (
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

            <Card accent={accent} width="100%" style={{ padding:'20px 22px' }}>
              <DgLabel accent={accent}>STEP 1 · DEPOSIT INTO CUSTODY</DgLabel>
              <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.7, marginTop:-4, marginBottom:12 }}>
                Approval is granted <span style={{ color:'var(--ink)' }}>per veGauge</span> — one per gauge, then every position from it deposits in a click.
              </div>
              {loading && !data && <DgEmpty>LOADING…</DgEmpty>}
              {data && wallet.length === 0 && <DgEmpty>{chain.connected ? 'NO POSITIONS LEFT IN WALLET' : 'CONNECT WALLET'}</DgEmpty>}
              {wallet.map(n => {
                const ok = data.approved[n.gauge.toLowerCase()];
                return (
                  <div key={n.key} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'12px 0', borderTop:'1px solid rgba(232,230,225,0.06)', flexWrap:'wrap' }}>
                    <div>
                      <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                        <span style={{ fontFamily:'var(--font-m)', fontSize:12.5, color:'var(--ink)', letterSpacing:'0.05em' }}>NFT #{n.tokenId.toString()} · {posLine(n)}</span>
                        {ok ? <DgBadge color="#4ade80">✓ GAUGE APPROVED</DgBadge> : <DgBadge color="#ffd47c">GAUGE NOT APPROVED</DgBadge>}
                        {n.voted && <DgBadge color="#ffd47c">🔒 VOTE ACTIVE</DgBadge>}
                      </div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', marginTop:3 }}>{posSub(n)} · IN WALLET</div>
                    </div>
                    {ok
                      ? <DgBtn accent={accent} onClick={() => deposit(n)} disabled={n.voted} title={n.voted ? 'Reset votes on the Vote screen first' : undefined}>DEPOSIT</DgBtn>
                      : <DgBtn accent={accent} onClick={() => approveGauge(n)}>APPROVE GAUGE</DgBtn>}
                  </div>
                );
              })}
              {dev && <DgCall>VeGauge[{'{'}gauge{'}'}].setApprovalForAll(custody, true) — one per gauge → DelegatorCustody.depositNFT(underlyingVeGauge, tokenId) → nftKey</DgCall>}
              <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', marginTop:10, lineHeight:1.6 }}>
                Only the owner can deposit — approved operators can't. Positions land <span style={{ color:'var(--ink)' }}>custodied but not delegated</span>.
              </div>
            </Card>

            <Card accent={accent} width="100%" style={{ padding:0 }}>
              <div style={{ padding:'16px 22px 12px' }}><DgLabel accent={accent}>STEP 2 · YOUR CUSTODIED POSITIONS</DgLabel></div>
              {data && custody.length === 0 && <div style={{ padding:'0 22px 16px' }}><DgEmpty>NOTHING IN CUSTODY YET</DgEmpty></div>}
              {custody.map((p) => {
                const st = stateOf(p);
                const on = selPos?.key === p.key;
                return (
                  <div key={p.key} onClick={() => setSel(p.key)} style={{
                    display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, flexWrap:'wrap',
                    padding:'14px 22px', borderTop:'1px solid rgba(232,230,225,0.06)', cursor:'pointer',
                    background: on ? 'rgba(232,230,225,0.035)' : 'transparent',
                    borderLeft:`2px solid ${on ? accent : 'transparent'}`,
                  }}>
                    <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                      <span style={{ width:14, height:14, flexShrink:0, background: on ? accent : 'transparent', border:`1px solid ${on ? accent : 'rgba(232,230,225,0.3)'}` }} />
                      <div>
                        <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                          <span style={{ fontFamily:'var(--font-m)', fontSize:12.5, color:'var(--ink)', letterSpacing:'0.05em' }}>NFT #{p.tokenId.toString()} · {posLine(p)}</span>
                          <DgBadge color={st.color}>{st.txt}</DgBadge>
                          {p.registered && <DgBadge color="#8b5cf6">FEE TIER REGISTERED</DgBadge>}
                          {p.voteActive && <DgBadge color="#ffd47c">🔒 VOTE ACTIVE</DgBadge>}
                          {p.exit.withdrawalScheduled && <DgBadge color="#ffd47c">WITHDRAWAL SCHEDULED</DgBadge>}
                        </div>
                        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)', marginTop:4 }}>{posSub(p)}</div>
                      </div>
                    </div>
                    <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                      {p.state === 'custodied' && <>
                        <DgBtn accent={accent} onClick={() => { setSel(p.key); setTab('delegators'); }}>DELEGATE</DgBtn>
                        <DgBtn accent={accent} onClick={() => onNav && onNav('vote')}>SELF-VOTE</DgBtn>
                        <DgBtn accent={accent} onClick={() => { setSel(p.key); setTab('exit'); }}>WITHDRAW</DgBtn>
                      </>}
                      {p.state !== 'custodied' && <>
                        <DgBtn accent={accent} onClick={() => { setSel(p.key); setTab('rewards'); }}>REWARDS</DgBtn>
                        <DgBtn accent={accent} onClick={() => { setSel(p.key); setTab('exit'); }}>EXIT</DgBtn>
                      </>}
                    </div>
                  </div>
                );
              })}
            </Card>

            <Card accent={accent} width="100%" style={{ padding:'20px 22px' }}>
              <DgLabel accent={accent}>SOLO CUSTODIED VOTER — OPTIONAL</DgLabel>
              <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.7, marginBottom:14 }}>
                A custodied position can vote for itself, with no delegator. This is the resting state after a custody deposit and the way to reach the fee-tier program without giving up your vote.
              </div>
              <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'1fr 1fr', gap:10 }}>
                <DgBox>
                  <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'var(--ink)', letterSpacing:'0.06em', marginBottom:6 }}>SELF-VOTE</div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.6 }}>Allocate this position's weight across gauges yourself, once per epoch. Custodied positions appear in the Vote screen's NFT picker.</div>
                  {dev && <DgCall>DelegatorCustody.selfVote(nftKey, [pools], [weights])</DgCall>}
                  <div style={{ marginTop:10 }}><DgBtn accent={accent} onClick={() => onNav && onNav('vote')}>OPEN GAUGE ALLOCATION</DgBtn></div>
                </DgBox>
                <DgBox>
                  <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'var(--ink)', letterSpacing:'0.06em', marginBottom:6 }}>REGISTER FOR FEE TIER</div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.6 }}>
                    Swap-fee discount on all pairs. Costs a separate <span style={{ color:'#ffd47c' }}>2-week unlock lockup</span>.
                    {selPos ? <><br />Selected: NFT #{selPos.tokenId.toString()} · {selPos.label}{selPos.registered ? ' — already registered' : selPos.delegated ? ' — delegated, register via delegation' : ''}</> : null}
                    {data && data.blockedUntil > nowSec && <><br /><span style={{ color:'#ef4444' }}>Registration blocked for {dfmt.countdown(data.blockedUntil - nowSec)} after a forced unlock.</span></>}
                  </div>
                  {dev && <DgCall>DelegatorCustody.registerForBenefit(nftKey, feeDiscountV4)</DgCall>}
                  <div style={{ marginTop:10 }}><DgBtn accent={accent} disabled={!selPos || selPos.registered || selPos.delegated || (data?.blockedUntil ?? 0) > nowSec} onClick={() => register(selPos)}>REGISTER</DgBtn></div>
                </DgBox>
              </div>
            </Card>
          </div>
        )}

        {/* ── DELEGATORS ── */}
        {tab === 'delegators' && (
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            <Card accent={accent} width="100%" style={{ padding:0 }}>
              <div style={{ padding:'16px 20px 10px', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:8 }}>
                <DgLabel accent={accent}>PICK A DELEGATOR</DgLabel>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>DELEGATING: <span style={{ color:'var(--ink)' }}>{selPos ? posLine(selPos) : 'none selected'}</span></span>
                  <button onClick={() => setPosPicker(v => !v)} title="Change position" style={{ display:'flex', alignItems:'center', gap:5, cursor:'pointer', background: posPicker ? `${accent}1a` : 'rgba(232,230,225,0.05)', border:`1px solid ${posPicker ? accent : 'rgba(232,230,225,0.16)'}`, padding:'4px 7px', color: posPicker ? accent : 'var(--ink-dim)', fontFamily:'var(--font-m)', fontSize:9, letterSpacing:'0.12em' }}>
                    <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M11.2 2.6l2.2 2.2-8 8H3.2v-2.2l8-8z" /></svg>
                    CHANGE
                  </button>
                </div>
              </div>
              {posPicker && (
                <div style={{ borderTop:'1px solid rgba(232,230,225,0.07)', background:'rgba(232,230,225,0.02)' }}>
                  <div style={{ padding:'11px 20px 4px', fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', letterSpacing:'0.16em' }}>YOUR CUSTODIED POSITIONS</div>
                  {custody.map(p => {
                    const on = selPos?.key === p.key;
                    const st = p.state === 'delegated' ? { txt:`ALREADY DELEGATED · ${dfmt.short(p.delegator)}`, color:accent }
                      : p.state === 'self' ? { txt:'SELF-VOTING · RESET VOTES BEFORE DELEGATING', color:'#4ade80' }
                      : { txt:'CUSTODIED · READY TO DELEGATE', color:'#ffd47c' };
                    return (
                      <button key={p.key} onClick={() => { setSel(p.key); setPosPicker(false); }} style={{
                        display:'block', width:'100%', textAlign:'left', cursor:'pointer', background: on ? `${accent}12` : 'none',
                        border:'none', borderTop:'1px solid rgba(232,230,225,0.05)', borderLeft:`2px solid ${on?accent:'transparent'}`, padding:'11px 20px',
                      }}>
                        <div style={{ display:'flex', alignItems:'center', gap:9, flexWrap:'wrap' }}>
                          <span style={{ width:10, height:10, flexShrink:0, borderRadius:'50%', border:`1px solid ${on?accent:'rgba(232,230,225,0.28)'}`, background:on?accent:'transparent' }} />
                          <span style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)', letterSpacing:'0.05em' }}>NFT #{p.tokenId.toString()} · {posLine(p)}</span>
                          <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-dim)' }}>{posSub(p)}</span>
                          {p.registered && <DgBadge color="#8b5cf6">FEE TIER REGISTERED</DgBadge>}
                          {p.delegated && <DgBadge color="#ffd47c">WOULD MOVE GROUPS</DgBadge>}
                        </div>
                        <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:st.color, letterSpacing:'0.12em', paddingLeft:19, marginTop:5 }}>{st.txt}</div>
                      </button>
                    );
                  })}
                  {custody.length === 0 && <div style={{ padding:'20px', fontFamily:'var(--font-c)', fontSize:16, color:'var(--ink-mute)', letterSpacing:'0.08em' }}>NOTHING IN CUSTODY YET</div>}
                </div>
              )}
              {!isMobile && (
                <div style={{ display:'grid', gridTemplateColumns:'1.3fr 60px 70px 110px 70px 1.1fr', padding:'9px 20px', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
                  {['DELEGATOR','FEE','GROUP','AGGREGATED VP','MISSED','THIS EPOCH'].map(h => (
                    <div key={h} style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.15em' }}>{h}</div>
                  ))}
                </div>
              )}
              {data && delegators.length === 0 && <div style={{ padding:'20px' }}><DgEmpty>NO REGISTERED DELEGATORS YET</DgEmpty></div>}
              {delegators.map(d => {
                const g = selPos ? d.byUnderlying[selPos.source.toLowerCase()] : null;
                const votedThisEpoch = !!g?.votedThisEpoch;
                const blocked = votedThisEpoch || !d.active || (g && !g.joinOpen);
                const picked = pickedDelegator?.id === d.id;
                return (
                  <div key={d.id} onClick={() => !blocked && setPicked(d)} style={{
                    display:'grid', gridTemplateColumns: isMobile?'1fr':'1.3fr 60px 70px 110px 70px 1.1fr',
                    gap: isMobile?6:0, padding:'13px 20px', borderTop:'1px solid rgba(232,230,225,0.05)',
                    alignItems:'center', cursor: blocked ? 'not-allowed' : 'pointer',
                    opacity: blocked ? 0.45 : 1,
                    background: picked ? `${accent}0f` : 'transparent',
                    borderLeft: picked ? `2px solid ${accent}` : '2px solid transparent',
                  }}>
                    <div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:12.5, color:'var(--ink)', letterSpacing:'0.05em' }}>{d.name}</div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-mute)', marginTop:2 }}>TIER {d.tier} · {dfmt.units(d.lockedArch, 18, 0)} ARCH LOCKED</div>
                    </div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:12, color: d.fee===0 ? '#4ade80' : 'var(--ink)' }}>{isMobile && 'FEE '}{d.fee}%</div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink-dim)' }}>{isMobile && 'GROUP '}{d.group}</div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)' }}>{dfmt.num(vpNum(d.vp), 0)}</div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:12, color: d.missed>0 ? '#ffd47c' : 'var(--ink-dim)' }}>{d.missed}/3</div>
                    <div>
                      {!d.active
                        ? <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ef4444' }}>No longer accepting delegations.</span>
                        : votedThisEpoch
                        ? <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c' }}>Already voted this epoch — join in {joinCopy}.</span>
                        : g && !g.joinOpen
                        ? <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#ffd47c' }}>Group closed to new members right now.</span>
                        : <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'#4ade80' }}>Open — {g ? "hasn't voted yet" : 'no group for this gauge yet, one opens on delegation'}</span>}
                    </div>
                  </div>
                );
              })}
            </Card>

            <Card accent={accent} width="100%" style={{ padding:'20px 22px' }}>
              <DgLabel accent={accent}>OPTIONAL · FEE DISCOUNT PROGRAM</DgLabel>
              <label onClick={() => setRegFee(!regFee)} style={{ display:'flex', gap:12, alignItems:'flex-start', cursor:'pointer', padding:'12px 14px', border:`1px solid ${regFee ? '#ffd47c66' : 'rgba(232,230,225,0.12)'}`, background: regFee ? 'rgba(255,212,124,0.05)' : 'transparent' }}>
                <div style={{ width:16, height:16, flexShrink:0, marginTop:2, border:`2px solid ${regFee ? '#ffd47c' : 'rgba(232,230,225,0.3)'}`, background: regFee ? '#ffd47c22' : 'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  {regFee && <span style={{ fontSize:10, color:'#ffd47c' }}>✓</span>}
                </div>
                <div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:11.5, color:'var(--ink)', letterSpacing:'0.04em', marginBottom:5 }}>Register this position for the swap-fee discount</div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'#ffd47c', lineHeight:1.7 }}>
                    This adds a <strong>separate 2-week lockup</strong> and changes your exit from 1 transaction to 2 transactions plus a 2-week wait. Off by default on purpose.
                  </div>
                </div>
              </label>

              <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'1fr 1fr', gap:10, marginTop:12 }}>
                <DgBox style={{ borderColor: regFee ? 'rgba(232,230,225,0.08)' : `${accent}55` }}>
                  <div style={{ fontFamily:'var(--font-d)', fontSize:13, color: regFee ? 'var(--ink-dim)' : accent, letterSpacing:'0.06em', marginBottom:8 }}>EXIT WITHOUT REGISTERING</div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>2 transactions · immediate · no penalty</div>
                  {dev && <DgCall>withdrawNFTs(...) → DelegatorCustody.withdrawNFT(nftKey)</DgCall>}
                </DgBox>
                <DgBox tone={regFee ? 'warn' : undefined}>
                  <div style={{ fontFamily:'var(--font-d)', fontSize:13, color: regFee ? '#ffd47c' : 'var(--ink-dim)', letterSpacing:'0.06em', marginBottom:8 }}>EXIT AFTER REGISTERING</div>
                  <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>2 transactions + <span style={{ color:'#ffd47c' }}>2-week wait</span>, or pay a 5% VP penalty to leave now (plus a 2-week cooldown before re-registering anything).</div>
                  {dev && <DgCall>startUnlockDelegatedNFT → finishUnlockDelegatedNFT</DgCall>}
                </DgBox>
              </div>

              <div style={{ marginTop:16 }}>
                <div style={{ display:'grid', gridTemplateColumns:'60px 1fr 1fr', padding:'8px 0', borderBottom:'1px solid rgba(232,230,225,0.09)' }}>
                  {['TIER','ARCH-NORMALIZED VP','SWAP-FEE DISCOUNT'].map(h => (
                    <div key={h} style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.15em' }}>{h}</div>
                  ))}
                </div>
                {tiers.map(t => {
                  const mine = data && t.t === data.userTier && chain.connected;
                  return (
                    <div key={t.t} style={{ display:'grid', gridTemplateColumns:'60px 1fr 1fr', padding:'8px 0', borderBottom:'1px solid rgba(232,230,225,0.04)' }}>
                      <div style={{ fontFamily:'var(--font-d)', fontSize:14, color: mine ? accent : 'var(--ink)' }}>{t.t}</div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:11.5, color:'var(--ink-dim)' }}>{dfmt.units(t.vp, 18, 0)}</div>
                      <div style={{ fontFamily:'var(--font-m)', fontSize:11.5, color: mine ? accent : 'var(--ink)' }}>{discPct(t.disc)}{mine && '  ← your tier'}</div>
                    </div>
                  );
                })}
                {tiers.length === 0 && <DgEmpty>{data ? 'NO TIERS CONFIGURED' : 'LOADING…'}</DgEmpty>}
                <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', marginTop:10, lineHeight:1.6 }}>
                  Thresholds are read on-chain from FeeDiscountV4. {data && chain.connected ? <>Your registered VP: <span style={{ color:'var(--ink)' }}>{dfmt.units(data.effectiveBalance, 18, 0)}</span>.</> : null} Your tier moves only when the manager calls registerDelegatedVP — not with your live gauge balance.
                </div>
              </div>
            </Card>

            <Card accent={accent} width="100%" style={{ padding:'18px 22px' }}>
              {!pickedDelegator && <DgBox tone="warn" style={{ marginBottom:12 }}><span style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'#ffd47c' }}>Pick an open delegator to continue. Rows that already voted this epoch will revert on-chain.</span></DgBox>}
              {selPos?.voteActive && !selPos.delegated && <DgBox tone="bad" style={{ marginBottom:12 }}><span style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'#ef4444' }}>This position voted this epoch. Reset its votes on the Exit tab before delegating.</span></DgBox>}
              <DgBtn accent={accent} kind="primary" full disabled={!pickedDelegator || !selPos || selPos.delegated} onClick={delegate}>
                {pickedDelegator ? `DELEGATE TO ${pickedDelegator.name}` : 'SELECT A DELEGATOR'}
              </DgBtn>
              {dev && <DgCall>DelegatorVotingManager.delegateNFTs(underlying, [nftKeys], delegator, registerToFeeDiscount={String(regFee)})</DgCall>}
            </Card>
          </div>
        )}

        {/* ── REWARDS ── */}
        {tab === 'rewards' && <RewardsTab accent={accent} pos={selPos} onTx={onTx} dev={dev} isMobile={isMobile} activePeriod={data?.activePeriod} />}

        {/* ── EXIT ── */}
        {tab === 'exit' && (
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

            <Card accent={accent} width="100%" style={{ padding:0 }}>
              <div style={{ padding:'16px 22px 6px' }}>
                <DgLabel accent={accent}>STEP 1 · WHICH POSITION ARE YOU EXITING?</DgLabel>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.7, marginTop:-4, marginBottom:10 }}>
                  Every position exits on its own terms. What it costs you depends on where it sits right now — delegated or self-voting, registered for the fee discount or not.
                </div>
              </div>
              {custody.map(p => {
                const on = selPos?.key === p.key;
                const tier = p.registered ? tierFor(tiers, p.benefitValue) : null;
                const st = stateOf(p);
                const route = p.registered
                  ? { txt:'PATH B or C · registered for the fee discount', color:'#ffd47c' }
                  : { txt:'PATH A · immediate, no penalty', color:'#4ade80' };
                return (
                  <button key={p.key} onClick={() => setSel(p.key)} style={{
                    display:'block', width:'100%', textAlign:'left', cursor:'pointer',
                    background: on ? `${accent}12` : 'none', border:'none',
                    borderTop:'1px solid rgba(232,230,225,0.06)',
                    borderLeft:`2px solid ${on ? accent : 'transparent'}`,
                    padding:'14px 20px',
                  }}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:14, flexWrap:'wrap' }}>
                      <div style={{ minWidth:180 }}>
                        <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:5 }}>
                          <div style={{ width:11, height:11, borderRadius:'50%', border:`1px solid ${on?accent:'rgba(232,230,225,0.28)'}`, background: on?accent:'transparent' }} />
                          <span style={{ fontFamily:'var(--font-d)', fontSize:16, color:'var(--ink)', letterSpacing:'0.04em' }}>NFT #{p.tokenId.toString()} · {p.label}</span>
                          <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)' }}>{dfmt.units(p.amount, 18, 2)} LP · {dfmt.usd(p.usd)}</span>
                        </div>
                        <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:st.color, letterSpacing:'0.14em', paddingLeft:20 }}>{st.txt}</div>
                      </div>
                      <div style={{ display:'flex', gap:8, flexWrap:'wrap', alignItems:'center' }}>
                        {p.voteActive && <DgBadge color="#ef4444">VOTE ACTIVE</DgBadge>}
                        {p.registered
                          ? <DgBadge color="#ffd47c">FEE TIER {tier ? `${tier.t} · ${discPct(tier.disc)} OFF SWAPS` : 'REGISTERED'}</DgBadge>
                          : <DgBadge color="rgba(232,230,225,0.4)">NO FEE DISCOUNT</DgBadge>}
                        <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)' }}>{dfmt.num(vpNum(p.vp), 0)} VP</span>
                      </div>
                    </div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:route.color, letterSpacing:'0.06em', paddingLeft:20, marginTop:8 }}>
                      → {route.txt}{p.voteActive && !p.delegated ? ' · reset votes first' : ''}{p.exit.blocker ? ` · ${p.exit.blocker}` : ''}
                    </div>
                  </button>
                );
              })}
              {data && custody.length === 0 && <div style={{ padding:'28px 22px', fontFamily:'var(--font-c)', fontSize:17, color:'var(--ink-mute)', letterSpacing:'0.08em', borderTop:'1px solid rgba(232,230,225,0.06)' }}>NOTHING IN CUSTODY TO EXIT</div>}
            </Card>

            {selPos && (
              <div style={{ display:'flex', alignItems:'baseline', gap:12, flexWrap:'wrap' }}>
                <DgLabel accent={accent}>STEP 2 · EXIT NFT #{selPos.tokenId.toString()} · {selPos.label}</DgLabel>
                <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', letterSpacing:'0.1em', marginTop:-14 }}>
                  {selPos.registered ? 'REGISTERED FOR THE FEE DISCOUNT — THE LOCKUP APPLIES' : 'NOT REGISTERED — NO LOCKUP'}
                </span>
              </div>
            )}

            {selPos?.voteActive && !selPos.delegated && (
              <DgBox tone="bad">
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, flexWrap:'wrap' }}>
                  <div>
                    <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'#ef4444', letterSpacing:'0.06em', marginBottom:5 }}>THIS POSITION HAS AN ACTIVE VOTE</div>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)' }}>Reset votes to withdraw. Withdrawal is blocked until the reset confirms.</div>
                  </div>
                  <DgBtn accent={accent} kind="danger" onClick={() => selfReset(selPos)}>RESET VOTES</DgBtn>
                </div>
                {dev && <DgCall>revert PositionVoteActive(nftKey, tokenId) — decoded by the tx modal · selfResetVotes(nftKey)</DgCall>}
              </DgBox>
            )}

            <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'1fr 1fr', gap:12, opacity: selPos?1:0.35, pointerEvents: selPos?'auto':'none' }}>
              {selPos && !selPos.registered && (
              <Card accent={accent} width="100%" style={{ padding:'18px 20px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                  <span style={{ fontFamily:'var(--font-d)', fontSize:15, color:'var(--ink)', letterSpacing:'0.06em', display:'inline-flex', alignItems:'center' }}>PATH A · STRAIGHT OUT
                    <DgInfo text="For a position with no fee-discount registration. Nothing is locked, so you just leave: one call pulls the position out of the delegator's group, a second pulls it out of custody and back into your wallet. No wait, no penalty." />
                  </span>
                  <DgBadge color="#4ade80">IMMEDIATE</DgBadge>
                </div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>
                  {selPos.delegated ? '2 transactions, no wait, no penalty. Pull out of the group, then pull out of custody.' : '1 transaction. The position goes straight back to your wallet.'}
                  {selPos.delegated && selPos.exit.groupVotedThisEpoch && <><br /><span style={{ color:'#ffd47c' }}>The group already voted this epoch — leaving now is blocked until the epoch rolls. Use the escape hatch instead.</span></>}
                </div>
                {dev && <DgCall>{selPos.delegated ? 'withdrawNFTs(underlying, delegator, [nftKeys]) → ' : ''}DelegatorCustody.withdrawNFT(nftKey)</DgCall>}
                <div style={{ marginTop:12, display:'flex', gap:8 }}>
                  {selPos.delegated
                    ? <DgBtn accent={accent} kind="primary" full disabled={selPos.exit.groupVotedThisEpoch} onClick={() => leaveGroup(selPos)}>1 · LEAVE GROUP</DgBtn>
                    : <DgBtn accent={accent} kind="primary" full disabled={selPos.voteActive} onClick={() => withdrawFromCustody(selPos)}>WITHDRAW NOW</DgBtn>}
                  {selPos.delegated && <DgBtn accent={accent} full disabled title="Leave the group first">2 · WITHDRAW FROM CUSTODY</DgBtn>}
                </div>
              </Card>
              )}

              {selPos?.delegated && (
              <Card accent={accent} width="100%" style={{ padding:'18px 20px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                  <span style={{ fontFamily:'var(--font-d)', fontSize:15, color:'var(--ink)', letterSpacing:'0.06em', display:'inline-flex', alignItems:'center' }}>PATH A′ · ESCAPE HATCH
                    <DgInfo text="Only for a delegated position. Use it if your delegator stops cooperating: you schedule the withdrawal now, and after one epoch anyone at all can execute it — the delegator cannot block or stall your exit." />
                  </span>
                  <DgBadge color="#ffd47c">~1 EPOCH</DgBadge>
                </div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>
                  Your delegator went quiet? Schedule the withdrawal and execute it after one epoch. The second call is <span style={{ color:'var(--ink)' }}>permissionless</span> — nobody can hold your position hostage.
                </div>
                {dev && <DgCall>scheduleWithdrawal(underlying, delegator, [nftKeys]) → GroupVotingSource.executeScheduledWithdrawal([nftKeys])</DgCall>}
                <div style={{ marginTop:12, display:'flex', gap:8 }}>
                  <DgBtn accent={accent} full disabled={selPos.exit.withdrawalScheduled} onClick={() => schedule(selPos)}>{selPos.exit.withdrawalScheduled ? 'SCHEDULED' : 'SCHEDULE WITHDRAWAL'}</DgBtn>
                  <DgBtn accent={accent} full disabled={!selPos.exit.withdrawalScheduled} onClick={() => executeScheduled(selPos)}>EXECUTE</DgBtn>
                </div>
              </Card>
              )}

              {selPos?.registered && (
              <Card accent={accent} width="100%" style={{ padding:'18px 20px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                  <span style={{ fontFamily:'var(--font-d)', fontSize:15, color:'#ffd47c', letterSpacing:'0.06em', display:'inline-flex', alignItems:'center' }}>PATH B · REGISTERED, PATIENT
                    <DgInfo text="This position is registered for the swap-fee discount, which carries a 2-week lockup. Path B honours it: start the unlock, wait the two weeks, then finish it. You pay nothing." />
                  </span>
                  <DgBadge color="#ffd47c">2 WEEKS · FREE</DgBadge>
                </div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>Start the unlock, come back in two weeks, finish it. No penalty.</div>
                {selPos.exit.unlockStarted && (
                  <DgBox tone="warn" style={{ marginTop:12 }}>
                    <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.16em', marginBottom:5 }}>{selPos.exit.canFinishUnlockNow ? 'UNLOCK READY' : 'UNLOCK COMPLETES IN'}</div>
                    <div style={{ fontFamily:'var(--font-c)', fontSize:24, color:'#ffd47c', letterSpacing:'0.04em' }}>{selPos.exit.canFinishUnlockNow ? 'NOW' : dfmt.countdown(Math.max(0, selPos.exit.unlockReadyAt - nowSec))}</div>
                  </DgBox>
                )}
                {dev && <DgCall>FeeDiscountV4.startUnlockDelegatedNFT(user, nftKey) → finishUnlockDelegatedNFT(user, nftKey)</DgCall>}
                <div style={{ display:'flex', gap:8, marginTop:12 }}>
                  <DgBtn accent={accent} full onClick={() => startUnlock(selPos)} disabled={selPos.exit.unlockStarted}>{selPos.exit.unlockStarted ? 'UNLOCK STARTED' : 'START UNLOCK'}</DgBtn>
                  <DgBtn accent={accent} full disabled={!selPos.exit.canFinishUnlockNow} onClick={() => finishUnlock(selPos)} title={selPos.exit.unlockStarted && !selPos.exit.canFinishUnlockNow ? `Available in ${dfmt.countdown(Math.max(0, selPos.exit.unlockReadyAt - nowSec))}` : undefined}>FINISH UNLOCK</DgBtn>
                </div>
              </Card>
              )}

              {selPos?.registered && (
              <Card accent={accent} width="100%" style={{ padding:'18px 20px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                  <span style={{ fontFamily:'var(--font-d)', fontSize:15, color:'#ef4444', letterSpacing:'0.06em', display:'inline-flex', alignItems:'center' }}>PATH C · OUT NOW
                    <DgInfo text="The impatient version of Path B, for a registered position. You break the 2-week lockup on the spot and pay for it twice: a slice of your tier voting power, and no position of yours can register for the fee discount for two weeks." />
                  </span>
                  <DgBadge color="#ef4444">{selPos.exit.instantExitFeeBps ? (selPos.exit.instantExitFeeBps / 100) + '%' : '5%'} PENALTY</DgBadge>
                </div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.8 }}>
                  Force the unlock immediately. Costs {selPos.exit.instantExitFeeBps ? (selPos.exit.instantExitFeeBps / 100) + '%' : '5%'} of your tier VP <span style={{ color:'#ef4444' }}>and</span> blocks re-registering any position for 2 weeks.
                  {!selPos.exit.canInstantExitNow && selPos.exit.blocker && <><br /><span style={{ color:'#ffd47c' }}>{selPos.exit.blocker}</span></>}
                </div>
                {dev && <DgCall>FeeDiscountV4.forceUnlockDelegatedNFT(user, nftKey)</DgCall>}
                <div style={{ marginTop:12 }}><DgBtn accent={accent} kind="danger" full disabled={selPos.exit.unlockStarted} onClick={() => setForceDialog(true)}>FORCE UNLOCK</DgBtn></div>
              </Card>
              )}
            </div>
          </div>
        )}
      </div>

      {forceDialog && (
        <div onClick={() => setForceDialog(false)} style={{ position:'fixed', inset:0, zIndex:420, background:'rgba(5,5,5,0.9)', backdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', padding:16 }}>
          <div onClick={e => e.stopPropagation()} style={{ width:'100%', maxWidth:460, background:'rgba(8,6,5,0.98)', border:'1px solid rgba(239,68,68,0.35)', padding:'26px 26px 22px' }}>
            <div style={{ fontFamily:'var(--font-d)', fontSize:22, color:'#ef4444', letterSpacing:'0.05em', marginBottom:16 }}>FORCE UNLOCK — TWO COSTS</div>
            {[
              ['VP PENALTY', 'Taken against your tier voting power, not your tokens. Your fee tier may drop.'],
              ['2-WEEK COOLDOWN', "You won't be able to register ANY position for the fee discount for two weeks. This is the part people don't expect."],
            ].map(([t,b]) => (
              <DgBox tone="bad" key={t} style={{ marginBottom:10 }}>
                <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'#ef4444', letterSpacing:'0.06em', marginBottom:6 }}>{t}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.7 }}>{b}</div>
              </DgBox>
            ))}
            <div style={{ display:'flex', gap:8, marginTop:16 }}>
              <DgBtn accent={accent} full onClick={() => setForceDialog(false)}>CANCEL</DgBtn>
              <DgBtn accent={accent} kind="danger" full onClick={() => { setForceDialog(false); forceUnlock(selPos); }}>I ACCEPT BOTH — FORCE UNLOCK</DgBtn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function RewardsTab({ accent, pos, onTx, dev, isMobile, activePeriod }) {
  const chain = useChain();
  const { data, loading } = useRewardRows(pos, chain.account);
  const epochNo = (e) => chain.book && data ? Math.floor(Number(e) / window.Chain.WEEK) : '—';

  function claimSolo(count) { onTx('claimRewardsForEpochs', (w) => w.custody.claimRewardsForEpochs(pos.nftKey, 0, count)); }
  function settle(it, epoch) { onTx('settleEpoch', (w) => w.delegatorRewardManager.claimGroupRewards(pos.groupKey, it.internal, it.pool, it.token, epoch)); }
  function claimMember(it, epoch) { onTx('claimRewardAsMember', (w) => w.delegatorRewardManager.claimRewardAsMember(pos.groupKey, it.bribe, it.pool, it.token, epoch, chain.account)); }
  function claimLp() { onTx('claimGroupLPEmissions', (w) => w.delegatorRewardManager.claimGroupLPEmissions(pos.groupKey, pos.source, 0, 20)); }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <DgBox tone="warn">
        <div style={{ fontFamily:'var(--font-m)', fontSize:10.5, color:'var(--ink-dim)', lineHeight:1.7 }}>
          Nothing is pushed to you. Rewards are <span style={{ color:'#ffd47c' }}>claimed per epoch, per type</span> — there is no single running total.
        </div>
      </DgBox>

      {!pos && <Card accent={accent} width="100%" style={{ padding:'20px 22px' }}><DgEmpty>PICK A CUSTODIED POSITION ON THE POSITIONS TAB</DgEmpty></Card>}

      {pos && pos.delegated && (
        <Card accent={accent} width="100%" style={{ padding:0 }}>
          <div style={{ padding:'16px 20px 10px', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:8 }}>
            <DgLabel accent={accent}>CLAIMABLE BY EPOCH — NFT #{pos.tokenId.toString()} · {pos.label}</DgLabel>
            <DgBtn accent={accent} onClick={claimLp}>CLAIM GROUP LP EMISSIONS</DgBtn>
          </div>
          <div style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'70px 1fr 1fr 1fr 150px', padding:'9px 20px', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
            {['EPOCH','POOL · SOURCE','GROUP TOTAL','YOUR SHARE',''].map(h => (
              <div key={h} style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.15em' }}>{h}</div>
            ))}
          </div>
          {loading && !data && <div style={{ padding:'16px 20px' }}><DgEmpty>LOADING…</DgEmpty></div>}
          {data && data.rows.length === 0 && <div style={{ padding:'16px 20px' }}><DgEmpty>THE GROUP HAS NOT VOTED YET</DgEmpty></div>}
          {data?.rows.map(r => r.items.length === 0
            ? <div key={String(r.epoch)} style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'70px 1fr 1fr 1fr 150px', padding:'13px 20px', borderTop:'1px solid rgba(232,230,225,0.05)' }}>
                <div style={{ fontFamily:'var(--font-d)', fontSize:16, color:'var(--ink)' }}>{epochNo(r.epoch)}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-mute)' }}>Voted · no bribes or fees posted for this epoch</div>
              </div>
            : r.items.map((it, i) => (
              <div key={String(r.epoch) + i} style={{ display:'grid', gridTemplateColumns: isMobile?'1fr':'70px 1fr 1fr 1fr 150px', gap: isMobile?6:0, padding:'13px 20px', borderTop:'1px solid rgba(232,230,225,0.05)', alignItems:'center' }}>
                <div style={{ fontFamily:'var(--font-d)', fontSize:16, color:'var(--ink)' }}>{epochNo(r.epoch)}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)' }}>{dfmt.short(it.pool)} · {it.internal ? 'TRADING FEES' : 'BRIBES'} · {it.sym}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:11.5, color: it.settled ? 'var(--ink)' : 'var(--ink-mute)' }}>{it.settled ? `${dfmt.units(it.groupTotal, it.dec)} ${it.sym}` : '—'}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:11.5, color: it.settled ? 'var(--ink)' : 'var(--ink-mute)' }}>{it.settled ? `${dfmt.units(it.share, it.dec)} ${it.sym}` : 'not settled'}</div>
                <div style={{ display:'flex', gap:6, justifyContent: isMobile?'flex-start':'flex-end' }}>
                  {it.settled
                    ? <DgBtn accent={accent} disabled={it.claimed || it.share === 0n} onClick={() => claimMember(it, r.epoch)}>{it.claimed ? 'CLAIMED' : 'CLAIM'}</DgBtn>
                    : <DgBtn accent={accent} disabled={!it.settleable} title={it.settleable ? undefined : 'Settlement opens once the epoch has closed'} onClick={() => settle(it, r.epoch)}>SETTLE</DgBtn>}
                </div>
              </div>
            )))}
          <div style={{ padding:'14px 20px', borderTop:'1px solid rgba(232,230,225,0.07)', fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', lineHeight:1.7 }}>
            Not settled means nobody has pulled the group's reward for that epoch yet. Settlement is permissionless once the epoch closes — anyone, including you, can trigger it.
            {dev && <DgCall>claimGroupRewards(groupKey, internal, pool, token, epoch) · claimRewardAsMember(groupKey, bribe, pool, token, epoch, self) · claimGroupLPEmissions(groupKey, gauge, 0, 20)</DgCall>}
          </div>
        </Card>
      )}

      {pos && !pos.delegated && (
        <Card accent={accent} width="100%" style={{ padding:'20px 22px' }}>
          <DgLabel accent={accent}>SELF-VOTED POSITION · PAGINATED CLAIM — NFT #{pos.tokenId.toString()}</DgLabel>
          <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.7, marginBottom:14 }}>
            {data ? `${data.count} voted epoch${data.count === 1 ? '' : 's'} to collect.` : 'Counting voted epochs…'} Claiming walks the epochs in batches of 20 and is idempotent per epoch — safe to re-run.
          </div>
          <DgBtn accent={accent} kind="primary" full onClick={() => claimSolo(Math.min(20, data.count))} disabled={!data || data.count === 0}>
            {data && data.count > 0 ? `CLAIM ${Math.min(20, data.count)} EPOCH${data.count === 1 ? '' : 'S'}` : 'NOTHING TO CLAIM YET'}
          </DgBtn>
          {dev && <DgCall>read SoloRewardsHarvester.votedEpochCount(nftKey) → DelegatorCustody.claimRewardsForEpochs(nftKey, 0, count)</DgCall>}
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { DelegateScreen, useDelegateData });