/* ANISAN — Sidebar nav. Coursue-style rail with the wordmark, grouped nav,
   and the unit switcher. Lucide icons, brass active state. */

function NavItem({ icon, label, active, onClick, dot }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 12, width: "100%",
        backgroundColor: active ? "rgba(201,162,75,0.13)" : "transparent",
        border: "none",
        borderLeft: active ? "2px solid var(--brass)" : "2px solid transparent",
        color: active ? "var(--paper)" : (hover ? "var(--paper)" : "var(--muted)"),
        padding: "11px 18px", cursor: "pointer", textAlign: "left",
        fontFamily: "var(--font-body)", fontSize: 14,
        transition: "color .15s ease",
      }}
    >
      {dot
        ? <span style={{ width: 9, height: 9, borderRadius: "50%", background: dot, flexShrink: 0, marginLeft: 1 }} />
        : <i data-lucide={icon} style={{ width: 18, height: 18, strokeWidth: 1.6, flexShrink: 0 }}></i>}
      <span style={{ whiteSpace: "nowrap" }}>{label}</span>
    </button>
  );
}

function NavGroup({ title }) {
  return (
    <p style={{
      fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.16em",
      textTransform: "uppercase", color: "var(--muted-2)", margin: "22px 0 8px", padding: "0 20px",
    }}>{title}</p>
  );
}

function Sidebar({ active, setActive, unit, setUnit, mobile, open, onClose, user }) {
  const go = (fn, v) => { fn(v); if (mobile && onClose) onClose(); };
  const abas = window.abasVisiveis(user);
  const isMaster = user && user.role === "master";

  // On mobile the drawer is mounted only while open (no transform-transition
  // dependency, so it can never appear stuck) and unmounts when closed.
  if (mobile && !open) return null;

  const asideStyle = mobile
    ? {
        width: 264, borderRight: "1px solid var(--hairline)", paddingBottom: 24,
        display: "flex", flexDirection: "column",
        position: "fixed", top: 0, left: 0, height: "100vh", overflow: "auto",
        background: "var(--ink)", zIndex: 1200, boxShadow: "var(--shadow-overlay)",
      }
    : {
        width: 232, flexShrink: 0, borderRight: "1px solid var(--hairline)",
        paddingBottom: 24, display: "flex", flexDirection: "column",
        position: "sticky", top: 0, height: "100vh", overflow: "auto",
      };

  return (
    <React.Fragment>
      {mobile && (
        <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(15,13,11,0.6)", zIndex: 1100 }} />
      )}
      <aside style={asideStyle}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 11, padding: "22px 18px 22px 20px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <span style={{
              width: 34, height: 34, borderRadius: 9, background: "var(--brass)",
              display: "grid", placeItems: "center", flexShrink: 0,
              fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--ink)",
            }}>あ</span>
            <span>
              <span style={{ display: "block", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 19, letterSpacing: "0.5px", color: "var(--paper)", lineHeight: 1 }}>ANISAN</span>
              <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.22em", color: "var(--brass)", marginTop: 3 }}>GRUPO · SUSHI</span>
            </span>
          </div>
          {mobile && (
            <button onClick={onClose} title="Fechar menu" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted)", display: "grid", placeItems: "center", padding: 4 }}>
              <i data-lucide="x" style={{ width: 20, height: 20, strokeWidth: 1.8 }}></i>
            </button>
          )}
        </div>

        <NavGroup title="Visão geral" />
        {abas.map((a) => (
          <NavItem key={a.key} icon={a.icon} label={a.label} active={active === a.key} onClick={() => go(setActive, a.key)} />
        ))}
        {isMaster && (
          <NavItem icon="users" label="Usuários" active={active === "usuarios"} onClick={() => go(setActive, "usuarios")} />
        )}

        <NavGroup title="Unidades" />
        {window.podeVerConsolidado(user) && <NavItem icon="layers" label="Consolidado" active={unit === "Consolidado"} onClick={() => go(setUnit, "Consolidado")} />}
        {window.podeVerUnidade(user, "Anisan") && <NavItem dot="var(--brass)" label="Anisan" active={unit === "Anisan"} onClick={() => go(setUnit, "Anisan")} />}
        {window.podeVerUnidade(user, "Anisanzinho") && <NavItem dot="var(--jade)" label="Anisanzinho" active={unit === "Anisanzinho"} onClick={() => go(setUnit, "Anisanzinho")} />}
        {window.podeVerUnidade(user, "Anisan Express") && <NavItem dot="var(--clay)" label="Anisan Express" active={unit === "Anisan Express"} onClick={() => go(setUnit, "Anisan Express")} />}

        <div style={{ marginTop: "auto" }}>
          <NavGroup title="Conta" />
          <NavItem icon="settings" label="Configurações" />
          <NavItem icon="log-out" label="Sair" />
        </div>
      </aside>
    </React.Fragment>
  );
}

window.Sidebar = Sidebar;