/* global React, Icon */
function Sidebar({ current, onNav, counts, onLogout, isOpen, onClose, user }) {
  counts = counts || {};
  const items = [
    { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
    { id: "leads", label: "Leads", icon: "inbox", count: counts.leads },
    { id: "customers", label: "Customers", icon: "users", count: counts.customers },
    { id: "engagements", label: "Engagements", icon: "briefcase" },
    { id: "renewals", label: "Renewals", icon: "calendar-clock", count: counts.renewals },
    { id: "payments", label: "Payments", icon: "wallet" },
    { id: "documents", label: "Documents", icon: "folder" },
  ];
  const settings = [
    { id: "services",        label: "Service catalogue",  icon: "list-checks"  },
    { id: "service-master",  label: "Service master",     icon: "layout-list"  },
    { id: "sub-services",    label: "Sub-service master", icon: "list-tree"    },
    { id: "stage-master",    label: "Stage master",       icon: "layers"       },
    { id: "team",            label: "Team & roles",       icon: "user-cog"     },
    { id: "roles",           label: "Roles & permissions",icon: "shield-check" },
    { id: "integrations",    label: "Integrations",       icon: "plug"         },
  ];

  const initials = user ? user.initials || (user.name || "").split(" ").map(w => w[0]).slice(0, 2).join("") : "FA";
  const color    = user ? user.color || "var(--brand-pink)" : "var(--brand-pink)";
  const name     = user ? user.name || "Admin" : "Admin";
  const roleName = user && user.role ? (typeof user.role === "object" ? user.role.name : "") : "Admin";

  return (
    <>
    {isOpen && <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(35,31,32,0.45)", zIndex: 99 }} />}
    <aside className={"sidebar" + (isOpen ? " mobile-open" : "")}>
      <div className="sidebar-brand">
        <img src="assets/logo-mark.svg" style={{ width: 32, height: 32 }} alt="" />
        <div>
          <div className="wordmark">SMASH</div>
          <div className="sub">COMPANIES HOUSE</div>
        </div>
      </div>

      <div className="sidebar-section">
        <div className="heading">Operations</div>
        {items.map(it => (
          <div
            key={it.id}
            className={"nav-item " + (current === it.id ? "active" : "")}
            onClick={() => onNav && onNav(it.id)}>
            <Icon name={it.icon} size={18} />
            <span>{it.label}</span>
            {it.count ? <span className="count">{it.count}</span> : null}
          </div>
        ))}
      </div>

      <div className="sidebar-section">
        <div className="heading">Setup</div>
        {settings.map(it => (
          <div key={it.id} className={"nav-item " + (current === it.id ? "active" : "")} onClick={() => onNav && onNav(it.id)}>
            <Icon name={it.icon} size={18} />
            <span>{it.label}</span>
          </div>
        ))}
      </div>

      <div className="sidebar-user">
        <div className="av" style={{ width: 34, height: 34, background: color, color: "#fff", fontSize: 13, flexShrink: 0 }}>{initials}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="name">{name}</div>
          <div className="role">{roleName || "Team member"}</div>
        </div>
        <button onClick={onLogout} title="Sign out"
          style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-on-sidebar-muted)", padding: 4, borderRadius: 4, display: "flex", flexShrink: 0 }}
          onMouseEnter={e => e.currentTarget.style.color = "var(--fg-on-sidebar)"}
          onMouseLeave={e => e.currentTarget.style.color = "var(--fg-on-sidebar-muted)"}>
          <Icon name="log-out" size={16} />
        </button>
      </div>
    </aside>
    </>
  );
}

function Topbar({ title, onNewEng, onMenuClick }) {
  return (
    <header className="topbar">
      <button className="hamburger" onClick={onMenuClick}><Icon name="menu" size={20} /></button>
      <div className="search">
        <Icon name="search" size={16} />
        <input placeholder="Search customers, leads, license no., visa no…" />
        <span style={{ fontSize: 11, color: "var(--fg-4)", fontFamily: "var(--font-mono)" }}>⌘K</span>
      </div>
      <div className="topbar-actions">
        <button className="icon-btn" title="WhatsApp inbox"><Icon name="message-circle" size={20} /><span className="badge-dot" /></button>
        <button className="icon-btn" title="Notifications"><Icon name="bell" size={20} /><span className="badge-dot" /></button>
        <button className="btn btn-primary" onClick={onNewEng}><Icon name="plus" size={14} stroke={2.2} />New engagement</button>
      </div>
    </header>
  );
}

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