// App shell: real auth from /api/me, sidebar, topbar, router, tweaks (accent only).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  gold:    { main: "#FFB800", second: "#FF8A00", dim: "#b88500", glow: "rgba(255,184,0,0.35)", soft: "rgba(255,184,0,0.10)" },
  cyan:    { main: "#22D3EE", second: "#0EA5E9", dim: "#0891b2", glow: "rgba(34,211,238,0.35)", soft: "rgba(34,211,238,0.10)" },
  magenta: { main: "#FF2E97", second: "#D946EF", dim: "#a21caf", glow: "rgba(255,46,151,0.35)", soft: "rgba(255,46,151,0.10)" },
  lime:    { main: "#B6FF00", second: "#84CC16", dim: "#65a30d", glow: "rgba(182,255,0,0.35)", soft: "rgba(182,255,0,0.10)" },
};

const NAV_RESELLER = [
  { id: "dashboard", label: "Dashboard", icon: <Ico.Dash/> },
  { id: "products",  label: "Products",  icon: <Ico.Box/> },
  { id: "licenses",  label: "My keys",   icon: <Ico.Shield/> },
  { id: "loader",    label: "Loader",    icon: <Ico.Down/> },
  { id: "balance",   label: "Wallet",    icon: <Ico.Money/> },
  { sec: "Account" },
  { id: "api",       label: "API",       icon: <Ico.Code/> },
  { id: "ranks",     label: "Ranks",     icon: <Ico.Trophy/> },
  { id: "guides",    label: "Guides",    icon: <Ico.Book/> },
  { id: "tickets",   label: "Support",   icon: <Ico.Chat/> },
];

const NAV_ADMIN = [
  { id: "dashboard", label: "Dashboard", icon: <Ico.Dash/> },
  { id: "products",  label: "Products",  icon: <Ico.Box/> },
  { id: "users",     label: "Users",     icon: <Ico.Users/> },
  { id: "licenses",  label: "Licenses",  icon: <Ico.Shield/> },
  { id: "balance",   label: "Top-ups",   icon: <Ico.Money/> },
  { id: "loader",    label: "Loader",    icon: <Ico.Down/> },
  { sec: "Other" },
  { id: "tickets",   label: "Support",   icon: <Ico.Chat/> },
  { id: "guides",    label: "Guides",    icon: <Ico.Book/> },
  { id: "ranks",     label: "Ranks",     icon: <Ico.Trophy/> },
  { id: "logs",      label: "Logs",      icon: <Ico.List/> },
  { id: "api",       label: "API",       icon: <Ico.Code/> },
];

function ChangePasswordModal({ onClose }) {
  const [cur, setCur] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const submit = async () => {
    if (pw.length < 8) return toast('Password must be at least 8 characters','warn');
    if (pw !== pw2) return toast('Passwords do not match','warn');
    setBusy(true);
    try { await api.post('/api/auth/password', { current_password: cur, new_password: pw }); toast('Password updated'); onClose(); }
    catch (e) { toast(e.message,'err'); }
    setBusy(false);
  };
  return (
    <Modal open onClose={onClose} title="Change password">
      <div className="flex-col gap-12">
        <div className="field"><label>Current password</label><input className="input" type="password" value={cur} onChange={e=>setCur(e.target.value)} autoFocus/></div>
        <div className="field"><label>New password (8+ chars)</label><input className="input" type="password" value={pw} onChange={e=>setPw(e.target.value)}/></div>
        <div className="field"><label>Confirm new password</label><input className="input" type="password" value={pw2} onChange={e=>setPw2(e.target.value)}/></div>
        <div className="flex gap-8" style={{ justifyContent: 'flex-end' }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" disabled={busy} onClick={submit}>{busy?'Saving…':'Update password'}</button>
        </div>
      </div>
    </Modal>
  );
}

function Sidebar({ page, goTo, me, onLogout }) {
  const nav = me?.role === 'admin' ? NAV_ADMIN : NAV_RESELLER;
  const [pwOpen, setPwOpen] = React.useState(false);
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <Logo size={28}/>
        <div className="brand-name">Emulated<b>.vip</b></div>
      </div>

      <div style={{ padding: '0 8px', marginBottom: 8 }}>
        <div className="pill" style={{ width: '100%', justifyContent: 'center', padding: '6px 10px', fontSize: 11 }}>
          <span className="dot" style={{ background: me?.role === 'admin' ? '#FF2E97' : 'var(--accent)' }}/>
          {me?.role === 'admin' ? 'Admin' : 'Reseller'}
        </div>
      </div>

      {nav.map((item, i) => item.sec
        ? <div key={i} className="sidebar-section">{item.sec}</div>
        : (
          <div key={item.id} className={`nav-item ${page === item.id ? 'active' : ''}`} onClick={() => goTo(item.id)}>
            <span className="icon">{React.cloneElement(item.icon, { width: 16, height: 16 })}</span>
            <span>{item.label}</span>
          </div>
        )
      )}

      <div className="sidebar-foot">
        <Avatar name={me?.username||'?'} size={28}/>
        <div className="who">
          {me?.username || '—'}
          <small>{me?.role === 'admin' ? 'super-admin' : `${me?.rank||''} · ${fmtMoney(me?.balance||0)}`}</small>
        </div>
        <button className="btn btn-sm btn-ghost" style={{ padding: 6, marginLeft: 'auto' }} title="Change password" onClick={()=>setPwOpen(true)}>
          <Ico.Lock width={14} height={14} className="icon"/>
        </button>
        <button className="btn btn-sm btn-ghost" style={{ padding: 6 }} title="Sign out" onClick={onLogout}>
          <Ico.Out width={14} height={14} className="icon"/>
        </button>
      </div>
      {pwOpen && <ChangePasswordModal onClose={()=>setPwOpen(false)}/>}
    </aside>
  );
}

function Topbar({ me, goTo }) {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);
  const nav = me?.role === 'admin' ? NAV_ADMIN : NAV_RESELLER;
  const matches = q.trim()
    ? nav.filter(n => !n.sec && n.label.toLowerCase().includes(q.toLowerCase()))
    : [];

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey||e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        inputRef.current?.focus(); inputRef.current?.select();
      } else if (e.key === 'Escape' && document.activeElement === inputRef.current) {
        inputRef.current.blur();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const jump = (id) => { goTo(id); setQ(''); inputRef.current?.blur(); };

  return (
    <div className="topbar">
      <div className="search" style={{ position: 'relative' }}>
        <Ico.Search width={14} height={14}/>
        <input
          ref={inputRef}
          value={q}
          onChange={e=>setQ(e.target.value)}
          onKeyDown={e=>{ if (e.key==='Enter' && matches[0]) jump(matches[0].id); }}
          placeholder="Jump to anywhere…"
        />
        <span className="kbd">⌘K</span>
        {matches.length > 0 && (
          <div style={{
            position:'absolute', top: 'calc(100% + 6px)', left: 0, right: 0,
            background: 'var(--bg-card)', border: '1px solid var(--border)',
            borderRadius: 'var(--r-md)', boxShadow: '0 16px 40px -8px rgba(0,0,0,0.5)',
            maxHeight: 280, overflow: 'auto', zIndex: 50,
          }}>
            {matches.slice(0,8).map((m,i) => (
              <div key={m.id} onClick={()=>jump(m.id)} style={{
                display:'flex', alignItems:'center', gap: 10, padding: '10px 14px', cursor:'pointer',
                background: i===0 ? 'var(--accent-soft)' : 'transparent', fontSize: 13,
              }} onMouseEnter={e=>e.currentTarget.style.background='var(--accent-soft)'} onMouseLeave={e=>e.currentTarget.style.background=i===0?'var(--accent-soft)':'transparent'}>
                <span className="icon" style={{ color: 'var(--accent)' }}>{React.cloneElement(m.icon, { width: 14, height: 14 })}</span>
                <span>{m.label}</span>
                {i===0 && <span className="kbd" style={{ marginLeft: 'auto' }}>↵</span>}
              </div>
            ))}
          </div>
        )}
      </div>
      <div style={{ flex: 1 }}/>
      {me?.role === 'reseller' && (
        <div className="balance-pill" onClick={() => goTo('balance')} style={{ cursor: 'pointer' }} title="Top up">
          <Ico.Money width={14} height={14} style={{ color: 'var(--accent)' }}/>
          Balance <span className="amt">{fmtMoney(me?.balance||0)}</span>
        </div>
      )}
      <button className="icon-btn" title="Support" onClick={()=>goTo('tickets')}><Ico.Chat width={16} height={16}/></button>
      <button className="icon-btn" title="Help & guides" onClick={() => goTo('guides')}><Ico.Book width={16} height={16}/></button>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [me, setMe] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [page, setPage] = React.useState("dashboard");

  const refreshMe = React.useCallback(async () => {
    try { const r = await api.get('/api/me'); setMe(r.user); }
    catch { setMe(null); }
    setLoading(false);
  }, []);

  React.useEffect(() => { refreshMe(); }, [refreshMe]);
  React.useEffect(() => { window.goTo = (p) => setPage(p); window.refreshMe = refreshMe; }, [refreshMe]);

  // Apply accent
  React.useEffect(() => {
    const p = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.gold;
    const r = document.documentElement.style;
    r.setProperty('--accent', p.main);
    r.setProperty('--accent-2', p.second);
    r.setProperty('--accent-dim', p.dim);
    r.setProperty('--accent-glow', p.glow);
    r.setProperty('--accent-soft', p.soft);
  }, [tweaks.accent]);

  const isAdmin = me?.role === 'admin';
  React.useEffect(() => { setPage('dashboard'); }, [isAdmin]);

  const goTo = (p) => setPage(p);
  const logout = async () => { try { await api.post('/api/auth/logout'); } catch{} setMe(null); };

  const renderPage = () => {
    const props = { isAdmin, me, onChange: refreshMe };
    switch (page) {
      case "dashboard": return isAdmin ? <AdminDashboard/> : <ResellerDashboard {...props}/>;
      case "products":  return <ProductsPage {...props}/>;
      case "balance":   return <BalancePage {...props}/>;
      case "loader":    return <LoaderPage {...props}/>;
      case "api":       return <ApiPage {...props}/>;
      case "licenses":  return <LicensesPage {...props}/>;
      case "users":     return <UsersPage {...props}/>;
      case "ranks":     return <RanksPage {...props}/>;
      case "logs":      return <LogsPage {...props}/>;
      case "guides":    return <GuidesPage {...props}/>;
      case "tickets":   return <TicketsPage {...props}/>;
      default:          return isAdmin ? <AdminDashboard/> : <ResellerDashboard {...props}/>;
    }
  };

  if (loading) {
    return <div style={{ height: '100vh', display: 'grid', placeItems: 'center', color: 'var(--text-dim)' }}>Loading…</div>;
  }

  if (!me) {
    return (
      <>
        <LoginPage onLogin={refreshMe}/>
        <ToastHost/>
        <TweakControls tweaks={tweaks} setTweak={setTweak}/>
      </>
    );
  }

  return (
    <div className="app" data-screen-label={`${isAdmin ? 'Admin' : 'Reseller'} · ${page}`}>
      <Sidebar page={page} goTo={goTo} me={me} onLogout={logout}/>
      <div className="main">
        <Topbar me={me} goTo={goTo}/>
        {renderPage()}
      </div>
      <ToastHost/>
      <TweakControls tweaks={tweaks} setTweak={setTweak}/>
    </div>
  );
}

function TweakControls({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Theme">
      <TweakSection label="Accent">
        <TweakColor
          label="Color"
          value={tweaks.accent}
          options={['gold', 'cyan', 'magenta', 'lime'].map(k => ACCENT_PALETTES[k].main)}
          onChange={(v) => {
            const key = Object.keys(ACCENT_PALETTES).find(k => ACCENT_PALETTES[k].main === v) || 'gold';
            setTweak('accent', key);
          }}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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