// Sidebar navigation
const NAV = [
  { id: "dashboard", label: "Dashboard",      group: 1 },
  { id: "compose",   label: "Compose",        group: 1 },
  { id: "recipients",label: "Recipients",     group: 1 },
  { id: "tracker",   label: "Tracker",        group: 2 },
  { id: "inbox",     label: "Inbox",          group: 2, badge: 4 },
  { id: "reviews",   label: "Internal review",group: 2 },
  { id: "analytics", label: "Analytics",      group: 3 },
  { id: "audit",     label: "Audit log",      group: 3 },
  { id: "settings",  label: "Settings",       group: 3 }
];

function Sidebar({ view, setView, dense }) {
  const grouped = NAV.reduce((acc, n) => {
    (acc[n.group] = acc[n.group] || []).push(n);
    return acc;
  }, {});
  const row = dense ? 30 : 34;
  return (
    <aside style={{
      width: 232,
      background: "var(--sidebar-bg)",
      borderRight: "1px solid var(--rule)",
      display: "flex",
      flexDirection: "column",
      height: "100vh",
      position: "sticky",
      top: 0,
      flexShrink: 0
    }}>
      <div style={{ padding: "20px 20px 14px", borderBottom: "1px solid var(--rule)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 28, height: 28, background: "var(--accent)", color: "#fff",
            display: "grid", placeItems: "center", fontWeight: 700, fontSize: 13,
            fontFamily: "var(--font-mono)", borderRadius: 2,
            boxShadow: "inset 0 -2px 0 rgba(0,0,0,0.18)"
          }}>F</div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, color: "var(--text)", letterSpacing: "-0.01em" }}>FOI Workbench</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", marginTop: 1 }}>NEU · Research</div>
          </div>
        </div>
      </div>

      <nav style={{ flex: 1, overflow: "auto", padding: "12px 10px" }}>
        {Object.entries(grouped).map(([g, items], gi) => (
          <div key={g} style={{ marginBottom: 14 }}>
            <div style={{
              fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em",
              color: "var(--muted)", padding: "4px 10px 6px", fontWeight: 600
            }}>
              {gi === 0 ? "Create" : gi === 1 ? "Manage" : "Insight"}
            </div>
            {items.map((n) => {
              const active = view === n.id;
              return (
                <button
                  key={n.id}
                  onClick={() => setView(n.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 8, width: "100%",
                    padding: `0 10px`, height: row,
                    background: active ? "var(--nav-active-bg)" : "transparent",
                    color: active ? "var(--accent)" : "var(--text)",
                    border: "none",
                    fontFamily: "inherit", fontSize: 13.5,
                    fontWeight: active ? 600 : 500,
                    cursor: "pointer",
                    borderRadius: 2,
                    textAlign: "left",
                    position: "relative"
                  }}
                  onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--nav-hover-bg)"; }}
                  onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
                >
                  {active && <span style={{ position: "absolute", left: 0, top: 6, bottom: 6, width: 3, background: "var(--accent)" }} />}
                  <span style={{ flex: 1 }}>{n.label}</span>
                  {n.badge && (
                    <span style={{
                      background: "var(--accent)", color: "#fff",
                      fontSize: 11, fontWeight: 600,
                      padding: "0 6px", height: 16, lineHeight: "16px",
                      borderRadius: 2, fontFamily: "var(--font-mono)"
                    }}>{n.badge}</span>
                  )}
                </button>
              );
            })}
          </div>
        ))}
      </nav>

      <div style={{ borderTop: "1px solid var(--rule)", padding: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 2,
            background: "linear-gradient(135deg, #ddd6c4, #c8bea9)",
            color: "#3a2f1f", fontWeight: 700, fontSize: 11,
            display: "grid", placeItems: "center"
          }}>RD</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>R. Davies</div>
            <div style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>research@neu.org.uk</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar });