// Sidebar: file explorer tree
const { useState, useEffect, useRef, useCallback, useMemo } = React;

function FileTree({ node, path, depth, openPath, openFolders, onOpen, onToggleFolder, projectBadge }) {
  if (node.type === 'folder') {
    const isOpen = openFolders.has(path);
    const childrenEntries = Object.entries(node.children || {});
    return (
      <>
        <div
          className={`tree-item folder ${isOpen ? 'open' : ''}`}
          style={{ paddingLeft: 8 + depth * 10 }}
          onClick={() => onToggleFolder(path)}
        >
          {window.Glyph.chevron(isOpen)}
          {window.Glyph.folder(isOpen)}
          <span className="lbl">{node.name}</span>
          {projectBadge && projectBadge[path] ? <span className="badge">{projectBadge[path]}</span> : null}
        </div>
        {isOpen && childrenEntries.map(([k, child]) => (
          <FileTree
            key={path + '/' + k}
            node={child.type === 'folder' ? child : child}
            path={path + '/' + k}
            depth={depth + 1}
            openPath={openPath}
            openFolders={openFolders}
            onOpen={onOpen}
            onToggleFolder={onToggleFolder}
            projectBadge={projectBadge}
          />
        ))}
      </>
    );
  }
  // file
  const name = path.split('/').pop();
  const lang = node.lang || (node.type === 'image' ? 'img' : 'txt');
  const glyph =
    node.type === 'image' ? window.Glyph.img() :
    lang === 'md' ? window.Glyph.md() :
    lang === 'json' ? window.Glyph.json() :
    lang === 'js' ? window.Glyph.js() :
    lang === 'jsx' ? window.Glyph.js() :
    name === '.gitignore' ? window.Glyph.git() :
    name === 'LICENSE' ? window.Glyph.lock() :
    window.Glyph.md();
  const active = openPath === path;
  return (
    <div
      className={`tree-item file ${active ? 'active' : ''}`}
      style={{ paddingLeft: 8 + depth * 10 }}
      onClick={() => onOpen(path)}
    >
      <span className="chev"></span>
      {glyph}
      <span className="lbl">{name}</span>
    </div>
  );
}

function Sidebar({ activePath, openFolders, onOpen, onToggleFolder }) {
  const D = window.PORTFOLIO_DATA;
  return (
    <aside className="sidebar">
      <div className="profile-card">
        <div className="pfp"></div>
        <div className="meta">
          <div className="name">{D.profile.name}</div>
          <div className="sub">{D.profile.role}</div>
        </div>
      </div>
      <div className="sidebar-header">
        <span>Explorer</span>
      </div>
      <div className="sidebar-section" style={{ flex: 1, overflowY: 'auto' }}>
        <div className="section-title">
          <span className="chevron">▾</span>
          <span className="name">leyder-herrera</span>
        </div>
        <div className="tree">
          {Object.entries(window.FS.profile.children).map(([k, child]) => (
            <FileTree
              key={'/' + k}
              node={child}
              path={'/' + k}
              depth={0}
              openPath={activePath}
              openFolders={openFolders}
              onOpen={onOpen}
              onToggleFolder={onToggleFolder}
            />
          ))}
        </div>
      </div>
      <div className="sidebar-header" style={{ borderTop: '1px solid var(--border-soft)' }}>
        <span>Outline</span>
      </div>
      <div style={{ padding: '4px 16px 12px', fontSize: 11.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
        <div>● 5 markdown files</div>
        <div>● 3 projects indexed</div>
        <div>● {D.skills.languages.length + D.skills.backend.length + D.skills.frontend.length + D.skills.databases.length + D.skills.tools.length} skills tracked</div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;
window.FileTree = FileTree;