leocrm/frontend/src/components/ai/SessionList.tsx

import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import {
  fetchSessions, createSession, deleteSession, updateSession,
  fetchFolders, createFolder, deleteFolder, updateFolder,
  type ChatSession, type ChatFolder,
} from '@/api/ai';

interface SessionListProps {
  activeSessionId: string | null;
  onSelectSession: (id: string) => void;
  isSidebar?: boolean;
  className?: string;
}

interface TreeNode {
  folder: ChatFolder | null;
  sessions: ChatSession[];
  children: TreeNode[];
}

function buildTree(folders: ChatFolder[], sessions: ChatSession[]): TreeNode[] {
  const rootSessions = sessions.filter((s) => !s.folder_id);
  const root: TreeNode = { folder: null, sessions: rootSessions, children: [] };
  const folderMap = new Map<string, TreeNode>();
  for (const f of folders) folderMap.set(f.id, { folder: f, sessions: [], children: [] });
  for (const f of folders) {
    const node = folderMap.get(f.id)!;
    if (f.parent_id && folderMap.has(f.parent_id)) folderMap.get(f.parent_id)!.children.push(node);
    else root.children.push(node);
  }
  for (const s of sessions) {
    if (s.folder_id && folderMap.has(s.folder_id)) folderMap.get(s.folder_id)!.sessions.push(s);
  }
  return [root];
}

function TreeItem({
  node, activeSessionId, onSelectSession, depth, onMoveSession, onDeleteFolder, onAddFolder, onDragSession, onDropToFolder,
}: {
  node: TreeNode;
  activeSessionId: string | null;
  onSelectSession: (id: string) => void;
  depth: number;
  onMoveSession: (sessionId: string, folderId: string | null) => void;
  onDeleteFolder: (folderId: string) => void;
  onAddFolder: (parentId: string | null) => void;
  onDragSession: (sessionId: string) => void;
  onDropToFolder: (folderId: string | null) => void;
}) {
  const [expanded, setExpanded] = useState(true);
  const [isDragOver, setIsDragOver] = useState(false);
  const isRoot = node.folder === null;

  return (
    <div
      onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
      onDragLeave={() => setIsDragOver(false)}
      onDrop={(e) => { e.preventDefault(); setIsDragOver(false); onDropToFolder(node.folder?.id || null); }}
    >
      {!isRoot && (
        <div
          className={clsx(
            'group flex items-center gap-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer',
            isDragOver ? 'bg-primary-100 ring-1 ring-primary-300' : 'text-secondary-700 hover:bg-secondary-100'
          )}
          style={{ paddingLeft: depth * 12 + 8 }}
          onClick={() => setExpanded(!expanded)}
        >
          <svg className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          <svg className="w-4 h-4 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
          </svg>
          <span className="flex-1 truncate">{node.folder!.name}</span>
          <button onClick={(e) => { e.stopPropagation(); onAddFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600" title="Unterordner">+</button>
          <button onClick={(e) => { e.stopPropagation(); onDeleteFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
        </div>
      )}
      {(isRoot || expanded) && (
        <div>
          {node.sessions.map((session) => (
            <div
              key={session.id}
              draggable
              onDragStart={() => onDragSession(session.id)}
              onClick={() => onSelectSession(session.id)}
              className={clsx(
                'group flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer rounded-md',
                'hover:bg-secondary-100 active:cursor-grabbing',
                activeSessionId === session.id && 'bg-primary-100 text-primary-700'
              )}
              style={{ paddingLeft: depth * 12 + 24 }}
            >
              <svg className="w-3.5 h-3.5 text-secondary-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h8M8 8h8m-8 4h8m-8 4h8" />
              </svg>
              <span className="flex-1 truncate">{session.title}</span>
              <button onClick={(e) => { e.stopPropagation(); deleteSession(session.id).then(() => window.location.reload()); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
            </div>
          ))}
        </div>
      )}
      {(isRoot || expanded) && node.children.map((child) => (
        <TreeItem
          key={child.folder!.id}
          node={child}
          activeSessionId={activeSessionId}
          onSelectSession={onSelectSession}
          depth={depth + 1}
          onMoveSession={onMoveSession}
          onDeleteFolder={onDeleteFolder}
          onAddFolder={onAddFolder}
          onDragSession={onDragSession}
          onDropToFolder={onDropToFolder}
        />
      ))}
    </div>
  );
}

export function SessionList({ activeSessionId, onSelectSession, isSidebar, className }: SessionListProps) {
  const [sessions, setSessions] = useState<ChatSession[]>([]);
  const [folders, setFolders] = useState<ChatFolder[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [dragSessionId, setDragSessionId] = useState<string | null>(null);

  const loadData = async () => {
    try {
      setLoading(true);
      const [s, f] = await Promise.all([fetchSessions(isSidebar ? true : undefined), fetchFolders()]);
      setSessions(s); setFolders(f); setError(null);
    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to load'); }
    finally { setLoading(false); }
  };

  useEffect(() => { loadData(); }, [isSidebar]);

  const handleNewChat = async () => {
    try {
      const session = await createSession({ is_sidebar: isSidebar || false });
      setSessions((prev) => [session, ...prev]); onSelectSession(session.id);
    } catch (e) { setError(e instanceof Error ? e.message : 'Failed'); }
  };

  const handleAddFolder = (parentId: string | null) => {
    const name = prompt('Ordnername:');;
    if (!name) return;
    createFolder({ name, parent_id: parentId || undefined }).then(() => loadData()).catch((e) => setError(e?.message));
  };

  const handleDeleteFolder = (folderId: string) => {
    if (!confirm('Ordner löschen? Chats bleiben erhalten.')) return;
    deleteFolder(folderId).then(() => loadData()).catch((e) => setError(e?.message));
  };

  const handleDropToFolder = async (folderId: string | null) => {
    if (!dragSessionId) return;
    try {
      await updateSession(dragSessionId, { folder_id: folderId });
      setDragSessionId(null);
      loadData();
    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to move'); }
  };

  if (loading) return <div className="p-4 text-sm text-secondary-400">Laden...</div>;

  const tree = buildTree(folders, sessions);

  return (
    <div className={clsx('flex flex-col h-full', className)}>
      <div className="p-3 border-b border-secondary-200 flex gap-2">
        <button onClick={handleNewChat} className="flex-1 rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700">+ Neuer Chat</button>
        <button onClick={() => handleAddFolder(null)} className="rounded-lg border border-secondary-300 px-3 py-2 text-sm hover:bg-secondary-100" title="Neuer Ordner">📁+</button>
      </div>
      {error && <div className="p-2 text-xs text-red-600">{error}</div>}
      <div className="flex-1 overflow-y-auto p-2">
        {tree.map((node) => (
          <TreeItem
            key={node.folder?.id || 'root'}
            node={node}
            activeSessionId={activeSessionId}
            onSelectSession={onSelectSession}
            depth={0}
            onMoveSession={() => {}}
            onDeleteFolder={handleDeleteFolder}
            onAddFolder={handleAddFolder}
            onDragSession={setDragSessionId}
            onDropToFolder={handleDropToFolder}
          />
        ))}
      </div>
    </div>
  );
}