web-cad/frontend/src/components/TreeView.tsx

import React, { useState } from 'react';
import type { TreeNode } from '../types/ui.types';

interface TreeViewProps {
  nodes: TreeNode[];
  selectedId?: string | null;
  selectedIds?: string[];
  onSelect: (id: string) => void;
  onToggle?: (id: string) => void;
  onReorder?: (draggedId: string, targetId: string, position: 'before' | 'after' | 'inside') => void;
  renderIcon?: (node: TreeNode) => React.ReactNode;
  renderActions?: (node: TreeNode) => React.ReactNode;
  renderDetail?: (node: TreeNode) => React.ReactNode;
  draggable?: boolean;
}

const TreeView: React.FC<TreeViewProps> = ({
  nodes,
  selectedId,
  selectedIds,
  onSelect,
  onToggle,
  onReorder,
  renderIcon,
  renderActions,
  renderDetail,
  draggable = false,
}) => {
  const [expandedSet, setExpandedSet] = useState<Set<string>>(new Set());
  const [draggedId, setDraggedId] = useState<string | null>(null);
  const [dragOverId, setDragOverId] = useState<string | null>(null);
  const [dragPosition, setDragPosition] = useState<'before' | 'after' | 'inside'>('before');

  const toggleExpand = (id: string) => {
    setExpandedSet((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
    onToggle?.(id);
  };

  const handleDragStart = (e: React.DragEvent, id: string) => {
    if (!draggable || !onReorder) return;
    setDraggedId(id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', id);
  };

  const handleDragOver = (e: React.DragEvent, id: string) => {
    if (!draggable || !onReorder || !draggedId || draggedId === id) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    const rect = e.currentTarget.getBoundingClientRect();
    const offset = e.clientY - rect.top;
    const third = rect.height / 3;
    if (offset < third) {
      setDragPosition('before');
    } else if (offset > third * 2) {
      setDragPosition('after');
    } else {
      setDragPosition('inside');
    }
    setDragOverId(id);
  };

  const handleDragLeave = (_e: React.DragEvent, id: string) => {
    if (!draggable || !onReorder) return;
    if (dragOverId === id) {
      setDragOverId(null);
    }
  };

  const handleDrop = (e: React.DragEvent, id: string) => {
    if (!draggable || !onReorder || !draggedId || draggedId === id) return;
    e.preventDefault();
    e.stopPropagation();
    onReorder(draggedId, id, dragPosition);
    setDraggedId(null);
    setDragOverId(null);
  };

  const handleDragEnd = () => {
    setDraggedId(null);
    setDragOverId(null);
  };

  const renderNode = (node: TreeNode, level: number): React.ReactNode => {
    const hasChildren = node.children && node.children.length > 0;
    const isExpanded = expandedSet.has(node.id) || node.expanded;
    const isSelected = selectedId === node.id || (selectedIds !== undefined && selectedIds.includes(node.id));
    const isDragOver = dragOverId === node.id;
    const isDragging = draggedId === node.id;

    let dragClass = '';
    if (isDragOver && dragPosition === 'before') dragClass = ' tree-drag-before';
    if (isDragOver && dragPosition === 'after') dragClass = ' tree-drag-after';
    if (isDragOver && dragPosition === 'inside') dragClass = ' tree-drag-inside';

    return (
      <React.Fragment key={node.id}>
        <div
          className={`tree-node${isSelected ? ' active' : ''}${dragClass}${isDragging ? ' tree-dragging' : ''}`}
          style={{ paddingLeft: `${level * 16 + 8}px` }}
          onClick={() => onSelect(node.id)}
          draggable={draggable}
          onDragStart={(e) => handleDragStart(e, node.id)}
          onDragOver={(e) => handleDragOver(e, node.id)}
          onDragLeave={(e) => handleDragLeave(e, node.id)}
          onDrop={(e) => handleDrop(e, node.id)}
          onDragEnd={handleDragEnd}
        >
          {hasChildren && (
            <button
              className="tree-toggle"
              onClick={(e) => {
                e.stopPropagation();
                toggleExpand(node.id);
              }}
              aria-label={isExpanded ? 'Einklappen' : 'Ausklappen'}
            >
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: isExpanded ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s' }}>
                <polyline points="9 18 15 12 9 6" />
              </svg>
            </button>
          )}
          {!hasChildren && <span className="tree-toggle-placeholder" />}
          {renderIcon && <span className="tree-icon">{renderIcon(node)}</span>}
          <span className="tree-label">{node.name}</span>
          {node.count !== undefined && <span className="tree-count">({node.count})</span>}
          {renderActions && <span className="tree-actions" onClick={(e) => e.stopPropagation()}>{renderActions(node)}</span>}
        </div>
        {renderDetail && isSelected && (
          <div className="tree-detail" style={{ paddingLeft: `${level * 16 + 8}px` }}>
            {renderDetail(node)}
          </div>
        )}
        {hasChildren && isExpanded && (
          <div className="tree-children">
            {node.children!.map((child) => renderNode(child, level + 1))}
          </div>
        )}
      </React.Fragment>
    );
  };

  return <div className="tree-view">{nodes.map((node) => renderNode(node, 0))}</div>;
};

export default TreeView;