// Helios — Sidebar component.
// Workspace switcher, top nav, pinned, recent, user footer.
// Density tightened: 4px gaps between rows, 2px less vertical padding.

const sidebarStyle = {
  width: 264,
  background: "var(--color-sidebar-bg)",
  display: "flex",
  flexDirection: "column",
  fontFamily: "var(--font-sans)",
  flexShrink: 0,
  paddingTop: 10,
};

const sbItem = (selected) => ({
  display: "flex", alignItems: "center", gap: 10,
  padding: "6px 10px",
  margin: "0 8px",
  borderRadius: 6,
  fontSize: 13.5, color: selected ? "var(--color-text)" : "var(--color-text-secondary)",
  background: selected ? "var(--color-surface-hover)" : "transparent",
  cursor: "pointer",
  fontWeight: selected ? 500 : 400,
  letterSpacing: "-0.005em",
});

// Section heading — mono natural case, not all-caps. The mono + tabular-zero
// is what makes it read as "system label" without shouting at the user.
const sbHeading = {
  fontFamily: "var(--font-mono)",
  fontSize: 11, fontWeight: 400,
  letterSpacing: 0,
  fontFeatureSettings: '"tnum" 1, "zero" 1',
  color: "var(--color-text-muted)",
  padding: "14px 18px 6px",
};

const HeliosSidebar = ({ current = "dashboard" }) => (
  <aside style={sidebarStyle}>
    {/* Workspace header */}
    <div style={{ padding: "4px 10px 12px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 8px", borderRadius: 6, cursor: "pointer" }}>
        <HeliosWordmark size={14}/>
        <Icons.ChevronsUpDown size={12} style={{ color: "var(--color-text-muted)" }}/>
      </div>
      <button aria-label="New" style={{
        background: "transparent", border: 0, padding: 5, borderRadius: 6,
        color: "var(--color-text-muted)", cursor: "pointer", display: "flex"
      }}>
        <Icons.SquarePen size={15}/>
      </button>
    </div>

    {/* Top items */}
    <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
      <div style={sbItem(current === "new")}>
        <Icons.Plus size={15}/> <span>New conversation</span>
      </div>
      <div style={sbItem(current === "data")}>
        <Icons.Database size={15}/> <span>Data</span>
      </div>
      <div style={sbItem(current === "dashboard")}>
        <Icons.BarChart3 size={15}/> <span>Reports</span>
      </div>
      <div style={sbItem(current === "signals")}>
        <Icons.Bell size={15}/> <span>Signals</span>
        {/* Notification badge — small ink dot, not a magenta pill. Quieter, more "instrument". */}
        <span style={{
          marginLeft: "auto", fontSize: 10.5,
          background: "transparent",
          color: "var(--color-ink)",
          fontFamily: "var(--font-mono)",
          fontFeatureSettings: '"tnum" 1',
          fontWeight: 500,
        }}>3</span>
      </div>
    </div>

    {/* Pinned */}
    <div style={sbHeading}>Pinned</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
      <div style={sbItem(false)}>
        <Icons.Pin size={13} style={{ color: "var(--color-text-muted)" }}/>
        <span>Weekly revenue check</span>
      </div>
      <div style={sbItem(false)}>
        <Icons.Pin size={13} style={{ color: "var(--color-text-muted)" }}/>
        <span>Top services breakdown</span>
      </div>
    </div>

    {/* Recent conversations */}
    <div style={sbHeading}>Recent</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 1, overflow: "hidden" }}>
      {[
        { t: "Why did Tuesday revenue dip?", sel: current === "thread" },
        { t: "Compare gel vs acrylic margins", sel: false },
        { t: "Lash-fill add-on conversion", sel: false },
        { t: "Cancellation rate by stylist", sel: false },
        { t: "Best week of October", sel: false },
        { t: "How do new clients find us?", sel: false },
      ].map(({ t, sel }) => (
        <div key={t} style={{ ...sbItem(sel), whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", display: "block" }}>
          {t}
        </div>
      ))}
    </div>

    {/* Spacer + footer */}
    <div style={{ flex: 1 }}/>
    <div style={{
      borderTop: "1px solid var(--color-border)",
      padding: "10px 12px", display: "flex", alignItems: "center", gap: 10,
      margin: "8px 0 0",
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 9999,
        background: "var(--color-surface-warm)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 11, fontWeight: 600, color: "var(--color-text-secondary)",
      }}>MK</div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
        <span style={{ fontSize: 12.5, fontWeight: 500 }}>Mira K.</span>
        <span style={{ fontSize: 10.5, color: "var(--color-text-muted)" }}>The Lash Studio</span>
      </div>
      <div style={{ marginLeft: "auto", color: "var(--color-text-muted)", display: "flex", cursor: "pointer" }}>
        <Icons.ChevronsUpDown size={13}/>
      </div>
    </div>
  </aside>
);

window.HeliosSidebar = HeliosSidebar;