// app.jsx — shell + router + tweaks panel
const { useState: useS, useEffect: useE, useMemo: useM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00d4ff",
  "font": "sans",
  "density": "regular",
  "lang": "en",
  "device": "desktop",
  "wallet": "connected"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  { name: 'cyan', v: '#00d4ff' },
  { name: 'lime', v: '#a4ff00' },
  { name: 'purple', v: '#a05eff' },
  { name: 'orange', v: '#ff7a1a' },
  { name: 'pink', v: '#ff4d8a' },
];

function useRoute() {
  const [route, setRoute] = useS(() => parseHash());
  useE(() => {
    const h = () => setRoute(parseHash());
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);
  return [route, (r) => { window.location.hash = r; }];
}
function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, '') || '';
  if (!h) return { name: 'lobby' };
  if (h === 'leaderboard') return { name: 'leaderboard' };
  if (h === 'portfolio') return { name: 'portfolio' };
  if (h === 'create') return { name: 'create' };
  if (h.startsWith('token/')) return { name: 'token', id: h.slice(6) };
  return { name: 'lobby' };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang;
  const dict = I18N[lang];

  const [route, navigate] = useRoute();
  const [search, setSearch] = useS('');
  const [walletModal, setWalletModal] = useS(false);
  const [signOpen, setSignOpen] = useS(null);
  const [toast, setToast] = useS('');

  const wallet = useM(() => t.wallet === 'connected'
    ? { connected: true, addr: 'UQBxR9...3a9B', bal: 47.82 }
    : { connected: false, addr: '', bal: 0 }
  , [t.wallet]);

  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 2000); };

  const sign = (after) => {
    setSignOpen(true);
    setTimeout(() => { setSignOpen(false); after && after(); }, 2400);
  };

  const onConnect = () => setWalletModal(true);
  const onWalletPick = (w) => {
    setWalletModal(false);
    sign(() => { setTweak('wallet', 'connected'); showToast(`${w.name} connected ✓`); });
  };
  const onWalletAction = (a) => {
    if (a === 'disconnect') { setTweak('wallet', 'disconnected'); showToast(lang === 'zh' ? '已断开钱包' : 'wallet disconnected'); }
    else if (a === 'profile') navigate('/portfolio');
    else if (a === 'pnl') navigate('/portfolio');
  };

  // apply tweak attributes
  useE(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-2', t.accent + '33');
    document.documentElement.style.setProperty('--accent-glow', `0 0 0 1px ${t.accent}59, 0 0 24px ${t.accent}40`);
    document.documentElement.dataset.font = t.font;
    document.documentElement.dataset.density = t.density;
  }, [t.accent, t.font, t.density]);

  const onOpenToken = (id) => navigate('/token/' + id);
  const isCreate = route.name === 'create';

  const main = (
    <div className="app">
      {/* marquee ribbon */}
      <div className="ribbon">
        <div className="ribbon-track">
          <span>◢ TON-PUMP // FAIR LAUNCH PROTOCOL</span>
          <span>● MAINNET LIVE</span>
          <span>◇ {TOKENS.length} ACTIVE TOKENS</span>
          <span>▲ {TODAYS_KING.sym} +{TODAYS_KING.ch24.toFixed(0)}%</span>
          <span>◢ GRADUATE AT 100K TON</span>
          <span>◇ ZERO TEAM ALLOC</span>
          <span>● {GRADUATED.length} GRADUATED THIS WEEK</span>
        </div>
      </div>
      <nav className="nav" style={{ marginTop: 24 }}>
        <div className="brand" onClick={() => navigate('/')}>
          <div className="brand-mark"><span>T</span></div>
          <div className="brand-name"><b>TON-Pump</b><small>v0.4 · DEVNET</small></div>
        </div>
        <div className="nav-links">
          <div className={'nav-link ' + (route.name === 'lobby' ? 'active' : '')} onClick={() => navigate('/')}>{dict.nav_lobby}</div>
          <div className={'nav-link ' + (route.name === 'leaderboard' ? 'active' : '')} onClick={() => navigate('/leaderboard')}>{dict.nav_leaderboard}</div>
          <div className={'nav-link ' + (route.name === 'portfolio' ? 'active' : '')} onClick={() => navigate('/portfolio')}>{dict.nav_portfolio}</div>
        </div>
        {!isCreate && (
          <div className="search">
            <Icon.search style={{ color: 'var(--text-faint)' }} />
            <input placeholder={dict.search_placeholder} value={search} onChange={(e) => setSearch(e.target.value)} />
            <kbd>⌘ K</kbd>
          </div>
        )}
        {isCreate && <div className="nav-spacer"></div>}
        <button className="btn btn-launch" onClick={() => navigate('/create')}>✦ {dict.nav_create}</button>
        <WalletButton lang={lang} wallet={wallet} onConnect={onConnect} onAction={onWalletAction} />
      </nav>

      {route.name === 'lobby' && <Dashboard lang={lang} search={search} onOpenToken={onOpenToken} />}
      {route.name === 'leaderboard' && <Leaderboard lang={lang} onOpenToken={onOpenToken} />}
      {route.name === 'portfolio' && <Portfolio lang={lang} wallet={wallet} onOpenToken={onOpenToken} />}
      {route.name === 'create' && <CreateToken lang={lang} wallet={wallet} onSign={sign} onToast={showToast} onConnect={onConnect} onNavigate={(p) => navigate('/' + (p === 'lobby' ? '' : p))} />}
      {route.name === 'token' && <TokenDetail id={route.id} lang={lang} wallet={wallet} onBack={() => navigate('/')} onSign={sign} onToast={showToast} />}

      {walletModal && <WalletModal lang={lang} onClose={() => setWalletModal(false)} onSelect={onWalletPick} />}
      {signOpen && <SignModal lang={lang} />}
      <Toast msg={toast} />
    </div>
  );

  return (
    <>
      {t.device === 'mobile' ? (
        <div className="mobile-stage">
          <div style={{ width: 390, height: 800, background: 'var(--bg)', borderRadius: 44, border: '8px solid #18181c', boxShadow: '0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--line-2)', overflow: 'hidden', position: 'relative' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 28, background: '#000', zIndex: 100, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
              <span>9:41</span>
              <span style={{ width: 88, height: 22, background: '#000', borderRadius: 12, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: 4 }}></span>
              <span>📶 5G ●</span>
            </div>
            <div style={{ height: '100%', overflowY: 'auto', paddingTop: 28 }}>
              {main}
            </div>
          </div>
        </div>
      ) : main}

      <TweaksPanel>
        <TweakSection label={lang === 'zh' ? '主题' : 'Theme'} />
        <TweakColor label={lang === 'zh' ? '主色' : 'Accent'} value={t.accent} options={ACCENT_OPTIONS.map((o) => o.v)} onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label={lang === 'zh' ? '字体' : 'Font'} value={t.font} options={['sans', 'mono', 'display']} onChange={(v) => setTweak('font', v)} />
        <TweakRadio label={lang === 'zh' ? '密度' : 'Density'} value={t.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)} />

        <TweakSection label={lang === 'zh' ? '状态' : 'State'} />
        <TweakRadio label={lang === 'zh' ? '语言' : 'Language'} value={t.lang} options={['zh', 'en']} onChange={(v) => setTweak('lang', v)} />
        <TweakRadio label={lang === 'zh' ? '钱包' : 'Wallet'} value={t.wallet} options={['connected', 'disconnected']} onChange={(v) => setTweak('wallet', v)} />
        <TweakRadio label={lang === 'zh' ? '设备' : 'Device'} value={t.device} options={['desktop', 'mobile']} onChange={(v) => setTweak('device', v)} />

        <TweakSection label={lang === 'zh' ? '跳转' : 'Jump to'} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <TweakButton label={dict.nav_lobby} onClick={() => navigate('/')} />
          <TweakButton label={dict.nav_leaderboard} onClick={() => navigate('/leaderboard')} />
          <TweakButton label={dict.nav_portfolio} onClick={() => navigate('/portfolio')} />
          <TweakButton label={dict.nav_create} onClick={() => navigate('/create')} />
          <TweakButton label={lang === 'zh' ? '$PEPETON 详情' : '$PEPETON detail'} onClick={() => navigate('/token/pepeton')} />
          <TweakButton label={lang === 'zh' ? '$CATTON 详情' : '$CATTON detail'} onClick={() => navigate('/token/catton')} />
        </div>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);