openmind/frontend/src/features/editor/MoveToDialog.tsx

import { useMemo, useState } from 'react';
import { Button } from '@/components/Button';
import { Modal } from '@/components/Modal';
import { SearchIcon } from '@/components/Icons';
import { useEditorStore } from '@/stores/editorStore';
import { useUiStore } from '@/stores/uiStore';
import { computeDepths, getDescendantIds } from '@/utils/tree';
import { cn } from '@/utils/cn';

export interface MoveToDialogProps {
  open: boolean;
  nodeId: string | null;
  onClose: () => void;
}

function normalize(value: string): string {
  return value
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase();
}

/**
 * Choix d'un nouveau parent par recherche.
 *
 * Les cibles impossibles (le noeud lui-meme et ses descendants) sont exclues de
 * la liste : la detection de cycle de `reparentNode` reste la regle unique, ce
 * filtre ne fait qu'eviter de proposer un choix qui serait refuse.
 */
export function MoveToDialog({ open, nodeId, onClose }: MoveToDialogProps) {
  const map = useEditorStore((state) => state.map);
  const moveNodeToParent = useEditorStore((state) => state.moveNodeToParent);
  const pushToast = useUiStore((state) => state.pushToast);
  const [query, setQuery] = useState('');

  const node = map?.nodes.find((candidate) => candidate.id === nodeId);

  const candidates = useMemo(() => {
    if (!map || !node) return [];
    const excluded = new Set([node.id, ...getDescendantIds(map.nodes, node.id)]);
    const depths = computeDepths(map.nodes);
    const needle = normalize(query.trim());

    return map.nodes
      .filter((candidate) => !excluded.has(candidate.id) && candidate.id !== node.parentId)
      .filter((candidate) => !needle || normalize(candidate.text).includes(needle))
      .map((candidate) => ({ node: candidate, depth: depths.get(candidate.id) ?? 0 }))
      .slice(0, 60);
  }, [map, node, query]);

  const move = (parentId: string | null) => {
    if (!node) return;
    if (moveNodeToParent(node.id, parentId)) {
      pushToast(
        parentId ? 'Branche deplacee.' : 'Noeud detache : il devient une racine.',
        'success',
      );
      onClose();
      return;
    }
    pushToast('Deplacement impossible : cela creerait une boucle.', 'error');
  };

  return (
    <Modal
      open={open}
      title="Deplacer vers..."
      description={node ? `"${node.text || 'Sans titre'}" et sa branche changeront de parent.` : ''}
      onClose={onClose}
      footer={<Button onClick={onClose}>Annuler</Button>}
    >
      <div className="space-y-3">
        <div className="flex items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 dark:border-zinc-700">
          <SearchIcon className="h-4 w-4 shrink-0 text-zinc-400" />
          <input
            autoFocus
            type="search"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Rechercher un noeud parent"
            aria-label="Rechercher un noeud parent"
            className="w-full bg-transparent text-sm outline-none placeholder:text-zinc-400"
          />
        </div>

        <button
          type="button"
          onClick={() => move(null)}
          className="w-full rounded-lg border border-dashed border-zinc-300 px-3 py-2 text-left text-sm text-zinc-600 transition-colors hover:bg-zinc-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
        >
          Detacher : en faire une racine
        </button>

        {candidates.length === 0 ? (
          <p className="px-1 py-3 text-sm text-zinc-500">Aucun noeud ne correspond.</p>
        ) : (
          <ul className="max-h-64 overflow-y-auto" aria-label="Nouveaux parents possibles">
            {candidates.map(({ node: candidate, depth }) => (
              <li key={candidate.id}>
                <button
                  type="button"
                  onClick={() => move(candidate.id)}
                  className={cn(
                    'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors',
                    'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800',
                  )}
                >
                  <span
                    aria-hidden="true"
                    className="shrink-0 font-mono text-[11px] text-zinc-400"
                    style={{ paddingLeft: depth * 10 }}
                  >
                    {depth === 0 ? '\u25cf' : '\u2514'}
                  </span>
                  <span className="truncate">{candidate.text || 'Sans titre'}</span>
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </Modal>
  );
}