// Sidebar (icon rail) + topbar (breadcrumbs + status)

const Sidebar = ({ view, setView, live, onLogout, onSettings }) => {
  const auth = useAuth();
  const items = [
    { id: "dash", icon: "grid", label: "Servers" },
    { id: "audit", icon: "log", label: "Audit Log" },
    { id: "feed", icon: "chat", label: "Live Chat" },
    { id: "bans", icon: "ban", label: "Bans" },
  ];
  return (
    <div className="sidebar">
      <div className="sb-logo" title="OGR"><img src="ogr-logo.png" alt="OGR" /></div>
      {items.map(it => (
        <button key={it.id}
          className={"sb-btn " + (view === it.id ? "active" : "")}
          title={it.label}
          onClick={() => setView(it.id)}>
          <Icon name={it.icon} size={16} />
        </button>
      ))}
      <div className="sb-spacer" />
      {live && (
        <button className="sb-btn" title="Log out" onClick={onLogout}>
          <Icon name="power" size={16} />
        </button>
      )}
      <button className={"sb-btn " + (view === "settings" ? "active" : "")} title="Settings" onClick={onSettings}>
        <Icon name="settings" size={16} />
      </button>
      <div className="sb-avatar" title={`${auth.user.display_name || auth.user.handle} · ${auth.roleMeta.label}`}>
        {auth.user.initials || auth.user.handle.slice(0,2).toUpperCase()}
      </div>
    </div>
  );
};

const TopBar = ({ crumbs, onCrumb, search, setSearch, totals }) => {
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {i < crumbs.length - 1
              ? <button onClick={() => onCrumb(i)}>{c}</button>
              : <span className="current">{c}</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="tb-spacer" />
      <input className="tb-search"
        placeholder="Search players, GUIDs, IPs…"
        value={search}
        onChange={e => setSearch(e.target.value)} />
      <div className="tb-status">
        <span><span className="dot" /> {totals.online}/{totals.cap} online</span>
        <span className="muted">{totals.servers} servers</span>
      </div>
    </div>
  );
};

Object.assign(window, { Sidebar, TopBar });