// Sidebar + Topbar + shared chrome
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

const NAV = [
  { group: "Operations", items: [
    { id: "dashboard",  label: "Dashboard",   icon: "dashboard" },
    { id: "map",        label: "Facility Map", icon: "map" },
    { id: "units",      label: "Units",       icon: "units", count: 522 },
    { id: "bookings",   label: "Bookings",    icon: "bookings", count: 5 },
  ]},
  { group: "Customers", items: [
    { id: "customers",  label: "Customers",   icon: "customers" },
    { id: "billing",    label: "Billing",     icon: "billing", badge: { text: "5", tone: "warn" } },
    { id: "comms",      label: "Communications", icon: "comms" },
    { id: "auctions",   label: "Auctions",    icon: "auctions" },
  ]},
  { group: "Intelligence", items: [
    { id: "access",     label: "Access Control", icon: "access", badge: { text: "1", tone: "bad" } },
    { id: "automation", label: "Automation",  icon: "automation" },
    { id: "analytics",  label: "Analytics",   icon: "analytics" },
    { id: "portfolio",  label: "Portfolio",   icon: "layers" },
  ]},
];

const Sidebar = ({ active, onNav, collapsed, t, setT }) => (
  <aside className="sidebar">
    <div className="brand">
      <div className="brand-mark" aria-hidden="true"></div>
      {!collapsed && (
        <div>
          <div className="brand-name">VaultOS</div>
          <div className="brand-sub">Auckland Central</div>
        </div>
      )}
    </div>
    <div style={{ flex: 1, overflow: "auto", paddingBottom: 8 }}>
      {NAV.map(group => (
        <div className="nav-section" key={group.group}>
          {!collapsed && <div className="nav-label">{group.group}</div>}
          {group.items.map(item => (
            <div
              key={item.id}
              className="nav-item"
              data-active={active === item.id}
              onClick={() => onNav(item.id)}
              title={collapsed ? item.label : undefined}
            >
              <span className="icon"><Icon name={item.icon} size={16} /></span>
              <span className="lbl">{item.label}</span>
              {item.count != null && <span className="badge">{item.count}</span>}
              {item.badge && <span className={`badge ${item.badge.tone}`}>{item.badge.text}</span>}
            </div>
          ))}
        </div>
      ))}
    </div>
    <div className="sidebar-foot">
      <div className="avatar">EH</div>
      {!collapsed && (
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            Ellie Harata
          </div>
          <div style={{ fontSize: 11, color: "var(--tx-3)" }}>Site manager</div>
        </div>
      )}
      {!collapsed && <Icon name="more" size={14} style={{ color: "var(--tx-3)" }} />}
    </div>
  </aside>
);

const Topbar = ({ active, theme, onTheme, onSidebar, onTweaks }) => {
  const labels = {
    dashboard: ["Operations", "Dashboard"],
    map: ["Operations", "Facility Map"],
    units: ["Operations", "Units"],
    bookings: ["Operations", "Bookings"],
    customers: ["Customers", "Customers"],
    billing: ["Customers", "Billing"],
    comms: ["Customers", "Communications"],
    auctions: ["Customers", "Auctions"],
    access: ["Intelligence", "Access Control"],
    automation: ["Intelligence", "Automation"],
    analytics: ["Intelligence", "Analytics"],
    portfolio: ["Intelligence", "Portfolio"],
  };
  const [g, h] = labels[active] || ["", ""];
  return (
    <div className="topbar">
      <button className="iconbtn" onClick={onSidebar} title="Toggle sidebar">
        <Icon name="menu" size={16} />
      </button>
      <div className="crumbs">
        <span>{g}</span>
        <Icon name="chevron-r" size={12} />
        <span className="here">{h}</span>
      </div>
      <div className="topbar-spacer" />
      <span className="live-indicator"><span className="pulse" /> Live</span>
      <div className="search">
        <Icon name="search" size={14} />
        <input placeholder="Search units, tenants, invoices…" />
        <kbd>⌘K</kbd>
      </div>
      <button className="iconbtn" onClick={onTheme} title="Toggle theme">
        <Icon name={theme === "dark" ? "moon" : "sun"} size={16} />
      </button>
      <button className="iconbtn" title="Notifications" style={{ position: "relative" }}>
        <Icon name="bell" size={16} />
        <span style={{
          position: "absolute", top: 4, right: 4,
          width: 6, height: 6, borderRadius: 99,
          background: "var(--bad)"
        }} />
      </button>
    </div>
  );
};

window.AppChrome = { Sidebar, Topbar, NAV };