// Sidebar — filtres en haut, dossiers hiérarchiques en bas.

const Sidebar = ({ filters, folders, activeFilter, activeFolder, onFilter, onFolder, expanded, onToggleFolder, dark, isOpen }) => {
  return (
    <aside className={`cp-sidebar ${isOpen ? 'is-open' : ''}`}>
      <div className="cp-sb-filters">
        {filters.map(f => (
          <button
            key={f.id}
            className={`cp-filter ${activeFilter === f.id && !activeFolder ? 'is-active' : ''}`}
            onClick={() => onFilter(f.id)}
            style={{ '--accent': f.accent }}
          >
            <span className="cp-filter-ico" style={{ background: f.accent + (dark ? '33' : '22') }}>
              <Icon name={f.icon} size={14} color={f.accent} />
            </span>
            <span className="cp-filter-lbl">{f.label}</span>
            <span className="cp-filter-cnt">{f.count}</span>
          </button>
        ))}
      </div>

      <div className="cp-sb-section">
        <span>Dossiers</span>
        <button className="cp-sb-add"><Icon name="plus" size={12} /></button>
      </div>

      <div className="cp-sb-folders">
        {folders.map(folder => (
          <FolderRow
            key={folder.id}
            folder={folder}
            depth={0}
            active={activeFolder}
            expanded={expanded}
            onSelect={onFolder}
            onToggle={onToggleFolder}
          />
        ))}
      </div>

      <div className="cp-sb-foot">
        <button className="cp-sb-foot-btn">
          <Icon name="sparkle" size={14} />
          <span>Audit sécurité</span>
          <span className="cp-sb-foot-badge">3</span>
        </button>
      </div>
    </aside>
  );
};

const FolderRow = ({ folder, depth, active, expanded, onSelect, onToggle }) => {
  const hasChildren = folder.children && folder.children.length > 0;
  const isOpen = expanded[folder.id];
  const isActive = active === folder.id;

  return (
    <>
      <div
        className={`cp-folder ${isActive ? 'is-active' : ''}`}
        style={{ paddingLeft: 8 + depth * 14 }}
        onClick={() => onSelect(folder.id)}
      >
        {hasChildren ? (
          <button
            className={`cp-folder-tw ${isOpen ? 'is-open' : ''}`}
            onClick={(e) => { e.stopPropagation(); onToggle(folder.id); }}
          >
            <Icon name="chevron" size={10} />
          </button>
        ) : <span className="cp-folder-tw" />}
        <Icon name={folder.icon} size={14} />
        <span className="cp-folder-name">{folder.name}</span>
        {folder.shared && <span className="cp-folder-tag">Partagé</span>}
        <span className="cp-folder-cnt">{folder.count}</span>
      </div>
      {hasChildren && isOpen && folder.children.map(child => (
        <FolderRow
          key={child.id}
          folder={child}
          depth={depth + 1}
          active={active}
          expanded={expanded}
          onSelect={onSelect}
          onToggle={onToggle}
        />
      ))}
    </>
  );
};

window.Sidebar = Sidebar;