/* OrchEcomm dashboard — left navigation sidebar. */
function Sidebar({ active, onNavigate, onLogout }) {
  const I = window.OcIcons;
  const groups = [
    { heading: "Overview", items: [{ id: "overview", label: "Dashboard", icon: "Dashboard" }] },
    { heading: "Manage", items: [
      { id: "modules", label: "Modules", icon: "Puzzle", badge: "4" },
      { id: "payments", label: "Integrations", icon: "Card" },
      { id: "orders", label: "Orders", icon: "Bag", badge: "8" },
      { id: "products", label: "Products", icon: "Package" },
    ] },
    { heading: "Content", items: [
      { id: "visual", label: "Visual Content", icon: "Image" },
      { id: "synclog", label: "Sync Log", icon: "Refresh" },
    ] },
    { heading: "Coming soon", items: [
      { id: "analytics", label: "Analytics", icon: "Chart", soon: true },
      { id: "audience", label: "Audience", icon: "Users", soon: true },
    ] },
  ];

  const NavItem = ({ item }) => {
    const [hover, setHover] = React.useState(false);
    const isActive = active === item.id;
    return (
      <button
        onClick={() => !item.soon && onNavigate(item.id)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          position: "relative", display: "flex", alignItems: "center", gap: 10, width: "100%",
          padding: "8px 10px 8px 12px", border: "none", borderRadius: "var(--radius-sm)",
          background: isActive ? "var(--green-100)" : hover && !item.soon ? "var(--ink-100)" : "transparent",
          color: isActive ? "var(--green-800)" : item.soon ? "var(--text-muted)" : "var(--text-secondary)",
          font: "var(--type-body)", fontWeight: isActive ? "var(--weight-semibold)" : "var(--weight-medium)",
          cursor: item.soon ? "default" : "pointer", textAlign: "left",
          transition: "background var(--transition-fast), color var(--transition-fast)",
        }}
      >
        {isActive ? <span style={{ position: "absolute", left: 0, top: 7, bottom: 7, width: 3, borderRadius: "var(--radius-full)", background: "var(--green-700)" }} /> : null}
        <span style={{ display: "inline-flex", color: isActive ? "var(--green-700)" : "inherit" }}>{React.createElement(I[item.icon], { size: 18 })}</span>
        <span style={{ flex: 1 }}>{item.label}</span>
        {item.badge ? <span style={{ fontSize: 11, fontWeight: 600, color: "var(--green-700)", background: "var(--green-100)", borderRadius: "var(--radius-full)", padding: "1px 7px" }}>{item.badge}</span> : null}
        {item.soon ? <span style={{ fontSize: 10, fontWeight: 600, color: "var(--text-muted)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-full)", padding: "1px 6px" }}>Soon</span> : null}
      </button>
    );
  };

  return (
    <aside style={{ width: "var(--sidebar-width)", flexShrink: 0, height: "100%", background: "var(--surface-card)", borderRight: "1px solid var(--border-default)", display: "flex", flexDirection: "column", padding: "16px 12px" }}>
      <div style={{ display: "flex", alignItems: "center", padding: "4px 8px 16px" }}>
        <img src="../../assets/orchecomm-logo.svg" height="28" alt="OrchEcomm" />
      </div>

      <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
        {groups.map((g) => (
          <div key={g.heading}>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-muted)", padding: "0 10px 6px" }}>{g.heading}</div>
            <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>{g.items.map((it) => <NavItem key={it.id} item={it} />)}</nav>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 2, paddingTop: 8 }}>
        <NavItem item={{ id: "settings", label: "Settings", icon: "Settings" }} />
        <div style={{ height: 1, background: "var(--border-subtle)", margin: "8px 6px" }} />
        <AccountRow onLogout={onLogout} />
      </div>
    </aside>
  );
}

function AccountRow({ onLogout }) {
  const I = window.OcIcons;
  const { Avatar } = window.OrchEcommDesignSystem_091be6;
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px", borderRadius: "var(--radius-md)" }}>
      <Avatar name="Cristian Babalau" size={32} />
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: "block", font: "var(--type-card-title)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>Cristian B.</span>
        <span style={{ display: "block", fontSize: 11, color: "var(--text-secondary)" }}>Evergreen Goods</span>
      </span>
      <button onClick={onLogout} title="Sign out" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ width: 30, height: 30, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", borderRadius: "var(--radius-sm)", background: hover ? "var(--ink-100)" : "transparent", color: "var(--text-secondary)", cursor: "pointer", transition: "background var(--transition-fast)" }}>
        <I.Logout size={17} />
      </button>
    </div>
  );
}

window.Sidebar = Sidebar;