/* hPanel left sidebar — grouped navigation, with a collapsed icon-rail mode. */
const { SidebarItem, SidebarGroupLabel, Icon: SbIcon } = window.HostingerHPanelDesignSystem_3ef285;

const NAV = [
  { group: null, items: [
    { id: "home", icon: "home", label: "Home" },
    { id: "build", icon: "sparkles", label: "Build a site" },
    { id: "websites", icon: "window", label: "Websites", hasChildren: true },
    { id: "domains", icon: "globe", label: "Domains", hasChildren: true },
    { id: "emails", icon: "mail", label: "Emails" },
    { id: "services", icon: "store", label: "More services", hasChildren: true },
  ]},
  { group: "Hostinger apps", items: [
    { id: "horizons", icon: "layers", label: "Horizons" },
    { id: "email-mkt", icon: "sparkles", label: "Email marketing" },
    { id: "ecommerce", icon: "share", label: "Ecommerce" },
  ]},
  { group: "AI agents", items: [
    { id: "agents", icon: "bot", label: "Agents" },
    { id: "openclaw", icon: "circle-help", label: "OpenClaw" },
    { id: "hermes", icon: "rocket", label: "Hermes Agent" },
  ]},
  { group: "Dev tools", items: [
    { id: "vps", icon: "server", label: "VPS" },
    { id: "gpu", icon: "cpu", label: "GPU" },
    { id: "api", icon: "code", label: "API" },
  ]},
];

function ToggleBtn({ collapsed, onToggle }) {
  return (
    <button onClick={onToggle} aria-label={collapsed ? "Expand menu" : "Collapse menu"} title={collapsed ? "Expand menu" : "Collapse menu"}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 36, height: 36, borderRadius: "var(--radius-md)", flex: "none",
        background: "transparent", border: "1px solid var(--border-hairline)",
        color: "var(--text-muted)", cursor: "pointer", transition: "background var(--dur-fast)",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--neutral-100)")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
    >
      <SbIcon name={collapsed ? "chevron-right" : "chevron-left"} size={18} />
    </button>
  );
}

function Sidebar({ active, onNavigate, collapsed, onToggle }) {
  if (collapsed) {
    const flat = NAV.flatMap((s) => s.items);
    return (
      <nav style={{ width: 68, flex: "none", height: "100%", background: "var(--surface-muted)", padding: "12px 0", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, overflowY: "auto" }}>
        <ToggleBtn collapsed onToggle={onToggle} />
        <div style={{ width: 28, height: 1, background: "var(--border-hairline)", margin: "4px 0" }} />
        {flat.map((it) => {
          const on = active === it.id;
          return (
            <button key={it.id} onClick={() => onNavigate && onNavigate(it.id)} title={it.label} aria-label={it.label}
              style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 44, height: 44, borderRadius: "var(--radius-md)", flex: "none",
                background: on ? "var(--neutral-0)" : "transparent",
                boxShadow: on ? "var(--shadow-sm)" : "none",
                color: on ? "var(--text-strong)" : "var(--text-muted)",
                border: "none", cursor: "pointer", transition: "background var(--dur-fast)",
              }}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "var(--neutral-100)"; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "transparent"; }}
            >
              <SbIcon name={it.icon} size={20} />
            </button>
          );
        })}
      </nav>
    );
  }

  return (
    <nav style={{
      width: "var(--sidebar-width)", flex: "none", height: "100%",
      background: "var(--surface-muted)", padding: "12px 14px",
      overflowY: "auto", display: "flex", flexDirection: "column",
    }}>
      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 6 }}>
        <ToggleBtn collapsed={false} onToggle={onToggle} />
      </div>
      {NAV.map((sec, i) => (
        <div key={i}>
          {sec.group && <SidebarGroupLabel>{sec.group}</SidebarGroupLabel>}
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {sec.items.map((it) => (
              <SidebarItem
                key={it.id} icon={it.icon} label={it.label}
                hasChildren={it.hasChildren} active={active === it.id}
                onClick={() => onNavigate && onNavigate(it.id)}
              />
            ))}
          </div>
        </div>
      ))}
    </nav>
  );
}

window.Sidebar = Sidebar;