/* global React, Icon, initials */
const { useState: uS } = React;

function Sidebar({ route, setRoute, unsignedCount = 0 }) {
  const items = [
    { id: "dashboard", label: "Dashboard", icon: Icon.Home },
    { id: "prescriptions", label: "Prescriptions", icon: Icon.Orders, badge: unsignedCount },
    { id: "patients", label: "Patients", icon: Icon.Patients },
    { id: "orders", label: "Order history", icon: Icon.Pkg },
  ];
  const items2 = [
    { id: "basket", label: "New prescription", icon: Icon.New },
    { id: "settings", label: "Clinic settings", icon: Icon.Settings },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">P</div>
        <div>
          <div className="brand-name">Pharmacy365</div>
          <div className="brand-sub">For Clinics</div>
        </div>
      </div>

      <div className="nav-section">Workspace</div>
      {items.map(it => (
        <button key={it.id} className={"nav-item" + (route === it.id ? " active" : "")} onClick={() => setRoute(it.id)}>
          <it.icon /> <span style={{ flex: 1 }}>{it.label}</span>
          {it.badge ? <span style={{ background: "var(--rust)", color: "#fff", fontSize: 10, fontWeight: 700, padding: "2px 6px", borderRadius: 10, minWidth: 18, textAlign: "center" }}>{it.badge}</span> : null}
        </button>
      ))}

      <div className="nav-section">Quick actions</div>
      {items2.map(it => (
        <button key={it.id} className={"nav-item" + (route === it.id ? " active" : "")} onClick={() => setRoute(it.id)}>
          <it.icon /> {it.label}
        </button>
      ))}

      <div className="nav-spacer" />

      <button className="nav-item" style={{ color: "rgba(255,255,255,0.6)" }}>
        <Icon.Help /> Help & SOPs
      </button>

      <div className="user-card">
        <div className="avatar">JS</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="user-name">Dr. J. Smith</div>
          <div className="user-role">GPhC 2087443</div>
        </div>
        <Icon.Chevron style={{ color: "rgba(255,255,255,0.4)" }} />
      </div>
    </aside>
  );
}

function Topbar({ onNew, unsignedCount = 0, onShowSign }) {
  const [open, setOpen] = uS(false);
  return (
    <header className="topbar">
      <button className="clinic-pill" onClick={() => setOpen(!open)}>
        <span className="clinic-mark">BA</span>
        Beaumont Aesthetics
        <Icon.Chevron style={{ color: "var(--ink-3)" }} />
      </button>
      <div className="search-bar">
        <Icon.Search />
        <input placeholder="Search patients, orders, products…" />
      </div>
      <div className="topbar-spacer" />
      <span className="kbd">⌘ K</span>
      {unsignedCount > 0 && (
        <button className="btn btn-ghost btn-sm" onClick={onShowSign} style={{ borderColor: "var(--rust)", color: "var(--rust)" }}>
          <span style={{ background: "var(--rust)", color: "#fff", fontSize: 10, fontWeight: 700, padding: "1px 6px", borderRadius: 10 }}>{unsignedCount}</span>
          to sign
        </button>
      )}
      <button className="icon-btn"><Icon.Bell />{unsignedCount > 0 && <span className="dot" />}</button>
      <button className="icon-btn"><Icon.Help /></button>
      <button className="btn btn-accent" onClick={onNew}><Icon.New /> New prescription</button>
    </header>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;