// app-modals.jsx — AnarchyFi modal components
// Exports to window: BoostedWarningModal, TxModal

const { useState, useEffect } = React;

/* ── EXIT FEE CHART ─────────────────────────────────────────────────── */
// Exit fee: 25% at deposit → 2.5% floor, LINEAR over 52 weeks (VeGauge.calculate_fee).
// Rate is locked in at deposit time and does not change if governance updates the global.
function ExitFeeChart({ currentWeek = 0, positionUsd = 0, accent }) {
  const W = 280, H = 90;
  const MIN_FEE = 2.5, MAX_FEE = 25.0, WEEKS = 52;
  const points = Array.from({ length: WEEKS + 1 }, (_, w) => ({
    day: w,
    fee: MAX_FEE - (MAX_FEE - MIN_FEE) * (w / WEEKS),
  }));
  const currentDay = currentWeek;

  const toX = d => (d / WEEKS) * W;
  const toY = f => H - ((f - MIN_FEE) / (MAX_FEE - MIN_FEE)) * H;

  const linePts = points.map(p => `${toX(p.day).toFixed(1)},${toY(p.fee).toFixed(1)}`).join(' ');
  const areaPts = `0,${H} ${linePts} ${W},${H}`;

  const markerX = toX(currentDay);
  const markerFee = points[currentDay]?.fee ?? MIN_FEE;
  const markerY = toY(markerFee);

  return (
    <div style={{ position: 'relative' }}>
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ display:'block', overflow:'visible' }}>
        <defs>
          <linearGradient id="feeGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#ef4444" />
            <stop offset="50%" stopColor="#ffd47c" />
            <stop offset="100%" stopColor="#4ade80" />
          </linearGradient>
          <linearGradient id="feeAreaGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#ef444422" />
            <stop offset="100%" stopColor="transparent" />
          </linearGradient>
        </defs>
        {/* Grid lines */}
        {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
          <line key={i} x1={0} y1={H * t} x2={W} y2={H * t}
            stroke="rgba(232,230,225,0.06)" strokeWidth={1} />
        ))}
        {/* Area fill */}
        <polygon points={areaPts} fill="url(#feeAreaGrad)" />
        {/* Line */}
        <polyline points={linePts} fill="none" stroke="url(#feeGrad)" strokeWidth={2} strokeLinejoin="round" />
        {/* Current position marker */}
        {currentDay > 0 && (
          <>
            <line x1={markerX} y1={0} x2={markerX} y2={H} stroke="rgba(232,230,225,0.3)" strokeWidth={1} strokeDasharray="3,3" />
            <circle cx={markerX} cy={markerY} r={4} fill={accent} />
          </>
        )}
        {/* Axes */}
        <line x1={0} y1={H} x2={W} y2={H} stroke="rgba(232,230,225,0.18)" strokeWidth={1} />
        <line x1={0} y1={0} x2={0} y2={H} stroke="rgba(232,230,225,0.18)" strokeWidth={1} />
      </svg>
      {/* Axis labels */}
      <div style={{ display:'flex', justifyContent:'space-between', marginTop:5 }}>
        {['WK 0', 'WK 13', 'WK 26', 'WK 39', 'WK 52'].map(l => (
          <span key={l} style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.08em' }}>{l}</span>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', position:'absolute', left:-30, top:0, bottom:16, flexDirection:'column', alignItems:'flex-end' }}>
        {['25%','19%','13%','2.5%'].map(l => (
          <span key={l} style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)' }}>{l}</span>
        ))}
      </div>
    </div>
  );
}

/* ── BOOSTED WARNING MODAL ───────────────────────────────────────────── */
function BoostedWarningModal({ onClose, onConfirm, accent }) {
  const [agreed, setAgreed] = useState(false);
  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 400,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(5,5,5,0.88)', backdropFilter: 'blur(6px)',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        position: 'relative', width: 540,
        background: 'rgba(8,6,5,0.97)', border: '1px solid rgba(255,212,124,0.3)',
        padding: '32px 32px 28px', maxHeight: '90vh', overflowY: 'auto',
      }}>
        {/* Corner brackets — yellow */}
        {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
          <div key={v+h} style={{
            position:'absolute', [v]: -1, [h]: -1, width: 18, height: 18,
            [`border${v.charAt(0).toUpperCase()+v.slice(1)}`]: '2px solid #ffd47c',
            [`border${h.charAt(0).toUpperCase()+h.slice(1)}`]: '2px solid #ffd47c',
          }} />
        ))}

        {/* Header */}
        <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:20 }}>
          <span style={{ fontSize:28 }}>⚠</span>
          <span style={{ fontFamily:'var(--font-d)', fontSize:26, color:'#ffd47c', letterSpacing:'0.06em' }}>BOOSTED STAKE WARNING</span>
        </div>

        {/* Rewards badge */}
        <div style={{
          display:'flex', alignItems:'center', gap:16, padding:'14px 18px', marginBottom:20,
          background:'rgba(255,212,124,0.07)', border:'1px solid rgba(255,212,124,0.25)',
        }}>
          <span style={{ fontFamily:'var(--font-d)', fontSize:42, color:'#ffd47c', lineHeight:1 }}>1.5×</span>
          <div>
            <div style={{ fontFamily:'var(--font-d)', fontSize:16, color:'#ffd47c', letterSpacing:'0.06em' }}>BOOSTED REWARDS</div>
            <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', marginTop:3, lineHeight:1.5 }}>
              You earn <strong style={{ color:'#ffd47c' }}>1.5× more ANARCHY tokens</strong> compared<br/>to standard staking throughout your lock period.
            </div>
          </div>
        </div>

        {/* Exit fee warning */}
        <div style={{ padding:'18px 18px', background:'rgba(239,68,68,0.06)', border:'1px solid rgba(239,68,68,0.2)', marginBottom:20 }}>
          <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'#ef4444', letterSpacing:'0.08em', marginBottom:10 }}>
            EXIT FEE — DECAYS LINEARLY OVER 52 WEEKS
          </div>
          <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.7, marginBottom:16 }}>
            The fee <strong style={{ color:'var(--ink)' }}>starts at 25%</strong> and decays in a straight line to <strong style={{ color:'var(--ink)' }}>2.5%</strong> over 52 weeks. <strong style={{ color:'#ffd47c' }}>Your rate is locked in at deposit</strong> — it will not change if governance updates the global fee.
          </div>

          {/* Chart */}
          <div style={{ paddingLeft:34, paddingBottom:4 }}>
            <ExitFeeChart accent="#ffd47c" currentWeek={0} />
          </div>

          {/* Fee milestones — in $ cost on a $1,000 position */}
          <div style={{ display:'flex', gap:6, marginTop:14 }}>
            {[
              { label:'TODAY',   fee:'25.0%', usd:'$250', color:'#ef4444' },
              { label:'WEEK 13', fee:'19.4%', usd:'$194', color:'#f97316' },
              { label:'WEEK 26', fee:'13.8%', usd:'$138', color:'#ffd47c' },
              { label:'WEEK 52', fee:'2.50%', usd:'$25',  color:'#4ade80' },
            ].map(m => (
              <div key={m.label} style={{
                flex:1, padding:'8px 6px', background:'rgba(232,230,225,0.03)',
                border:`1px solid ${m.color}33`, textAlign:'center',
              }}>
                <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.1em', marginBottom:4 }}>{m.label}</div>
                <div style={{ fontFamily:'var(--font-d)', fontSize:18, color:m.color }}>{m.fee}</div>
                <div style={{ fontFamily:'var(--font-m)', fontSize:9.5, color:'var(--ink-dim)', marginTop:3 }}>{m.usd}</div>
              </div>
            ))}
          </div>
          <div style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', marginTop:10, lineHeight:1.6 }}>
            Dollar figures shown on a $1,000 position. Exiting today costs <span style={{ color:'#ef4444' }}>$250</span>; in 30 days it costs <span style={{ color:'#ffd47c' }}>$235</span>.
          </div>
        </div>

        {/* Additional info */}
        <div style={{ marginBottom:20 }}>
          {[
            '⚡ Boost multiplier applies to all reward epochs during your stake',
            '🔒 The exit fee is redistributed to remaining stakers',
            '⏱ Fee countdown begins from the moment you stake',
          ].map((txt, i) => (
            <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:10, marginBottom:8 }}>
              <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.6 }}>{txt}</div>
            </div>
          ))}
        </div>

        {/* Agreement checkbox */}
        <label style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer', marginBottom:20, padding:'12px 14px', border:'1px solid rgba(232,230,225,0.1)' }}>
          <div onClick={() => setAgreed(!agreed)} style={{
            width:16, height:16, border:`2px solid ${agreed ? '#ffd47c' : 'rgba(232,230,225,0.3)'}`,
            background: agreed ? '#ffd47c22' : 'transparent', flexShrink:0, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            {agreed && <span style={{ fontSize:10, color:'#ffd47c' }}>✓</span>}
          </div>
          <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.5, letterSpacing:'0.04em' }}>
            I understand the exit fee structure and accept the terms of boosted staking
          </span>
        </label>

        {/* Buttons */}
        <div style={{ display:'flex', gap:10 }}>
          <button onClick={onClose} style={{
            flex:1, padding:'12px', background:'none', border:'1px solid rgba(232,230,225,0.18)',
            cursor:'pointer', fontFamily:'var(--font-d)', fontSize:14, letterSpacing:'0.08em',
            color:'var(--ink-dim)', transition:'all 0.15s',
          }}>CANCEL</button>
          <button onClick={() => agreed && onConfirm()} style={{
            flex:2, padding:'12px',
            background: agreed ? '#ffd47c' : 'rgba(255,212,124,0.1)',
            border:`1px solid ${agreed ? '#ffd47c' : 'rgba(255,212,124,0.2)'}`,
            cursor: agreed ? 'pointer' : 'not-allowed',
            fontFamily:'var(--font-d)', fontSize:14, letterSpacing:'0.08em',
            color: agreed ? '#000' : 'rgba(255,212,124,0.3)',
            boxShadow: agreed ? '0 0 20px rgba(255,212,124,0.35)' : 'none',
            transition:'all 0.2s', display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          }}>
            <span>⚡</span> CONFIRM BOOSTED STAKE <span>→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── TX MODAL ────────────────────────────────────────────────────────── */
const TX_STATES = {
  sending: {
    icon: null, spinning: true,
    title: 'BROADCASTING', sub: 'Sending transaction to chain...',
    color: '#627EEA',
  },
  pending: {
    icon: null, spinning: false, pulsing: true,
    title: 'PENDING CONFIRMATION', sub: 'Awaiting block confirmation...',
    color: '#ffd47c',
  },
  confirmed: {
    icon: '✓', spinning: false,
    title: 'CONFIRMED', sub: 'Transaction successfully included.',
    color: '#4ade80',
  },
  failed: {
    icon: '✗', spinning: false,
    title: 'FAILED', sub: 'Transaction did not go through.',
    color: '#ef4444',
  },
};

function TxModal({ state, accent, onClose, onRetry, txType, hash, error, stage, explorerUrl }) {
  const cfg = { ...TX_STATES[state] };
  if (state === 'sending' && stage === 'approve') cfg.sub = 'Approve the token spend in your wallet...';
  else if (state === 'sending') cfg.sub = 'Confirm in your wallet...';
  if (state === 'failed' && error) cfg.sub = error;
  const [copied, setCopied] = useState(false);
  const shortHash = hash ? `${hash.slice(0, 10)}…${hash.slice(-8)}` : '';
  function copyHash() {
    navigator.clipboard?.writeText(hash).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }

  const typeLabel = {
    swap: 'SWAP', stake: 'STAKE', deposit: 'DEPOSIT',
    boost: 'BOOSTED STAKE', unstake: 'UNSTAKE', split: 'SPLIT', merge: 'MERGE',
    reset: 'RESET VOTES', withdraw: 'WITHDRAW', transfer: 'TRANSFER',
    'claim-emissions': 'CLAIM LP EMISSIONS', 'claim-bribes': 'CLAIM BRIBES', 'claim-lpfees': 'CLAIM LP FEES',
    approve: 'APPROVE', setApprovalForAll: 'APPROVE ALL', depositNFT: 'DEPOSIT TO CUSTODY',
    delegateNFTs: 'DELEGATE', selfVote: 'SELF-VOTE', registerForBenefit: 'REGISTER FEE TIER',
    resetVotes: 'RESET VOTES', withdrawNFTs: 'WITHDRAW', scheduleWithdrawal: 'SCHEDULE WITHDRAWAL',
    startUnlock: 'START UNLOCK', forceUnlock: 'FORCE UNLOCK', settleEpoch: 'SETTLE EPOCH',
    claimRewardAsMember: 'CLAIM EPOCH', claimRewardsForEpochs: 'CLAIM EPOCHS',
    registerDelegator: 'REGISTER DELEGATOR', delegatorVote: 'GROUP VOTE',
    reactivateDelegator: 'REACTIVATE', stopDelegator: 'STOP DELEGATOR',
    unregisterDelegator: 'UNREGISTER', deactivateGroup: 'DEACTIVATE GROUP',
    claimGroupRewards: 'COLLECT GROUP FEE', matchPosition: 'MATCH POSITION',
    notifyRewardAmount: 'FUND BRIBE', notifyRewardsMultiEpoch: 'FUND BRIBE · MULTI-EPOCH',
    vote: 'VOTE', 'boosted-stake': 'BOOSTED STAKE', claimGroupLPEmissions: 'CLAIM GROUP LP EMISSIONS',
  }[txType] || 'TRANSACTION';

  return (
    <div style={{
      position:'fixed', inset:0, zIndex:500,
      display:'flex', alignItems:'center', justifyContent:'center',
      background:'rgba(5,5,5,0.9)', backdropFilter:'blur(8px)',
    }} onClick={state === 'confirmed' || state === 'failed' ? onClose : undefined}>
      <div onClick={e => e.stopPropagation()} style={{
        position:'relative', width:400,
        background:'rgba(8,6,5,0.97)', border:`1px solid ${cfg.color}44`,
        padding:'36px 30px 28px',
      }}>
        {/* 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 ${cfg.color}`,
            [`border${h.charAt(0).toUpperCase()+h.slice(1)}`]: `2px solid ${cfg.color}`,
          }} />
        ))}

        {/* Type badge */}
        <div style={{ marginBottom:20, display:'flex', justifyContent:'center' }}>
          <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:cfg.color, letterSpacing:'0.2em', background:`${cfg.color}14`, border:`1px solid ${cfg.color}44`, padding:'4px 12px' }}>
            {typeLabel}
          </span>
        </div>

        {/* Icon / spinner */}
        <div style={{ display:'flex', justifyContent:'center', marginBottom:20 }}>
          {cfg.spinning ? (
            <div style={{
              width:60, height:60, borderRadius:'50%',
              border:`3px solid ${cfg.color}22`,
              borderTop:`3px solid ${cfg.color}`,
              animation:'txSpin 0.9s linear infinite',
            }} />
          ) : cfg.pulsing ? (
            <div style={{
              width:60, height:60, borderRadius:'50%',
              background:`${cfg.color}18`, border:`2px solid ${cfg.color}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              animation:'txPulse 1.4s ease-in-out infinite',
            }}>
              <div style={{ width:16, height:16, borderRadius:'50%', background:cfg.color }} />
            </div>
          ) : (
            <div style={{
              width:60, height:60, borderRadius:'50%',
              background:`${cfg.color}18`, border:`2px solid ${cfg.color}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:26, color:cfg.color, fontFamily:'var(--font-m)',
              animation: state === 'confirmed' ? 'txPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards' : 'none',
            }}>{cfg.icon}</div>
          )}
        </div>

        {/* Title */}
        <div style={{ textAlign:'center', marginBottom:8 }}>
          <div style={{ fontFamily:'var(--font-d)', fontSize:22, color:cfg.color, letterSpacing:'0.06em', marginBottom:6 }}>{cfg.title}</div>
          <div style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.6 }}>{cfg.sub}</div>
        </div>

        {/* TX Hash */}
        {hash && (
          <div style={{ margin:'18px 0', padding:'10px 14px', background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)' }}>
            <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.18em', marginBottom:5 }}>TX HASH</div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontFamily:'var(--font-m)', fontSize:12, color:'var(--ink)' }} title={hash}>{shortHash}</span>
              <button onClick={copyHash} style={{ background:'none', border:'none', cursor:'pointer', color: copied ? '#4ade80' : 'var(--ink-dim)', fontFamily:'var(--font-m)', fontSize:10, letterSpacing:'0.1em' }}>{copied ? '✓ COPIED' : 'COPY'}</button>
            </div>
          </div>
        )}

        {/* Progress dots for pending */}
        {state === 'sending' && (
          <div style={{ display:'flex', justifyContent:'center', gap:8, margin:'16px 0' }}>
            {[0,1,2].map(i => (
              <div key={i} style={{
                width:6, height:6, borderRadius:'50%', background:cfg.color,
                animation:`txDot 1.2s ease-in-out ${i*0.2}s infinite`,
              }} />
            ))}
          </div>
        )}

        {state === 'pending' && (
          <div style={{ textAlign:'center', marginTop:10 }}>
            <span style={{ fontFamily:'var(--font-c)', fontSize:15, color:'var(--ink-dim)', letterSpacing:'0.1em', animation:'txFade 2s ease-in-out infinite' }}>
              WAITING FOR THE NEXT BLOCK
            </span>
          </div>
        )}

        {/* Actions */}
        {(state === 'confirmed' || state === 'failed') && (
          <div style={{ display:'flex', gap:8, marginTop:20 }}>
            {state === 'confirmed' && explorerUrl && (
              <a href={explorerUrl} target="_blank" rel="noreferrer" style={{
                flex:1, padding:'10px', background:`${cfg.color}18`, border:`1px solid ${cfg.color}44`,
                textDecoration:'none', textAlign:'center',
                fontFamily:'var(--font-m)', fontSize:10, color:cfg.color, letterSpacing:'0.1em',
              }}>VIEW ON EXPLORER →</a>
            )}
            {state === 'failed' && (
              <button onClick={onRetry} style={{
                flex:1, padding:'10px', background:'rgba(239,68,68,0.12)', border:'1px solid rgba(239,68,68,0.3)',
                cursor:'pointer', fontFamily:'var(--font-m)', fontSize:10, color:'#ef4444', letterSpacing:'0.1em',
              }}>RETRY</button>
            )}
            <button onClick={onClose} style={{
              flex:1, padding:'10px', background:cfg.color, border:`1px solid ${cfg.color}`,
              cursor:'pointer', fontFamily:'var(--font-d)', fontSize:14, letterSpacing:'0.06em', color:state==='confirmed'?'#000':'#fff',
            }}>CLOSE</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BoostedWarningModal, TxModal, ExitFeeChart });

/* ── WALLET CONNECT MODAL ────────────────────────────────────────────── */
const KNOWN_WALLETS = {
  'io.metamask':        { bg:'#F6851B', label:'M' },
  'com.coinbase.wallet':{ bg:'#0052FF', label:'⬤' },
  'com.brave.wallet':   { bg:'#FF5000', label:'🦁' },
  'io.safepal':         { bg:'#6B4EFF', label:'S' },
  'com.crypto.wallet':  { bg:'#1199FA', label:'C' },
  'pro.tokenpocket':    { bg:'#2980FE', label:'TP' },
  'io.rabby':           { bg:'#7084FF', label:'R' },
  'com.trustwallet.app':{ bg:'#0500FF', label:'T' },
  'com.okex.wallet':    { bg:'#000000', label:'OK' },
  'com.binance.wallet': { bg:'#F0B90B', label:'B' },
  'injected':           { bg:'#4a4640', label:'W' },
};
function walletStyle(w) {
  return { id: w.info.rdns, name: w.info.name, icon: w.info.icon, ...(KNOWN_WALLETS[w.info.rdns] || { bg:'#4a4640', label: w.info.name.slice(0,1).toUpperCase() }) };
}

function WalletIcon({ wallet, size = 40 }) {
  if (wallet.icon) {
    return <img src={wallet.icon} alt="" width={size} height={size} style={{ borderRadius:'50%', border:'2px solid rgba(255,255,255,0.12)', flexShrink:0, background:'#111' }} />;
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: wallet.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.38, color: '#fff', fontWeight: 700,
      fontFamily: 'var(--font-m)', flexShrink: 0,
      border: '2px solid rgba(255,255,255,0.12)',
    }}>
      {wallet.label}
    </div>
  );
}

function WalletConnectModal({ onClose, onConnect, accent }) {
  const [connecting, setConnecting] = useState(null);
  const [error, setError] = useState(null);
  const [found, setFound] = useState(() => window.Chain.providers());

  useEffect(() => {
    const refresh = () => setFound(window.Chain.providers());
    window.addEventListener('eip6963:announceProvider', refresh);
    window.dispatchEvent(new Event('eip6963:requestProvider'));
    const t = setTimeout(refresh, 400);
    return () => { window.removeEventListener('eip6963:announceProvider', refresh); clearTimeout(t); };
  }, []);

  async function handleSelect(w) {
    if (connecting) return;
    setConnecting(w.info.rdns);
    setError(null);
    try {
      await onConnect(w);
      onClose();
    } catch (e) {
      setError(window.Chain.decodeError(e).message);
      setConnecting(null);
    }
  }

  const wallets = found.map(w => ({ w, style: walletStyle(w) }));
  const pairs = [];
  for (let i = 0; i < wallets.length; i += 2) pairs.push([wallets[i], wallets[i+1]]);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 400,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(5,5,5,0.88)', backdropFilter: 'blur(8px)',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        position: 'relative', width: 560, maxWidth:'94vw',
        background: 'rgba(8,6,5,0.98)', border: `1px solid rgba(232,230,225,0.12)`,
        padding: '32px 30px 24px',
      }}>
        {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
          <div key={v+h} style={{
            position:'absolute', [v]:-1, [h]:-1, width:18, height:18,
            [`border${v.charAt(0).toUpperCase()+v.slice(1)}`]: `2px solid ${accent}`,
            [`border${h.charAt(0).toUpperCase()+h.slice(1)}`]: `2px solid ${accent}`,
          }} />
        ))}

        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6 }}>
          <span style={{ fontFamily:'var(--font-d)', fontSize:22, color:'var(--ink)', letterSpacing:'0.06em' }}>
            CONNECT TO A WALLET
          </span>
          <button onClick={onClose} style={{
            background:'none', border:'1px solid rgba(232,230,225,0.14)', width:28, height:28,
            cursor:'pointer', color:'var(--ink-dim)', fontSize:14, display:'flex', alignItems:'center', justifyContent:'center',
          }}>✕</button>
        </div>

        <div style={{ marginBottom:22, padding:'10px 0', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
          <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', lineHeight:1.6, letterSpacing:'0.04em' }}>
            Wallets installed in this browser are listed below. Connecting only shares your address; every transaction is confirmed in the wallet.
          </span>
        </div>

        {wallets.length === 0 && (
          <div style={{ padding:'28px 0', textAlign:'center', fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink-dim)', lineHeight:1.8 }}>
            NO WALLET DETECTED<br/>
            <span style={{ color:'var(--ink-mute)' }}>Install MetaMask, Rabby, Coinbase Wallet or another browser wallet, then reload.</span>
          </div>
        )}

        <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
          {pairs.map(([a, b], ri) => (
            <div key={ri} style={{ display:'grid', gridTemplateColumns:'1fr 1fr', borderBottom:'1px solid rgba(232,230,225,0.06)' }}>
              {[a, b].map((entry, wi) => {
                if (!entry) return <div key={wi} />;
                const { w, style } = entry;
                const isConnecting = connecting === style.id;
                return (
                  <button key={style.id} onClick={() => handleSelect(w)} style={{
                    display:'flex', alignItems:'center', justifyContent:'space-between',
                    padding:'14px 16px', border:'none',
                    borderRight: wi === 0 ? '1px solid rgba(232,230,225,0.06)' : 'none',
                    cursor: connecting ? 'not-allowed' : 'pointer',
                    transition:'background 0.15s', gap:10,
                    background: isConnecting ? `${accent}10` : 'transparent',
                  }}>
                    <span style={{
                      fontFamily:'var(--font-m)', fontSize:12, color: isConnecting ? accent : 'var(--ink)',
                      letterSpacing:'0.04em', textAlign:'left', flex:1,
                    }}>
                      {isConnecting ? 'CONNECTING...' : style.name}
                    </span>
                    <div style={{ position:'relative', flexShrink:0 }}>
                      <WalletIcon wallet={style} size={36} />
                      {isConnecting && (
                        <div style={{
                          position:'absolute', inset:-3, borderRadius:'50%',
                          border:`2px solid ${accent}`, borderTopColor:'transparent',
                          animation:'txSpin 0.8s linear infinite',
                        }} />
                      )}
                    </div>
                  </button>
                );
              })}
            </div>
          ))}
        </div>

        {error && (
          <div style={{ marginTop:14, fontFamily:'var(--font-m)', fontSize:10, color:'#ef4444', letterSpacing:'0.04em' }}>{error}</div>
        )}

        <div style={{ marginTop:16, display:'flex', alignItems:'center', gap:6 }}>
          <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink-mute)', letterSpacing:'0.06em' }}>
            WalletConnect (mobile wallets) is not enabled on this deployment yet.
          </span>
        </div>
      </div>
    </div>
  );
}

/* ── ACCOUNT MODAL ───────────────────────────────────────────────────── */
function AccountModal({ onClose, onDisconnect, accent, connectedWallet, recentTxs }) {
  const [copied, setCopied] = useState(false);
  const chain = useChain();
  const ADDR = chain.account || '';
  const SHORT = ADDR ? ADDR.slice(0, 6) + '...' + ADDR.slice(-4) : '—';
  const wallet = connectedWallet ? walletStyle(connectedWallet) : null;
  const { data: native } = useLoad(async (c) => c.router.runner.provider.getBalance(chain.account), [chain.blockNumber]);
  const explorer = chain.explorerAddr(ADDR);

  function copy() {
    navigator.clipboard?.writeText(ADDR).catch(()=>{});
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  }

  return (
    <div style={{
      position:'fixed', inset:0, zIndex:400,
      display:'flex', alignItems:'flex-start', justifyContent:'flex-end',
      paddingTop:66, paddingRight:30,
    }} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{
        position:'relative', width:320,
        background:'rgba(8,6,5,0.98)', border:'1px solid rgba(232,230,225,0.12)',
        animation:'fadeUp 0.18s forwards',
      }}>
        {/* 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:14, height:14,
            [`border${v.charAt(0).toUpperCase()+v.slice(1)}`]: `2px solid ${accent}`,
            [`border${h.charAt(0).toUpperCase()+h.slice(1)}`]: `2px solid ${accent}`,
          }} />
        ))}

        {/* Wallet type + address */}
        <div style={{ padding:'20px 20px 14px', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
            {wallet && <WalletIcon wallet={wallet} size={32} />}
            <div>
              <div style={{ fontFamily:'var(--font-d)', fontSize:14, color:'var(--ink)', letterSpacing:'0.06em' }}>
                {wallet?.name || 'WALLET'}
              </div>
              <div style={{ fontFamily:'var(--font-c)', fontSize:13, color:accent, letterSpacing:'0.04em' }}>
                ● CONNECTED
              </div>
            </div>
          </div>

          {/* Address */}
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            background:'rgba(232,230,225,0.04)', border:'1px solid rgba(232,230,225,0.08)',
            padding:'8px 12px',
          }}>
            <span style={{ fontFamily:'var(--font-m)', fontSize:11, color:'var(--ink)', letterSpacing:'0.06em' }}>{SHORT}</span>
            <div style={{ display:'flex', gap:6 }}>
              <button onClick={copy} style={{
                background:'none', border:'none', cursor:'pointer',
                fontFamily:'var(--font-m)', fontSize:9, color: copied ? '#4ade80' : 'var(--ink-dim)',
                letterSpacing:'0.1em',
              }}>{copied ? '✓ COPIED' : 'COPY'}</button>
              <span style={{ color:'var(--ink-mute)' }}>|</span>
              {explorer ? (
                <a href={explorer} target="_blank" rel="noreferrer" style={{
                  textDecoration:'none', fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-dim)', letterSpacing:'0.1em',
                }}>EXPLORER →</a>
              ) : (
                <span style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.1em' }}>NO EXPLORER</span>
              )}
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{ padding:'14px 20px', borderBottom:'1px solid rgba(232,230,225,0.07)', display:'flex', gap:0 }}>
          {[
            { label:'NETWORK', value: chain.chain.name },
            { label:'BALANCE', value: `${window.Chain.fmt.units(native, 18, 4)} ${chain.chain.native}` },
          ].map((s,i) => (
            <div key={s.label} style={{
              flex:1, paddingLeft: i>0?16:0,
              borderLeft: i>0?'1px solid rgba(232,230,225,0.07)':'none',
              marginLeft: i>0?16:0,
            }}>
              <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-m)', fontSize:12, color:'var(--ink)', letterSpacing:'0.04em' }}>{s.value}</div>
            </div>
          ))}
        </div>

        {/* Recent txs */}
        {recentTxs && recentTxs.length > 0 && (
          <div style={{ padding:'12px 20px', borderBottom:'1px solid rgba(232,230,225,0.07)' }}>
            <div style={{ fontFamily:'var(--font-m)', fontSize:9, color:'var(--ink-mute)', letterSpacing:'0.18em', marginBottom:10 }}>RECENT</div>
            {recentTxs.slice(-3).reverse().map((tx,i) => (
              <div key={i} style={{
                display:'flex', justifyContent:'space-between', alignItems:'center',
                padding:'6px 0', borderBottom: i<Math.min(recentTxs.length,3)-1?'1px solid rgba(232,230,225,0.05)':'none',
              }}>
                <span style={{ fontFamily:'var(--font-m)', fontSize:10, color:'var(--ink)', letterSpacing:'0.06em', textTransform:'uppercase' }}>{tx.type}</span>
                {tx.hash && chain.explorerTx(tx.hash) ? (
                  <a href={chain.explorerTx(tx.hash)} target="_blank" rel="noreferrer" style={{ textDecoration:'none', fontFamily:'var(--font-c)', fontSize:12, color: tx.state === 'failed' ? '#ef4444' : '#4ade80', letterSpacing:'0.04em' }}>{tx.state === 'failed' ? '✗ FAILED' : '✓ CONFIRMED'} →</a>
                ) : (
                  <span style={{ fontFamily:'var(--font-c)', fontSize:12, color: tx.state === 'failed' ? '#ef4444' : '#4ade80', letterSpacing:'0.04em' }}>{tx.state === 'failed' ? '✗ FAILED' : '✓ CONFIRMED'}</span>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Disconnect */}
        <div style={{ padding:'14px 20px' }}>
          <button onClick={() => { onDisconnect(); onClose(); }} style={{
            width:'100%', padding:'11px',
            background:'rgba(214,37,52,0.08)', border:'1px solid rgba(214,37,52,0.3)',
            cursor:'pointer', fontFamily:'var(--font-d)', fontSize:14,
            letterSpacing:'0.1em', color:'#d62534',
            display:'flex', alignItems:'center', justifyContent:'center', gap:8,
            transition:'all 0.15s',
          }}>
            ← DISCONNECT
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BoostedWarningModal, TxModal, ExitFeeChart, WalletConnectModal, AccountModal });