// Persistent left sidebar — 200px wide. Main nav, actionable lists, saved views, admin, logo.

// React hooks (Babel-standalone — make hooks visible per-script)
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const NAV_MAIN = [
  { id: "exec",      label: "Exec dashboard",   icon: "ti-layout-dashboard" },
  { id: "directory", label: "Entity directory", icon: "ti-list-search" },
  { id: "graph",     label: "Relationship graph", icon: "ti-affiliate" },
  { id: "briefs",    label: "Briefs",           icon: "ti-file-text" },
  { id: "feed",      label: "Research feed",    icon: "ti-rss" },
  { id: "evidence",  label: "Evidence",         icon: "ti-folder" },
];

const NAV_LISTS = [
  { id: "partners",   label: "Partners",           flag: "partner_candidate" },
  { id: "supporters", label: "Supporters",         flag: "supporter_candidate" },
  { id: "investment", label: "Investment targets", flag: "investment_candidate" },
  { id: "support",    label: "Support targets",    flag: "support_candidate" },
  { id: "recruiting", label: "Recruiting targets", flag: "recruiting_candidate" },
  { id: "competitors",label: "Competitors",        flag: "competitor_candidate" },
  { id: "blockers",   label: "Blockers & risk",    flag: "blocker_candidate" },
];

const sidebarStyles = {
  root: {
    width: 200,
    flex: "0 0 200px",
    background: "var(--vk-surface-1)",
    borderRight: "1px solid var(--vk-border-subtle)",
    display: "flex",
    flexDirection: "column",
    height: "100vh",
    position: "sticky",
    top: 0,
  },
  scroll: { flex: 1, overflowY: "auto", padding: "12px 8px" },
  group: { display: "flex", flexDirection: "column", gap: 1, marginBottom: 14 },
  sectionLabel: {
    fontSize: 10,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "var(--vk-text-tertiary)",
    padding: "8px 10px 4px",
    fontWeight: 500,
  },
  item: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "6px 10px",
    borderRadius: 3,
    fontSize: 13,
    color: "var(--vk-text-secondary)",
    cursor: "pointer",
    transition: "background 120ms, color 120ms",
    userSelect: "none",
  },
  itemActive: {
    background: "linear-gradient(135deg, rgba(233,30,99,0.95) 0%, rgba(255,107,53,0.95) 100%)",
    color: "#fff",
    fontWeight: 500,
  },
  bottom: {
    borderTop: "1px solid var(--vk-border-subtle)",
    padding: 10,
    display: "flex",
    flexDirection: "column",
    gap: 8,
  },
  logoRow: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "8px 6px",
  },
};

function NavItem({ active, icon, children, badge, onClick }) {
  const [hover, setHover] = useState(false);
  const style = {
    ...sidebarStyles.item,
    ...(active ? sidebarStyles.itemActive : {}),
    ...(!active && hover ? { background: "var(--vk-surface-2)", color: "var(--vk-text-primary)" } : {}),
  };
  return (
    <div
      style={style}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {icon && <Icon name={icon} style={{ fontSize: 16, flex: "0 0 auto" }} />}
      <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
        {children}
      </span>
      {badge != null && (
        <span style={{ fontSize: 10, color: active ? "rgba(255,255,255,0.7)" : "var(--vk-text-tertiary)", fontFamily: "var(--vk-font-mono)" }}>
          {badge}
        </span>
      )}
    </div>
  );
}

function Sidebar({ page, setPage, savedViews, onSavedView, onNewView }) {
  const ents = window.VK_DATA.ENTITIES;
  const counts = useMemo(() => {
    const c = {};
    NAV_LISTS.forEach((l) => {
      c[l.id] = ents.filter((e) => e[l.flag] === "yes").length;
    });
    return c;
  }, [ents]);

  return (
    <aside style={sidebarStyles.root}>
      <div style={sidebarStyles.scroll}>
        {/* Main */}
        <div style={sidebarStyles.group}>
          {NAV_MAIN.map((n) => (
            <NavItem
              key={n.id}
              active={page === n.id}
              icon={n.icon}
              onClick={() => setPage(n.id)}
            >
              {n.label}
            </NavItem>
          ))}
        </div>

        {/* Actionable lists */}
        <div style={sidebarStyles.group}>
          <div style={sidebarStyles.sectionLabel}>Actionable lists</div>
          {NAV_LISTS.map((n) => (
            <NavItem
              key={n.id}
              active={page === n.id}
              onClick={() => setPage(n.id)}
              badge={counts[n.id]}
            >
              {n.label}
            </NavItem>
          ))}
        </div>

        {/* Saved views */}
        <div style={sidebarStyles.group}>
          <div style={sidebarStyles.sectionLabel}>Saved views</div>
          {savedViews.map((v) => (
            <NavItem
              key={v.id}
              icon="ti-bookmark"
              onClick={() => onSavedView(v)}
            >
              {v.name}
            </NavItem>
          ))}
          <NavItem icon="ti-plus" onClick={onNewView}>
            <span style={{ color: "var(--vk-text-tertiary)" }}>New view</span>
          </NavItem>
        </div>
      </div>

      {/* Bottom: admin + logo */}
      <div style={sidebarStyles.bottom}>
        <NavItem
          icon="ti-settings"
          active={page === "admin"}
          onClick={() => setPage("admin")}
        >
          Admin
        </NavItem>
        <div style={sidebarStyles.logoRow}>
          <img
            src="../../assets/vk-quantum-logo.png"
            alt=""
            style={{
              width: 28,
              height: 28,
              borderRadius: 6,
              objectFit: "cover",
              flex: "0 0 auto",
              background: "#0E0A1A",
            }}
          />
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1, minWidth: 0 }}>
            <span
              style={{
                fontSize: 12,
                fontWeight: 600,
                letterSpacing: "0.06em",
                background: "linear-gradient(135deg,#E91E63,#FF6B35)",
                WebkitBackgroundClip: "text",
                backgroundClip: "text",
                color: "transparent",
              }}
            >
              VK&nbsp;QUANTUM
            </span>
            <span style={{ fontSize: 9, color: "var(--vk-text-tertiary)", letterSpacing: "0.04em" }}>
              OSINT · v1.0
            </span>
          </div>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar, NavItem });