leocrm/frontend/src/components/contacts/ContactFolderTree.tsx

import React, { useState, useEffect, useRef, useCallback } from 'react';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import {
  useContactFolders,
  useCreateContactFolder,
  useUpdateContactFolder,
  useDeleteContactFolder,
} from '@/api/hooks';
import { buildFolderTree, type ContactFolderTreeNode } from '@/api/contactFolders';
import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Tag, Trash2, Users } from 'lucide-react';

export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}` | `folder:${string}`;

export interface ContactFolderTreeProps {
  selectedFilter: ContactFilter;
  onSelect: (filter: ContactFilter) => void;
  tags: string[];
  loading?: boolean;
  contacts?: { id: string; displayname: string; type: string; folder_id?: string | null }[];
}

// Icons

const icon = (IconComp: React.ElementType, cls = 'w-4 h-4') => (
  <IconComp className={cls} aria-hidden="true" strokeWidth={2} />
);

const chevron = (open: boolean) => (
  <ChevronRight className={clsx('w-3.5 h-3.5 transition-transform flex-shrink-0', open && 'rotate-90')} aria-hidden="true" strokeWidth={2} />
);

const ICONS = {
  all: Users,
  folder: Folder,
  tag: Tag,
  edit: Pencil,
  trash: Trash2,
  plus: Plus,
  more: MoreVertical,
  palette: Palette,
  pin: Pin,
};

// Dropdown Menu

interface DropdownState {
  folderId: string;
  anchorRect: DOMRect;
}

function FolderDropdown({
  state,
  onClose,
  onRename,
  onDelete,
  onColor,
  onPin,
}: {
  state: DropdownState;
  onClose: () => void;
  onRename: (id: string) => void;
  onDelete: (id: string) => void;
  onColor: (id: string) => void;
  onPin: (id: string) => void;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [onClose]);

  const items: { label: string; icon: React.ElementType; action: () => void; danger?: boolean }[] = [
    { label: 'Umbenennen', icon: Pencil, action: () => { onRename(state.folderId); onClose(); } },
    { label: 'Farbe', icon: Palette, action: () => { onColor(state.folderId); onClose(); } },
    { label: 'Anpinnen', icon: Pin, action: () => { onPin(state.folderId); onClose(); } },
    { label: 'L\u00f6schen', icon: Trash2, action: () => { onDelete(state.folderId); onClose(); }, danger: true },
  ];

  // Position dropdown below the button, aligned right
  const top = state.anchorRect.bottom + 4;
  const left = Math.max(4, state.anchorRect.right - 160);

  return (
    <div
      ref={ref}
      className="fixed z-50 bg-white border border-secondary-200 rounded-lg shadow-lg py-1 min-w-[160px]"
      style={{ top, left }}
    >
      {items.map((item, i) => (
        <button
          key={i}
          onClick={item.action}
          className={clsx(
            'w-full flex items-center gap-2 text-left px-3 py-1.5 text-sm hover:bg-secondary-100',
            item.danger && 'text-red-600 hover:bg-red-50'
          )}
        >
          <item.icon className="w-3.5 h-3.5 flex-shrink-0" strokeWidth={2} />
          {item.label}
        </button>
      ))}
    </div>
  );
}

// Folder Tree Item

function FolderTreeItem({
  node,
  depth,
  selectedFilter,
  onSelectFolder,
  onMoreClick,
}: {
  node: ContactFolderTreeNode;
  depth: number;
  selectedFilter: ContactFilter;
  onSelectFolder: (folderId: string) => void;
  onMoreClick: (e: React.MouseEvent, folderId: string) => void;
}) {
  const [expanded, setExpanded] = useState(true);
  const folderKey = `folder:${node.id}` as ContactFilter;
  const isActive = selectedFilter === folderKey;

  return (
    <div>
      <div
        className={clsx(
          'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
          'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
          isActive
            ? 'bg-primary-50 text-primary-700'
            : 'text-secondary-700 hover:bg-secondary-100',
        )}
        style={{ paddingLeft: depth * 12 + 8 }}
        onClick={() => {
          setExpanded(!expanded);
          onSelectFolder(node.id);
        }}
      >
        {chevron(expanded)}
        {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
        <span className="flex-1 truncate">{node.name}</span>
        {node.contact_count > 0 && (
          <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
        )}
        <button
          onClick={(e) => { e.stopPropagation(); onMoreClick(e, node.id); }}
          className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-0.5"
          title="Optionen"
          aria-label="Optionen"
        >
          {icon(ICONS.more, 'w-3.5 h-3.5')}
        </button>
      </div>

      {expanded && node.children.map((child) => (
        <FolderTreeItem
          key={child.id}
          node={child}
          depth={depth + 1}
          selectedFilter={selectedFilter}
          onSelectFolder={onSelectFolder}
          onMoreClick={onMoreClick}
        />
      ))}
    </div>
  );
}

// Main Component

export function ContactFolderTree({
  selectedFilter,
  onSelect,
  tags,
  loading,
  contacts = [],
}: ContactFolderTreeProps) {
  const { t } = useTranslation();
  const [tagsOpen, setTagsOpen] = useState(true);
  const [dropdown, setDropdown] = useState<DropdownState | null>(null);

  const { data: folders, isLoading: foldersLoading } = useContactFolders();
  const createFolderMut = useCreateContactFolder();
  const updateFolderMut = useUpdateContactFolder();
  const deleteFolderMut = useDeleteContactFolder();

  const folderList = folders ?? [];
  const tree = buildFolderTree(folderList);

  const itemCls = (active: boolean) =>
    clsx(
      'flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm font-medium min-h-touch text-left',
      'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
      active ? 'bg-primary-50 text-primary-700' : 'text-secondary-700 hover:bg-secondary-100',
    );

  const handleMoreClick = useCallback((e: React.MouseEvent, folderId: string) => {
    e.preventDefault();
    e.stopPropagation();
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
    setDropdown({ folderId, anchorRect: rect });
  }, []);

  const handleNewFolder = () => {
    const name = prompt('Ordnername:');
    if (!name) return;
    createFolderMut.mutate({ name });
  };

  const handleRename = (id: string) => {
    const folder = folderList.find((f) => f.id === id);
    const newName = prompt('Neuer Name:', folder?.name || '');
    if (!newName) return;
    updateFolderMut.mutate({ id, data: { name: newName } });
  };

  const handleDelete = (id: string) => {
    if (!confirm('Ordner l\u00f6schen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
    deleteFolderMut.mutate(id);
  };

  const handleColor = (id: string) => {
    const color = prompt('Farbe (Hex-Code, z.B. #ff0000):', '#3b82f6');
    if (!color) return;
    updateFolderMut.mutate({ id, data: { color } as any });
  };

  const handlePin = (id: string) => {
    const folder = folderList.find((f) => f.id === id);
    const pinned = (folder as any)?.pinned ?? false;
    updateFolderMut.mutate({ id, data: { pinned: !pinned } as any });
  };

  const handleSelectFolder = useCallback((folderId: string) => {
    onSelect(`folder:${folderId}` as ContactFilter);
  }, [onSelect]);

  return (
    <nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
      {/* Alle Kontakte */}
      <button
        onClick={() => onSelect('all')}
        className={itemCls(selectedFilter === 'all')}
        aria-current={selectedFilter === 'all' ? 'true' : undefined}
      >
        {icon(ICONS.all)}
        <span>{t('contacts.allContacts')}</span>
      </button>

      {/* Folder tree header with add button */}
      <div className="flex items-center justify-between px-2 pt-2 pb-1">
        <span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
        <button
          onClick={handleNewFolder}
          className="text-secondary-400 hover:text-primary-600 p-0.5"
          title="Neuer Ordner"
          aria-label="Neuer Ordner"
        >
          {icon(ICONS.plus, 'w-3.5 h-3.5')}
        </button>
      </div>

      {/* Folder tree */}
      <div>
        {tree.map((node) => (
          <FolderTreeItem
            key={node.id}
            node={node}
            depth={0}
            selectedFilter={selectedFilter}
            onSelectFolder={handleSelectFolder}
            onMoreClick={handleMoreClick}
          />
        ))}

        {(foldersLoading || loading) && (
          <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
        )}

        {tree.length === 0 && !foldersLoading && !loading && (
          <div className="px-2 py-1 text-xs text-secondary-400">Keine Ordner vorhanden</div>
        )}
      </div>

      {/* Tags */}
      {tags.length > 0 && (
        <div className="pt-1">
          <button
            onClick={() => setTagsOpen(!tagsOpen)}
            className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md text-xs font-semibold text-secondary-500 uppercase tracking-wide hover:bg-secondary-100 min-h-touch text-left"
            aria-expanded={tagsOpen}
          >
            {chevron(tagsOpen)}
            {icon(ICONS.tag, 'w-3.5 h-3.5')}
            <span>{t('tags.title')}</span>
          </button>
          {tagsOpen && (
            <div className="mt-0.5 space-y-0.5">
              {tags.map((tag) => {
                const key = `tag:${tag}` as ContactFilter;
                return (
                  <button
                    key={key}
                    onClick={() => onSelect(key)}
                    style={{ paddingLeft: '32px' }}
                    className={itemCls(selectedFilter === key)}
                    aria-current={selectedFilter === key ? 'true' : undefined}
                  >
                    {icon(ICONS.tag, 'w-3.5 h-3.5')}
                    <span className="truncate">{tag}</span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}

      {dropdown && (
        <FolderDropdown
          state={dropdown}
          onClose={() => setDropdown(null)}
          onRename={handleRename}
          onDelete={handleDelete}
          onColor={handleColor}
          onPin={handlePin}
        />
      )}
    </nav>
  );
}