// Sidebar + Header chrome — v5 "Quiet Precision" aligned

const NAV_GROUPS = [
  {
    label: "Workspace",
    items: [
      { id: "/dashboard", label: "Dashboard",    icon: "layout-dashboard" },
      { id: "/approvals", label: "Approvals",    icon: "circle-check-big", badge: 4, badgeKind: "caution" },
      { id: "/stock",     label: "Stock Levels", icon: "warehouse" },
      { id: "/items",     label: "Items",        icon: "package" },
      { id: "/locations", label: "Locations",    icon: "map-pin" },
    ],
  },
  {
    label: "Operations",
    items: [
      { id: "/inward",    label: "Inward",        icon: "shopping-cart" },
      { id: "/outward",   label: "Outward",       icon: "shopping-bag" },
      { id: "/transfers", label: "Transfers",     icon: "arrow-left-right" },
      { id: "/journal",   label: "Stock Journal", icon: "scale" },
    ],
  },
  {
    label: "Insight",
    items: [
      { id: "/ledger",    label: "Stock Ledger", icon: "scroll-text" },
      { id: "/audit",     label: "Audit Log",    icon: "history" },
      { id: "/contacts",  label: "Contacts",     icon: "users" },
      { id: "/settings",  label: "Settings",     icon: "settings" },
    ],
  },
];

function BiSidebar({ route, onNavigate }) {
  return (
    <aside className="flex flex-col"
      style={{ width: 240, flexShrink: 0, background: "var(--surface)", borderRight: "1px solid var(--hairline)" }}>
      {/* Brand */}
      <div className="flex items-center gap-2.5 px-4 py-4" style={{ borderBottom: "1px solid var(--hairline)" }}>
        <div style={{
          width: 30, height: 30, borderRadius: 8,
          background: "var(--ink)", color: "var(--paper)",
          display: "grid", placeItems: "center",
          fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 18,
          position: "relative",
        }}>
          b
          <span style={{ position: "absolute", right: 4, bottom: 4, width: 5, height: 5, borderRadius: 99, background: "var(--accent-1)" }}/>
        </div>
        <div className="flex flex-col" style={{ lineHeight: 1 }}>
          <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 18, letterSpacing: "-0.015em", color: "var(--ink)" }}>better</span>
          <span style={{ fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", marginTop: 3 }}>Inventory</span>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto px-3 py-3" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {NAV_GROUPS.map((g) => (
          <div key={g.label}>
            <div style={{ fontSize: 10.5, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", padding: "6px 10px 4px" }}>{g.label}</div>
            <div className="space-y-0.5">
              {g.items.map(it => {
                const active = route === it.id;
                return (
                  <button
                    key={it.id}
                    data-id={`nav-${it.id}`}
                    onClick={() => onNavigate(it.id)}
                    className={cn(
                      "w-full flex items-center gap-2.5 transition-colors text-left",
                      active
                        ? "bg-[var(--ink)] text-[var(--paper)]"
                        : "text-[var(--ink-2)] hover:bg-[var(--sunken)] hover:text-[var(--ink)]"
                    )}
                    style={{ height: 32, padding: "0 10px", borderRadius: 8, fontSize: 13.5, fontWeight: 500 }}
                  >
                    <Icon name={it.icon} size={15} strokeWidth={1.75} style={{ color: active ? "var(--paper)" : "var(--ink-3)" }}/>
                    <span className="flex-1">{it.label}</span>
                    {it.badge != null && (
                      <span
                        className="inline-flex items-center justify-center mono"
                        style={{
                          minWidth: 20, height: 18, padding: "0 6px", borderRadius: 99,
                          fontSize: 11, fontWeight: 500,
                          background: active
                            ? "oklch(1 0 0 / 0.18)"
                            : (it.badgeKind === "caution" ? "var(--caution-tint)" : "var(--sunken)"),
                          color: active ? "var(--paper)" : (it.badgeKind === "caution" ? "var(--caution-text)" : "var(--ink-2)"),
                        }}
                      >
                        {it.badge}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* User + tenant footer (combined per v5 sidebar spec) */}
      <div style={{ borderTop: "1px solid var(--hairline)", padding: "10px 12px" }}>
        <div className="flex items-center gap-2.5 rounded-md hover:bg-[var(--sunken)] transition-colors" style={{ padding: "6px 8px" }}>
          <Avatar initials="PS" size={28}/>
          <div className="flex-1 min-w-0" style={{ lineHeight: 1.2 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink)" }} className="truncate">Priya Sharma</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }} className="truncate">Sharma Distributors</div>
          </div>
          <Icon name="chevrons-up-down" size={14} className="text-[var(--ink-3)]"/>
        </div>
      </div>
    </aside>
  );
}

// Header — v5 model: header is just utilities; page title lives in content
function BiHeader({ title, subtitle, breadcrumbs, actions }) {
  return (
    <header className="flex items-center gap-3 px-6 sticky top-0 z-10"
      style={{ height: 52, background: "var(--paper)", borderBottom: "1px solid var(--hairline)" }}>
      {/* Left: tenant chip — quiet context */}
      <div className="flex items-center gap-2 min-w-0 flex-shrink">
        <span style={{
          width: 18, height: 18, borderRadius: 4,
          background: "oklch(0.86 0.08 50)", color: "oklch(0.34 0.10 50)",
          fontWeight: 600, fontSize: 9.5, display: "grid", placeItems: "center",
          flexShrink: 0,
        }}>SD</span>
        <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", whiteSpace: "nowrap" }}>Sharma Distributors</span>
        <span style={{ color: "var(--ink-5)", fontSize: 12, flexShrink: 0 }}>/</span>
        <span style={{ fontSize: 12.5, color: "var(--ink-3)", whiteSpace: "nowrap" }}>{title}</span>
      </div>

      <div className="flex-1"/>

      {/* Search */}
      <button data-id="header-search"
        className="flex items-center gap-2.5 transition-colors"
        style={{
          height: 30, padding: "0 8px 0 12px", borderRadius: 8,
          background: "var(--sunken)", border: "1px solid var(--hairline)",
          fontSize: 12.5, color: "var(--ink-3)", width: 260,
        }}>
        <Icon name="search" size={13}/>
        <span className="flex-1 text-left">Search items, vouchers…</span>
        <Kbd>⌘K</Kbd>
      </button>

      <button className="relative grid place-items-center transition-colors"
        style={{ width: 30, height: 30, borderRadius: 8, color: "var(--ink-2)" }}
        onMouseEnter={e => e.currentTarget.style.background = "var(--sunken)"}
        onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
        <Icon name="bell" size={15}/>
        <span className="absolute" style={{ top: 6, right: 6, width: 6, height: 6, borderRadius: 99, background: "var(--critical)", boxShadow: "0 0 0 1.5px var(--paper)" }}/>
      </button>

      {actions}
    </header>
  );
}

// Page header — sits at top of content. Title in serif Newsreader, subtitle in meta.
function BiPageHeader({ title, subtitle, actions, children }) {
  return (
    <div className="flex items-end justify-between gap-4" style={{ marginBottom: 20 }}>
      <div className="min-w-0">
        <h1 className="h1-page" style={{ margin: 0, fontSize: 22 }}>{title}</h1>
        {subtitle && <div className="type-meta" style={{ marginTop: 4 }}>{subtitle}</div>}
        {children}
      </div>
      {actions && <div className="flex items-center gap-2 flex-shrink-0">{actions}</div>}
    </div>
  );
}

Object.assign(window, { BiSidebar, BiHeader, BiPageHeader, NAV_GROUPS });