/* global React */
/* Shared dashboard shell used by all logged-in pages.
   Sidebar nav + top bar with workspace switcher, search, notifications, profile. */

window.DASH_NAV = [
  { group: "Workspace", items: [
    { k: "overview",  l: "Overview",      href: "Dashboard.html" },
    { k: "convs",     l: "Conversations", href: "Conversations.html", badge: "12" },
    { k: "knowledge", l: "Knowledge",     href: "Knowledge.html" },
    { k: "analytics", l: "Analytics",     href: "Analytics.html" },
  ]},
  { group: "Configure", items: [
    { k: "widget",   l: "Widget",   href: "Widget Configurator.html" },
    { k: "team",     l: "Team",     href: "Team.html" },
    { k: "billing",  l: "Billing",  href: "Billing.html" },
    { k: "settings", l: "Settings", href: "Settings.html" },
  ]},
];

window.DashSidebar = function DashSidebar({ active }) {
  return (
    <aside className="dash__side">
      <a href="Praatbox Marketing.html" className="dash__brand" aria-label="Praatbox">
        <span className="nav__logo-mark"></span>
        <span className="dash__brand-word"></span>
      </a>
      <button className="dash__team">
        <div className="dash__team-avatar">G</div>
        <div style={{flex:1, textAlign:"left", minWidth:0}}>
          <div className="dash__team-name">Glodinas</div>
          <div className="dash__team-plan">PROFESSIONAL · TRIAL</div>
        </div>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M7 10l5-5 5 5M7 14l5 5 5-5"/>
        </svg>
      </button>
      <div className="dash__nav">
        {window.DASH_NAV.map((g) => (
          <div key={g.group}>
            <div className="dash__nav-group">{g.group}</div>
            {g.items.map((it) => (
              <a key={it.k} href={it.href} className={`dash__nav-item ${active===it.k?"is-active":""}`}>
                <span className="dash__nav-dot" style={{background: active===it.k?"var(--accent)":"currentColor", opacity: active===it.k?1:0.35}}></span>
                <span>{it.l}</span>
                {it.badge && <span className="dash__nav-badge">{it.badge}</span>}
              </a>
            ))}
          </div>
        ))}
      </div>
      <div className="dash__side-foot">
        <div className="dash__trial">
          <div className="dash__trial-bar"><div style={{width:"33%"}}></div></div>
          <div style={{display:"flex",justifyContent:"space-between",fontSize:11,fontFamily:"var(--font-mono)",color:"var(--muted)",marginTop:8,letterSpacing:"0.04em"}}>
            <span>10 DAYS LEFT</span>
            <a href="Pricing.html" style={{color:"var(--accent)"}}>UPGRADE →</a>
          </div>
        </div>
        <a href="Documentation.html" className="dash__side-link">Help & docs</a>
        <a href="#" className="dash__side-link">What's new <span className="dash__chip">3</span></a>
      </div>
    </aside>
  );
};

window.DashTopbar = function DashTopbar({ search = "Search conversations, customers, articles…", actions }) {
  return (
    <header className="dash__top">
      <div className="dash__search">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
        </svg>
        <input placeholder={search} />
        <kbd className="dash__kbd">⌘K</kbd>
      </div>
      <div className="dash__top-actions">
        {actions}
        <button className="dash__icon-btn" title="Notifications" aria-label="Notifications">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/>
          </svg>
          <span className="dash__icon-dot"></span>
        </button>
        <button className="dash__profile" title="Anouk de Vries">
          <span className="dash__profile-av">AV</span>
          <span className="dash__profile-name">Anouk</span>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
      </div>
    </header>
  );
};

/* Wrapper: sidebar + main column with top bar */
window.DashLayout = function DashLayout({ active, topActions, search, children }) {
  return (
    <div className="dash dash--app">
      <window.DashSidebar active={active} />
      <div className="dash__col">
        <window.DashTopbar actions={topActions} search={search} />
        <main className="dash__main">{children}</main>
      </div>
    </div>
  );
};