// Primate App Kit — Sidebar
const { useState: useStateSB } = React;

function NavItem({ icon, label, selected, collapsible, open, onClick, indent }) {
  const [hover, setHover] = useStateSB(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 8, height: 36, cursor: "pointer",
        padding: indent ? "0 8px 0 32px" : "0 8px", margin: "0 8px", borderRadius: "var(--r-sm)",
        font: "var(--t-label)",
        color: selected ? "var(--fg)" : "var(--fg-secondary)",
        background: selected ? "var(--bg-elevated)" : hover ? "rgba(255,255,255,0.05)" : "transparent",
        transition: "background .12s ease, color .12s ease",
      }}
    >
      {icon && <Icon name={icon} size={16} color={selected ? "var(--fg)" : "var(--fg-secondary)"} />}
      <span style={{ flex: 1 }}>{label}</span>
      {collapsible && <Icon name={open ? "chevron-up" : "chevron-down"} size={16} color="var(--fg-faint)" />}
    </div>
  );
}

function GroupLabel({ children }) {
  return <div style={{ font: "var(--t-eyebrow)", color: "#B5B5B5", padding: "16px 16px 6px" }}>{children}</div>;
}

function Sidebar({ current, onNavigate }) {
  const [openAgent, setOpenAgent] = useStateSB(true);
  const [orgHover, setOrgHover] = useStateSB(false);

  return (
    <div style={{
      width: 256, flexShrink: 0, height: "100%", background: "var(--bg)",
      borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
    }}>
      {/* org switcher */}
      <div style={{ padding: 8 }}>
        <div
          onMouseEnter={() => setOrgHover(true)} onMouseLeave={() => setOrgHover(false)}
          style={{ display: "flex", alignItems: "center", gap: 10, height: 44, padding: "0 8px", borderRadius: "var(--r-md)", cursor: "pointer", background: orgHover ? "rgba(255,255,255,0.05)" : "transparent" }}>
          <span style={{ width: 28, height: 28, borderRadius: 7, background: "var(--bg-elevated)", display: "flex", alignItems: "center", justifyContent: "center" }}><Logo size={16} /></span>
          <div style={{ display: "flex", flexDirection: "column", flex: 1, lineHeight: 1.2 }}>
            <span style={{ font: "var(--t-label)", color: "var(--fg)" }}>Acme Inc</span>
            <span style={{ font: "var(--t-caption)", color: "var(--fg-faint)" }}>Enterprise</span>
          </div>
          <Icon name="chevrons-up-down" size={16} color="var(--fg-faint)" />
        </div>
      </div>

      <div style={{ flex: 1, overflowY: "auto", overflowX: "hidden", paddingBottom: 8 }}>
        <NavItem icon="house" label="Home" selected={current === "home"} onClick={() => onNavigate("home")} />

        <GroupLabel>Features</GroupLabel>
        <NavItem icon="bot" label="Code Review Agent" collapsible open={openAgent} onClick={() => setOpenAgent(o => !o)} />
        {openAgent && <NavItem label="Logs" indent selected={current === "logs"} onClick={() => onNavigate("logs")} />}

        <GroupLabel>Billing &amp; Usage</GroupLabel>
        <NavItem icon="credit-card" label="Billing" selected={current === "billing"} onClick={() => onNavigate("billing")} />

        <GroupLabel>Account</GroupLabel>
        <NavItem icon="building-2" label="Organization" selected={current === "organization"} onClick={() => onNavigate("organization")} />
      </div>

      {/* footer user */}
      <div style={{ borderTop: "1px solid var(--border)", padding: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, height: 44, padding: "0 8px" }}>
          <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: "50%", background: "var(--gold)", color: "var(--on-gold)", display: "flex", alignItems: "center", justifyContent: "center", font: "600 13px var(--font-mono)" }}>J</span>
          <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0, lineHeight: 1.2 }}>
            <span style={{ font: "var(--t-label)", color: "var(--fg)" }}>Jeremy Bell</span>
            <span style={{ font: "var(--t-caption)", color: "var(--fg-faint)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>bell.jeremy.robert@gmail.com</span>
          </div>
          <Icon name="ellipsis" size={16} color="var(--fg-faint)" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar });