// WiseTokens — main app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "palette": "amber",
  "typeface": "geist",
  "density": "default",
  "layout": "sidebar",
  "tone": "technical",
  "filled": "filled"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useState(() => localStorage.getItem('wt:page') || 'dashboard');
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = useState(false);
  const [cmdk, setCmdk] = useState(false);
  const [balance, setBalance] = useState(WT.USER.balance);
  const [toast, setToast] = useState(null);

  useEffect(() => { localStorage.setItem('wt:page', page); }, [page]);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', tweaks.theme);
    root.setAttribute('data-palette', tweaks.palette);
    root.setAttribute('data-typeface', tweaks.typeface);
    root.setAttribute('data-density', tweaks.density);
    root.setAttribute('data-layout', tweaks.layout);
  }, [tweaks]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmdk(true); }
      if (e.key === 'Escape') { setCmdk(false); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const showToast = (m) => {
    setToast(m);
    setTimeout(() => setToast(null), 2000);
  };

  const crumbs = (() => {
    const map = { dashboard: 'Dashboard', models: 'Models', playground: 'Playground', keys: 'API Keys', logs: 'Logs & Usage', routing: 'Routing', billing: 'Billing', broker: 'Broker', whitelabel: 'White Label', settings: 'Settings', docs: 'Docs', webhooks: 'Webhooks', sdks: 'SDKs', reports: 'Reports', team: 'Team & Roles', notifications: 'Notifications', compliance: 'Compliance', changelog: 'Changelog', status: 'Status' };
    return ['WiseTokens', map[page]];
  })();

  const pageEl = (() => {
    switch (page) {
      case 'dashboard': return <Dashboard onNav={setPage} filled={tweaks.filled === 'filled'}/>;
      case 'models': return <Models onNav={setPage}/>;
      case 'playground': return <Playground/>;
      case 'keys': return <Keys onToast={showToast}/>;
      case 'logs': return <Logs/>;
      case 'routing': return <Routing/>;
      case 'billing': return <Billing balance={balance} setBalance={setBalance} onToast={showToast}/>;
      case 'broker': return <Broker/>;
      case 'whitelabel': return <WhiteLabel/>;
      case 'settings': return <Settings/>;
      case 'webhooks': return <Webhooks onToast={showToast}/>;
      case 'sdks': return <SDKs/>;
      case 'reports': return <Reports/>;
      case 'team': return <Team/>;
      case 'notifications': return <Notifications/>;
      case 'compliance': return <Compliance/>;
      case 'changelog': return <Changelog/>;
      case 'status': return <Status/>;
      case 'docs': return (
        <div className="page">
          <div className="page-h"><div><h1>Documentation</h1><div className="sub">OpenAI-compatible API reference, quickstart, and SDKs.</div></div></div>
          <div className="grid grid-3">
            {[
              { t: 'Quickstart', d: 'Make your first request in 60 seconds.', icon: 'bolt' },
              { t: 'Chat completions', d: 'POST /v1/chat/completions', icon: 'code' },
              { t: 'Streaming', d: 'Server-sent events, OpenAI-compatible.', icon: 'send' },
              { t: 'Routing API', d: 'Pin a model or let us pick.', icon: 'route' },
              { t: 'Rate limits', d: 'Per-key limits, burst buckets.', icon: 'shield' },
              { t: 'Error codes', d: '4xx/5xx response semantics.', icon: 'x' },
            ].map(c => (
              <div key={c.t} className="card" style={{ padding: 20, cursor: 'pointer' }}>
                <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--accent-bg)', color: 'var(--accent)', display: 'grid', placeItems: 'center', marginBottom: 12 }}>
                  <Icon name={c.icon} size={16}/>
                </div>
                <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 4 }}>{c.t}</div>
                <div className="dim" style={{ fontSize: 12 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      );
      default: return <Dashboard onNav={setPage}/>;
    }
  })();

  return (
    <div className="app" data-screen-label={`01 ${crumbs[1]}`}>
      {tweaks.layout !== 'topnav' ? (
        <Sidebar active={page} onNav={setPage} balance={balance}/>
      ) : null}
      <main style={{ minWidth: 0 }}>
        {tweaks.layout === 'topnav'
          ? <TopNav active={page} onNav={setPage} theme={tweaks.theme} onTheme={() => setTweaks({...tweaks, theme: tweaks.theme === 'dark' ? 'light' : 'dark'})} balance={balance} user={WT.USER}/>
          : <Topbar crumbs={crumbs} theme={tweaks.theme} onTheme={() => setTweaks({...tweaks, theme: tweaks.theme === 'dark' ? 'light' : 'dark'})} onCmdK={() => setCmdk(true)} user={WT.USER}/>
        }
        {pageEl}
      </main>
      {editMode && <Tweaks state={tweaks} setState={setTweaks}/>}
      <CmdK open={cmdk} onClose={() => setCmdk(false)} onNav={setPage}/>
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

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