// Shell: sidebar + topbar layout

function Sidebar({ route, onNav, counts }) {
  const nav = [
    { key: "dashboard", label: "Dashboard", icon: "dashboard" },
    { key: "instances", label: "Instances", icon: "instance", count: counts.instances },
    { key: "launch", label: "Launch New", icon: "rocket" },
    { key: "keys", label: "API Keys", icon: "key" },
    { key: "metrics", label: "Metrics", icon: "chart" },
    { key: "skills", label: "Skills Library", icon: "skills", count: counts.skills },
    { key: "billing", label: "Billing", icon: "billing" },
  ];
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="brand-mark">O</div>
        <div>
          <div className="brand-name">OPRT.AI</div>
          <div className="brand-sub">launch board</div>
        </div>
      </div>
      <div className="nav-section">
        <div className="nav-label">Workspace</div>
        {nav.slice(0, 3).map((n) => (
          <div
            key={n.key}
            className={"nav-item " + (route === n.key || (n.key === "instances" && route === "instance") ? "active" : "")}
            onClick={() => onNav(n.key)}
          >
            <Icon name={n.icon} size={15} />
            <span>{n.label}</span>
            {n.count != null && <span className="count">{n.count}</span>}
          </div>
        ))}
      </div>
      <div className="nav-section">
        <div className="nav-label">Operations</div>
        {nav.slice(3).map((n) => (
          <div
            key={n.key}
            className={"nav-item " + (route === n.key ? "active" : "")}
            onClick={() => onNav(n.key)}
          >
            <Icon name={n.icon} size={15} />
            <span>{n.label}</span>
            {n.count != null && <span className="count">{n.count}</span>}
          </div>
        ))}
      </div>
      <div className="nav-footer">
        <div className="avatar">KD</div>
        <div className="user-meta grow">
          <div className="name">Kai Dippe</div>
          <div className="email">kai@oprt.ai</div>
        </div>
        <Icon name="settings" size={14} color="var(--text-mute)" />
      </div>
    </aside>
  );
}

function Topbar({ crumbs, onNav, right }) {
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <Icon name="chevron-right" size={12} color="var(--text-mute)" />}
            <span
              className={i === crumbs.length - 1 ? "cur" : ""}
              onClick={() => c.go && onNav(c.go)}
              style={{ cursor: c.go ? "pointer" : "default" }}
            >
              {c.label}
            </span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />
      <div className="search">
        <Icon name="search" size={14} color="var(--text-mute)" />
        <input placeholder="Search instances, skills, customers…" />
        <span className="kbd">⌘K</span>
      </div>
      {right}
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;