const { useState: useStateRail, useEffect: useEffectRail, useRef: useRefRail } = React;

// Left rail: global navigation on top, the report stepper while a report is
// open, and the user card at the bottom. All navigation goes through the
// setters app.jsx passes in so the hash router (buildHash) stays the single
// source of truth for the URL.
function Sidebar({
  user, step, maxStep, steps, reportId, collapsed, onToggleCollapse,
  onStep, goHome, goNew, onRepository, onSettings, onBilling, onSignOut,
  navLocked = false,
}) {
  const [menuOpen, setMenuOpen] = useStateRail(false);
  const menuRef = useRefRail(null);

  useEffectRail(() => {
    if (!menuOpen) return;
    const handler = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [menuOpen]);

  const inReport = typeof step === "number";
  const isHome = step === "home";
  const isNew = step === 0 && !reportId;
  const isRepo = step === "repository" || step === "repository-upsell";
  const initials = user?.initials || "?";
  const name = user?.name || "Account";

  const link = (label, icon, active, onClick) => (
    <button
      className={`sidenav-link ${active ? "active" : ""}`}
      onClick={onClick}
      disabled={navLocked}
      title={navLocked ? "Saving your scope…" : collapsed ? label : undefined}
    >
      <Icon name={icon} size={15} />
      {!collapsed && <span className="lbl">{label}</span>}
    </button>
  );

  return (
    <nav className={`sidenav ${collapsed ? "collapsed" : ""} ${navLocked ? "nav-locked" : ""}`} aria-label="Atlas navigation">
      <div className="sidenav-brand">
        {!collapsed && (
          <div className="brand" onClick={navLocked ? undefined : goHome} style={{ cursor: navLocked ? "default" : "pointer", display: "inline-flex", alignItems: "center" }}>
            <img src="/static/atlas-wordmark.svg" height="13" alt="Atlas" style={{ display: "block", flexShrink: 0, width: "auto" }} />
          </div>
        )}
        <button
          className="sidenav-toggle"
          onClick={onToggleCollapse}
          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
        >
          <Icon name={collapsed ? "chevronRight" : "chevronLeft"} size={14} />
        </button>
      </div>

      <div className="sidenav-links">
        {link("Home", "home", isHome, goHome)}
        {link("New report", "plus", isNew, goNew)}
        {user && link("Repository", "folder", isRepo, onRepository)}
      </div>

      {inReport && (
        <div className="sidenav-steps">
          {collapsed
            ? <div className="sidenav-rule" />
            : <div className="sidenav-eyebrow" title={reportId || undefined}>{reportId || "New report"}</div>}
          {steps.map((s, i) => {
            const isDone = i < step || (i <= maxStep && i !== step);
            const isActive = i === step;
            // Locked while the scope step is saving, so it can't unmount mid-save.
            const isClickable = !navLocked && i <= maxStep && i !== step;
            const cls = isActive ? "active" : isDone ? "done" : "locked";
            const state = isActive ? "current" : isDone ? "done" : "locked";
            return (
              <button
                key={s.num}
                className={`sidenav-step ${cls}`}
                onClick={() => isClickable && onStep(i)}
                disabled={!isClickable && !isActive}
                title={collapsed ? `${s.num} ${s.lbl} · ${state}` : undefined}
                style={{ cursor: isClickable ? "pointer" : "default" }}
              >
                <span className="ix">{s.num}</span>
                {!collapsed && <span className="ttl">{s.lbl}</span>}
                {!collapsed && isDone && (
                  <span className="check"><Icon name="checkSmall" size={12} strokeWidth={2.4} /></span>
                )}
              </button>
            );
          })}
        </div>
      )}

      <div className="sidenav-spacer" />

      <div className="sidenav-user" ref={menuRef}>
        <button
          className={`sidenav-user-btn ${menuOpen ? "open" : ""}`}
          onClick={() => setMenuOpen((v) => !v)}
          title={collapsed ? name : undefined}
        >
          <span className="av">{initials}</span>
          {!collapsed && (
            <span className="who">
              <span className="name">{name}</span>
              <span className="hint">Settings</span>
            </span>
          )}
          {!collapsed && <span className="chevron"><Icon name="chevronDown" size={12} /></span>}
        </button>
        {menuOpen && (
          <div className="user-dropdown up">
            <div className="user-dropdown-header">
              <div className="name" title={name}>{name}</div>
              <div className="email" title={user?.email}>{user?.email}</div>
            </div>
            <button className="user-dropdown-item" onClick={() => { setMenuOpen(false); onSettings(); }}>
              <Icon name="settings" size={14} /> Settings
            </button>
            <button className="user-dropdown-item" disabled={navLocked} onClick={() => { setMenuOpen(false); onBilling && onBilling(); }}>
              <Icon name="creditCard" size={14} /> Billing
            </button>
            <div className="user-dropdown-divider" />
            <button className="user-dropdown-item danger" onClick={onSignOut}>
              <Icon name="logOut" size={14} /> Sign out
            </button>
          </div>
        )}
      </div>
    </nav>
  );
}

window.Sidebar = Sidebar;