// Sidebar — brand, projects (with fork nesting), agents, activity feed.
// Defensive against missing window.AGENTS entries.

function ProjectRow({ project, currentProjectId, onSelectProject, depth }) {
  const open = (project.tasks || []).filter((t) => t.column !== "done" && t.column !== "failed").length;
  const isFork = !!project.parent_id;
  const onDelete = async (e) => {
    e.stopPropagation();
    const ok = await window.dialog.confirm({
      title: `Delete “${project.name}”?`,
      body: `All tasks, messages, and forks of this project will be permanently removed. This can't be undone.`,
      confirmLabel: "Delete project",
      danger: true,
    });
    if (ok) await window.api.deleteProject(project.id);
  };
  return (
    <div
      key={project.id}
      className={"side-row" + (project.id === currentProjectId ? " active" : "")}
      onClick={() => onSelectProject(project.id)}
      style={depth ? { paddingLeft: 12 + depth * 14 } : undefined}
    >
      <div className="icon">{project.icon || (project.name || "·").slice(0, 1).toUpperCase()}</div>
      <div title={project.name} style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
        {isFork ? "↳ " : ""}{project.name}
        {isFork && <span className="label-pill" style={{ marginLeft: 6, opacity: 0.7 }}>fork</span>}
      </div>
      <div className="count">{open}</div>
      <button className="row-action" title="Delete project" onClick={onDelete}>×</button>
    </div>
  );
}

function buildProjectTree(projects) {
  const byParent = {};
  const byId = {};
  for (const p of projects) {
    byId[p.id] = p;
    const parent = p.parent_id || null;
    (byParent[parent] = byParent[parent] || []).push(p);
  }
  const out = [];
  function walk(parent_id, depth) {
    const kids = byParent[parent_id] || [];
    for (const p of kids) {
      out.push({ project: p, depth });
      walk(p.id, depth + 1);
    }
  }
  walk(null, 0);
  return out;
}

function Sidebar({ projects, currentProjectId, onSelectProject, activity, onOpenTask, onOpenAgent, mobileOpen, onCloseMobile }) {
  const all = projects || [];
  const tree = buildProjectTree(all);
  const agents = Object.values(window.AGENTS || {}).filter((a) => a && a.kind === "ai");
  const findings = (window.FINDINGS || []).filter((f) => !currentProjectId || f.project_id === currentProjectId);

  return (
    <aside className={"sidebar" + (mobileOpen ? " open" : "")}>
      <div className="brand">
        <div className="brand-mark" />
        <div className="brand-name">Constellation</div>
        <div className="brand-sub">v0.3</div>
        <button
          className="sidebar-close"
          onClick={onCloseMobile}
          aria-label="Close navigation"
          title="Close"
        >
          <window.Icon.Close />
        </button>
      </div>

      <div className="side-section">
        <div className="side-label">Projects</div>
        {tree.map(({ project, depth }) => (
          <ProjectRow
            key={project.id}
            project={project}
            currentProjectId={currentProjectId}
            onSelectProject={onSelectProject}
            depth={depth}
          />
        ))}
        {tree.length === 0 && (
          <div className="side-row" style={{ color: "var(--text-faint)" }}>
            <div className="icon">·</div>
            <div>No projects yet</div>
          </div>
        )}
        <div
          className="side-row add"
          onClick={async () => {
            const v = await window.dialog.form({
              title: "New project",
              body: "Projects group related tasks. You can fork them and share them later.",
              fields: [
                { name: "name", label: "Project name", type: "text", required: true, placeholder: "e.g. NVDA Fair Value", value: "" },
                { name: "kind", label: "Kind", type: "select", value: "research", options: [
                  { value: "research", label: "Research" },
                  { value: "engineering", label: "Engineering" },
                  { value: "personal", label: "Personal" },
                ]},
              ],
              submitLabel: "Create project",
            });
            if (v && v.name) {
              const res = await window.api.createProject(v.name, v.kind);
              if (res && res.project_id) onSelectProject(res.project_id);
            }
          }}
        >
          <div className="icon"><window.Icon.Plus /></div>
          <div>New project</div>
        </div>
      </div>

      <div className="side-section">
        <div className="side-label">Agents</div>
        {agents.length === 0 && (
          <div className="side-row" style={{ color: "var(--text-faint)" }}>
            <div className="icon">·</div>
            <div>No agents yet</div>
          </div>
        )}
        {agents.map((a) => (
          <div key={a.id} className="side-row" onClick={() => onOpenAgent && onOpenAgent(a.id)}>
            <window.Avatar who={a.id} size={18} />
            <div title={a.bio || ""}>{a.name}</div>
            <div className="count" style={{ fontFamily: "var(--font-sans)", fontSize: 11 }}>{a.role || ""}</div>
          </div>
        ))}
      </div>

      <div className="side-section">
        <div className="side-label">Shared knowledge</div>
        {findings.length === 0 ? (
          <div className="side-row" style={{ color: "var(--text-faint)" }}>
            <div className="icon">·</div>
            <div>No findings yet</div>
          </div>
        ) : (
          <div className="findings-panel">
            {findings.slice(0, 12).map((f, i) => (
              <div
                key={i}
                className="finding-item"
                title={f.content}
                onClick={() => f.task_id && onOpenTask && onOpenTask(f.project_id, f.task_id)}
              >
                <window.Avatar who={f.agent} size={20} />
                <div className="finding-body">
                  <div className="finding-text">{f.content}</div>
                  <div className="finding-meta">
                    <span>{(window.AGENTS || {})[f.agent]?.name || f.agent}</span>
                    {(f.tags || []).slice(0, 4).map((t) => (
                      <span key={t} className="finding-tag">{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="activity">
        <div className="side-label">Activity</div>
        {(activity || []).map((it, i) => {
          const a = (window.AGENTS || {})[it.agent] || { name: it.agent || "?", kind: "ai", hue: 200 };
          return (
            <div
              key={i}
              className="activity-item"
              onClick={() => it.project_id && it.task_id && onOpenTask && onOpenTask(it.project_id, it.task_id)}
            >
              <window.Avatar who={it.agent} size={20} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="activity-text">
                  <span className="who">{a.name}</span> {it.text}
                </div>
                <div className="activity-meta">
                  {it.task_id && <><span className="ref">{it.task_id.slice(0, 6)}</span> · </>}
                  {it.t}
                </div>
              </div>
            </div>
          );
        })}
        {(!activity || activity.length === 0) && (
          <div style={{ color: "var(--text-faint)", fontSize: 12, padding: "8px 4px" }}>
            No recent activity.
          </div>
        )}
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;