/* =========================================================================
 *  CTWCAD — Folder tree (left rail)
 * =======================================================================*/
function FolderTree({ projects, foldersByProject, currentFolderId, onSelectFolder, onSelectProject, onContext }) {
  const [openProjects, setOpenProjects] = useState({});
  const [openFolders, setOpenFolders] = useState({});

  const toggleP = (id) => setOpenProjects((s) => ({ ...s, [id]: !s[id] }));
  const toggleF = (id) => setOpenFolders((s) => ({ ...s, [id]: !s[id] }));

  return (
    <div className="ct-tree">
      {projects.map((p) => {
        const all = foldersByProject[p.id] || [];
        const root = all.find(f => f.parentId === null);
        const isOpen = openProjects[p.id];
        return (
          <div key={p.id} className="ct-tree-project">
            <div className="ct-tree-row"
                 onClick={() => { toggleP(p.id); onSelectProject?.(p); }}
                 onContextMenu={(e) => { e.preventDefault(); onContext?.(e, { kind: "project", project: p }); }}>
              <ChevronCaret open={isOpen} />
              <span className="ct-tree-dot" style={{ background: `oklch(0.72 0.12 ${p.coverHue})` }} />
              <span className="ct-tree-label">{p.name}</span>
            </div>
            <AnimatedCollapse open={isOpen}>
              {root && <TreeNode
                folder={root}
                allFolders={all}
                level={1}
                openFolders={openFolders}
                toggleF={toggleF}
                currentFolderId={currentFolderId}
                onSelectFolder={onSelectFolder}
                onContext={onContext}
              />}
            </AnimatedCollapse>
          </div>
        );
      })}
    </div>
  );
}

function TreeNode({ folder, allFolders, level, openFolders, toggleF, currentFolderId, onSelectFolder, onContext }) {
  const children = allFolders.filter((f) => f.parentId === folder.id);
  const has = children.length > 0;
  const isOpen = openFolders[folder.id];
  const active = currentFolderId === folder.id;
  return (
    <>
      <div
        className={"ct-tree-row ct-tree-folder " + (active ? "is-active" : "")}
        style={{ paddingLeft: 12 + level * 14 }}
        onClick={() => { onSelectFolder(folder); }}
        onDoubleClick={() => toggleF(folder.id)}
        onContextMenu={(e) => { e.preventDefault(); onContext?.(e, { kind: "folder", folder }); }}
      >
        {has ? (
          <span onClick={(e) => { e.stopPropagation(); toggleF(folder.id); }}>
            <ChevronCaret open={isOpen} />
          </span>
        ) : <span className="ct-tree-spacer" />}
        <Icon name="folder" size={13} />
        <span className="ct-tree-label">{folder.name}</span>
      </div>
      <AnimatedCollapse open={isOpen}>
        {children.map((c) => (
          <TreeNode key={c.id}
            folder={c} allFolders={allFolders} level={level + 1}
            openFolders={openFolders} toggleF={toggleF}
            currentFolderId={currentFolderId} onSelectFolder={onSelectFolder}
            onContext={onContext} />
        ))}
      </AnimatedCollapse>
    </>
  );
}

function ChevronCaret({ open }) {
  const M = window.FramerMotion.motion;
  return (
    <M.span
      className="ct-caret"
      animate={{ rotate: open ? 90 : 0 }}
      transition={{ type: "spring", stiffness: 320, damping: 26 }}
    >
      <Icon name="chevron-right" size={12} />
    </M.span>
  );
}

function AnimatedCollapse({ open, children }) {
  const M = window.FramerMotion.motion;
  const A = window.FramerMotion.AnimatePresence;
  return (
    <A initial={false}>
      {open && (
        <M.div
          key="c"
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
          style={{ overflow: "hidden" }}
        >
          {children}
        </M.div>
      )}
    </A>
  );
}

Object.assign(window, { FolderTree });