(() => {
/* global React, Icons, Avatar, MOCK */
const { useState, useEffect } = React;

function Sidebar({ active, onNav, accent }) {
  const sections = [
    {
      label: "Workspace",
      items: [
        { id: "home",     name: "Overview",  icon: "Home",    badge: null },
        { id: "teams",    name: "Teams",     icon: "Teams",   badge: MOCK.teams.length },
        { id: "patients", name: "Patients",  icon: "Patient", badge: MOCK.patients.length },
      ],
    },
    {
      label: "Clinical",
      items: [
        { id: "capture",  name: "Capture",   icon: "Capture", badge: null, dot: true },
        { id: "reports",  name: "Reports",   icon: "Reports", badge: 47 },
        { id: "records",  name: "Records",   icon: "Records", badge: null },
      ],
    },
  ];

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          {/* tiny tooth/smile mark */}
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M7 4c-2 0-3 2-3 4 0 1.5.5 2.5.5 4S4 15 4 17c0 1 .5 3 2 3s2-2 2-3.5 1-2.5 2-2.5 2 1 2 2.5S13 20 15 20s2-2 2-3c0-2-.5-3.5-.5-5s.5-2.5.5-4c0-2-1-4-3-4-1.5 0-2 1-3.5 1S8.5 4 7 4z"/>
          </svg>
        </div>
        <div>
          <div className="brand-name">Lux<em>y</em>Smile</div>
          <div className="brand-sub">Oralens · Clinical OS</div>
        </div>
      </div>

      {sections.map((sec, i) => (
        <div key={i}>
          <div className="nav-section-label">{sec.label}</div>
          {sec.items.map(it => {
            const IconC = Icons[it.icon];
            const isActive = it.id === active;
            return (
              <button key={it.id}
                      className={`nav-item ${isActive ? "active" : ""}`}
                      onClick={() => onNav(it.id)}>
                <IconC className="nav-icon" />
                <span>{it.name}</span>
                {it.dot && !isActive && (
                  <span style={{
                    width: 7, height: 7, borderRadius: 99,
                    background: "var(--mint-glow)", marginLeft: "auto",
                    boxShadow: "0 0 0 3px rgba(78,214,176,0.18)"
                  }} />
                )}
                {it.badge != null && <span className="nav-badge">{it.badge}</span>}
              </button>
            );
          })}
        </div>
      ))}

      {/* Spring cycle progress card in sidebar */}
      <div style={{
        marginTop: 18,
        padding: 14,
        borderRadius: 14,
        background: "rgba(246,241,231,0.05)",
        border: "1px solid rgba(246,241,231,0.08)",
      }}>
        <div style={{ fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(246,241,231,0.45)" }}>
          {MOCK.org.cycle}
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--paper)", lineHeight: 1 }}>71<span style={{ fontSize: 16, color: "var(--mint-glow)" }}>%</span></span>
          <span style={{ fontSize: 11, color: "rgba(246,241,231,0.5)" }}>complete</span>
        </div>
        <div style={{ height: 4, borderRadius: 99, background: "rgba(246,241,231,0.08)", marginTop: 10, overflow: "hidden" }}>
          <div style={{
            width: "71%", height: "100%",
            background: "linear-gradient(90deg, var(--mint-glow), var(--mint))",
            borderRadius: 99,
            animation: "side-bar-grow 1.4s cubic-bezier(.2,.8,.2,1) both",
          }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 10.5, color: "rgba(246,241,231,0.5)" }}>
          <span>912 / 1,284</span>
          <span>Closes Jun 14</span>
        </div>
        <style>{`@keyframes side-bar-grow { from { width: 0%; } }`}</style>
      </div>

      <div className="sidebar-foot">
        <button className="org-chip">
          <div className="org-avatar">G</div>
          <div className="org-meta">
            <div className="org-name">{MOCK.org.name}</div>
            <div className="org-id">{MOCK.org.id}</div>
          </div>
          <Icons.Logout style={{ marginLeft: "auto", opacity: 0.5 }} />
        </button>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;

function TopBar({ screen }) {
  const title = {
    home:     "Overview",
    teams:    "Teams",
    patients: "Patients",
    capture:  "Capture",
    reports:  "Reports",
    records:  "Records",
  }[screen] || "Overview";

  const lede = {
    home:     `Pulse of ${MOCK.org.cycle}.`,
    teams:    "Classes and sections across the school.",
    patients: "Students enrolled in the screening program.",
    capture:  "Capture dental images, position by position.",
    reports:  "Clinical reports — upload, review, dispatch.",
    records:  "Searchable record of every screening.",
  }[screen];

  return (
    <header className="topbar">
      <div className="crumbs">
        <span>{MOCK.org.name}</span>
        <span style={{ color: "var(--line-2)" }}>/</span>
        <span className="crumb-current">{title}</span>
        <span className="crumb-lede">{lede}</span>
      </div>
      <div className="topbar-spacer" />
      <div className="search">
        <Icons.Search size={16} stroke="var(--muted-2)" />
        <input placeholder="Search students, teams, IDs…" />
        <span className="kbd">⌘K</span>
      </div>
      <button className="icon-btn" title="Notifications">
        <Icons.Bell size={16} /><span className="dot" />
      </button>
      <button className="icon-btn" title="Settings">
        <Icons.Settings size={16} />
      </button>
    </header>
  );
}

window.TopBar = TopBar;

})();