// SidePanel: logo, dashboard, project selector, new chat, scrollable middle (chats + entity categories), sticky user/settings
function SidePanel({ mode = "ask", project, setProject, projectOpen, setProjectOpen, chatsOpen, setChatsOpen, openCats, toggleCat, openItems, toggleItem, activeChat, setActiveChat, virtualChat, setVirtualChat, dashView, onOpenDashBoard, onOpenInitiative }) {
  const [initOpen, setInitOpen] = useState(true);
  const [foldersOpen, setFoldersOpen] = useState(true);
  const detailId = dashView && dashView.view === "detail" ? dashView.id : null;
  const onBoard = mode === "dashboard" && (!dashView || dashView.view === "board");
  return (
    <aside className="w-full h-full bg-[#f4f1ea] flex flex-col border-r border-[#e8e3d8]">
      {/* Logo */}
      <div className="px-4 pt-3 pb-2 flex items-center justify-between">
        <TeklensLogo />
      </div>

      {/* Dashboard */}
      <div className="px-2">
        <button onClick={onOpenDashBoard} className={`w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13.5px] ${onBoard ? "bg-black/[0.06] text-[#0e0e10] font-medium" : "text-[#1f1f1f] hover:bg-black/[0.04]"}`}>
          <Icon name="grid" size={16} /> Dashboard
        </button>
      </div>

      {/* Project selector */}
      <div className="px-2 mt-1 relative">
        <button onClick={() => setProjectOpen(o => !o)} className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-[13.5px] text-[#1f1f1f] hover:bg-black/[0.04]">
          <Icon name="folder" size={16} className="text-[#9b8866]" />
          <span className="flex-1 text-left">{project}</span>
          <Icon name="chevron-up-down" size={14} className="text-[#9aa0a6]" />
        </button>
        {projectOpen && (
          <div className="absolute left-2 right-2 top-full mt-1 bg-white rounded-lg border border-[#e8e3d8] shadow-lg z-30 py-1">
            {PROJECTS.map(p => (
              <button key={p} onClick={() => { setProject(p); setProjectOpen(false); }}
                className="w-full flex items-center gap-2 px-2.5 py-1.5 text-[13px] hover:bg-black/[0.04]">
                <Icon name="folder" size={14} className="text-[#9b8866]" />
                <span className="flex-1 text-left">{p}</span>
                {p === project && <Icon name="check" size={14} className="text-[var(--accent)]" />}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* New chat */}
      <div className="px-2 mt-2">
        <button className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-md text-[13.5px] font-medium text-white bg-[var(--accent)] hover:brightness-110 shadow-[0_1px_0_rgba(0,0,0,0.08)]">
          <Icon name="plus" size={16} /> New Chat
        </button>
      </div>

      {/* divider */}
      <div className="mx-3 my-3 h-px bg-[#e8e3d8]" />

      {/* Scrollable middle */}
      <div className="flex-1 min-h-0 overflow-y-auto px-2 pb-2 [scrollbar-gutter:stable]">
        {/* Chats */}
        <Collapsible open={chatsOpen} onToggle={() => setChatsOpen(o => !o)} label="CHATS" caret>
          <div className="flex flex-col">
            {CHATS.map(c => (
              <button key={c.id} onClick={() => setActiveChat(c.id)}
                className={`group flex items-center gap-2 pl-6 pr-2 py-1.5 rounded-md text-left text-[12.5px] ${activeChat === c.id && !virtualChat ? "bg-black/[0.06] text-[#0e0e10]" : "text-[#3a3a3a] hover:bg-black/[0.04]"}`}>
                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${activeChat === c.id && !virtualChat ? "bg-[var(--accent)]" : "bg-[#cbcbcb]"}`} />
                <span className="truncate flex-1">{c.title}</span>
              </button>
            ))}
          </div>
        </Collapsible>

        {/* ===== INITIATIVES MODE: Steps + Initiatives ===== */}
        {mode === "dashboard" && <>
        <div className="mx-1 my-3 h-px bg-[#e8e3d8]" />
        <Collapsible open={initOpen} onToggle={() => setInitOpen(o => !o)} caret raw
          label={<span className="flex items-center gap-1.5"><Icon name="grid" size={13} style={{ color: "#9b8866" }} /><span className="text-[11px] font-semibold tracking-[0.06em] text-[#6b6b6b] uppercase">Initiatives</span></span>}>
          <div className="flex flex-col">
            {DASH_INITIATIVES.map(it => {
              const p = DASH_PHASES[dashPhaseIndex(it.phase)];
              const isCur = detailId === it.id;
              return (
                <button key={it.id} onClick={() => onOpenInitiative(it.id)}
                  className={`group flex items-center gap-1.5 pl-6 pr-2 py-1.5 rounded-md text-left text-[12.5px] ${isCur ? "bg-black/[0.06] text-[#0e0e10] font-medium" : "text-[#2a2a2a] hover:bg-black/[0.04]"}`}>
                  <span className="rounded-full shrink-0" style={{ width: 7, height: 7, background: p.color }} />
                  <span className="truncate flex-1">{it.name}</span>
                  <span className="text-[10px] text-[#9aa0a6] shrink-0">{p.name}</span>
                </button>
              );
            })}
          </div>
        </Collapsible>
        <div className="mx-1 my-3 h-px bg-[#e8e3d8]" />
        <Collapsible open={foldersOpen} onToggle={() => setFoldersOpen(o => !o)} caret raw
          label={<span className="flex items-center gap-1.5"><Icon name="folder" size={13} style={{ color: "#9b8866" }} /><span className="text-[11px] font-semibold tracking-[0.06em] text-[#6b6b6b] uppercase">Folders</span></span>}>
          <div className="flex flex-col">
            {DASH_FOLDERS.map(f => (
              <button key={f.id} onClick={onOpenDashBoard}
                className="group flex items-center gap-1.5 pl-6 pr-2 py-1.5 rounded-md text-left text-[12.5px] text-[#2a2a2a] hover:bg-black/[0.04]">
                <Icon name="folder" size={13} className="text-[#9aa0a6] shrink-0" />
                <span className="truncate flex-1">{f.name}</span>
                <span className="text-[10px] text-[#9aa0a6] shrink-0">{f.artefacts.length}</span>
              </button>
            ))}
            <button onClick={onOpenDashBoard} className="group flex items-center gap-1.5 pl-6 pr-2 py-1.5 rounded-md text-left text-[12.5px] text-[#2a2a2a] hover:bg-black/[0.04]">
              <Icon name="home" size={13} className="text-[#9aa0a6] shrink-0" />
              <span className="truncate flex-1">Desktop</span>
              <span className="text-[10px] text-[#9aa0a6] shrink-0">{DASH_DESKTOP.artefacts.length}</span>
            </button>
          </div>
        </Collapsible>
        </>}

        {/* Entity categories */}
        {mode === "ask" && ENTITY_CATEGORIES.map((cat, idx) => (
          <div key={cat.id} className="mt-2">
            {idx === 0 && <div className="mx-1 my-3 h-px bg-[#e8e3d8]" />}
            <Collapsible open={openCats[cat.id]} onToggle={() => toggleCat(cat.id)}
              label={
                <span className="flex items-center gap-1.5">
                  <Icon name={cat.icon} size={13} className="" style={{ color: cat.tint }} />
                  <span className="text-[11px] font-semibold tracking-[0.06em] text-[#6b6b6b] uppercase">{cat.label}</span>
                </span>
              } caret raw>
              <div className="flex flex-col">
                {cat.items.map(it => {
                  const isActiveVirtual = virtualChat?.entityId === it.id;
                  return (
                    <div key={it.id}>
                      <div className={`group flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-md ${isActiveVirtual ? "bg-black/[0.06]" : "hover:bg-black/[0.04]"}`}>
                        {/* expand toggle */}
                        <button
                          onClick={() => toggleItem(it.id)}
                          className="w-4 h-4 flex items-center justify-center shrink-0 text-[#9aa0a6] hover:text-[#0e0e10]"
                          title="Show conversations">
                          <Icon name={openItems[it.id] ? "chevron-down" : "chevron-right"} size={12} />
                        </button>
                        {/* clickable label = virtual chat */}
                        <button onClick={() => setVirtualChat({ entityId: it.id, label: it.label, category: cat.label, source: cat.source })}
                          className="flex-1 flex items-center gap-1.5 text-left min-w-0">
                          <Icon name={it.icon} size={13} style={{ color: cat.tint }} />
                          <span className={`truncate text-[12.5px] ${isActiveVirtual ? "text-[#0e0e10] font-medium" : "text-[#2a2a2a]"}`}>{it.label}</span>
                          <span className="ml-auto text-[10.5px] text-[#9aa0a6] shrink-0 flex items-center gap-0.5"><Icon name="message" size={10}/>{it.count}</span>
                        </button>
                      </div>
                      {openItems[it.id] && (
                        <div className="ml-4 border-l border-[#e8e3d8] pl-2 my-0.5">
                          {it.chats.map(ch => (
                            <button key={ch.id} className="w-full flex items-center gap-1.5 px-2 py-1 rounded text-left text-[12px] text-[#5a5a5a] hover:bg-black/[0.04] hover:text-[#0e0e10]">
                              <Icon name="message" size={11} className="text-[#9aa0a6]" />
                              <span className="truncate">{ch.label}</span>
                            </button>
                          ))}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </Collapsible>
          </div>
        ))}
      </div>

      {/* Sticky user/settings */}
      <div className="mt-auto border-t border-[#e8e3d8] bg-[#f4f1ea] px-2 py-2 flex items-center gap-2 shrink-0">
        <img src={window.__res ? window.__res("person-simon.webp") : "person-simon.webp"} alt="Simon" className="w-7 h-7 rounded-full object-cover shrink-0" />
        <div className="flex-1 min-w-0">
          <div className="text-[12.5px] font-medium truncate">simon@contem.ch</div>
        </div>
        <button className="p-1.5 rounded hover:bg-black/[0.05] text-[#5a5a5a]"><Icon name="chevron-up-down" size={14} /></button>
      </div>
    </aside>
  );
}

function Collapsible({ open, onToggle, label, children, caret = false, raw = false }) {
  return (
    <div>
      <button onClick={onToggle} className="w-full flex items-center gap-1 px-2 py-1 rounded hover:bg-black/[0.03]">
        {caret && <Icon name={open ? "chevron-down" : "chevron-right"} size={12} className="text-[#9aa0a6]" />}
        {raw ? label : <span className="text-[11px] font-semibold tracking-[0.06em] text-[#6b6b6b] uppercase">{label}</span>}
      </button>
      {open && <div className="mt-0.5">{children}</div>}
    </div>
  );
}