// Shell: sidebar + topbar + routing
const { useState, useEffect, useMemo, useRef } = React;

function NavItem({ icon: IconC, label, active, badge, onClick }) {
  return (
    <div className={"nav-item" + (active ? " active" : "")} onClick={onClick}>
      <IconC />
      <span>{label}</span>
      {badge != null && <span className="badge">{badge}</span>}
    </div>
  );
}

function Sidebar({ route, setRoute, tenant }) {
  const main = [
    { id: "dashboard",   label: "Live Dashboard", icon: I.Dashboard, badge: 38 },
    { id: "visitors",    label: "Visitors",       icon: I.Visitors },
    { id: "invites",     label: "Invitations",    icon: I.Invites,   badge: 12 },
    { id: "approvals",   label: "Approvals",      icon: I.Approvals, badge: 6 },
    { id: "vip",         label: "VIP Fast-Track", icon: I.VIP },
  ];
  const config = [
    { id: "workflows",   label: "Workflows",      icon: I.Workflow },
    { id: "forms",       label: "Form Builder",   icon: I.Forms },
    { id: "integrations",label: "Integrations",   icon: I.Integrations },
    { id: "signage",     label: "Digital Signage",icon: I.Signage },
    { id: "guards",      label: "Guard Stations", icon: I.Guard },
  ];
  const admin = [
    { id: "tenants",  label: "Tenants",  icon: I.Tenants },
    { id: "reports",  label: "Reports",  icon: I.Reports },
    { id: "settings", label: "Settings", icon: I.Settings },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="logo">D</div>
        <div>
          <div className="name">DARA</div>
          <div className="tenant">{tenant}</div>
        </div>
      </div>
      <div className="nav-group">Operations</div>
      {main.map(x => <NavItem key={x.id} {...x} active={route === x.id} onClick={() => setRoute(x.id)} />)}
      <div className="nav-group">Configuration</div>
      {config.map(x => <NavItem key={x.id} {...x} active={route === x.id} onClick={() => setRoute(x.id)} />)}
      <div className="nav-group">Platform</div>
      {admin.map(x => <NavItem key={x.id} {...x} active={route === x.id} onClick={() => setRoute(x.id)} />)}

      <div className="sidebar-footer">
        <div className="user-chip">
          <Avatar name="Noor Khalfan" size="sm" />
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{fontSize: 13, fontWeight: 500}}>Noor Khalfan</div>
            <div style={{fontSize: 11, color: "var(--ink-3)"}}>Tenant Admin</div>
          </div>
          <I.ChevronDown size={14} />
        </div>
      </div>
    </aside>
  );
}

function Topbar({ crumbs, onInvite, onCmd }) {
  return (
    <header className="topbar">
      <div className="breadcrumb">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <I.ChevronRight size={12} />}
            {i === crumbs.length - 1 ? <strong>{c}</strong> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="search" onClick={onCmd}>
        <I.Search size={14} />
        <input placeholder="Search visitors, invites, workflows…" readOnly />
        <kbd>⌘K</kbd>
      </div>
      <div className="topbar-actions">
        <button className="icon-btn" title="Notifications"><I.Bell /></button>
        <div style={{width: 1, height: 20, background: "var(--border)"}} />
        <button className="btn" onClick={onInvite}><I.Plus size={14}/> Invite visitor</button>
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar, NavItem });