import React, { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
import {
  ChevronRight,
  ChevronDown,
  Check,
  X,
  Code,
  Heading1,
  Heading2,
  Heading3,
  ListTodo,
  Minus,
  MessageSquare,
  Hash,
  ExternalLink,
  Maximize2,
  Link as LinkIcon,
  FileText,
} from 'lucide-react';
import { DocumentBlock, BlockType } from '../../lib/types';
import { LinkModal } from './LinkModal';

export interface SlashCommand {
  type: BlockType | 'link';
  label: string;
  desc: string;
  icon: React.ReactNode;
}

const SLASH_COMMANDS: SlashCommand[] = [
  { type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: <ListTodo className="w-3.5 h-3.5" /> },
  { type: 'link', label: '/link', desc: 'Notiz verknüpfen oder Web-Link einfügen', icon: <LinkIcon className="w-3.5 h-3.5" /> },
  { type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: <Heading1 className="w-3.5 h-3.5" /> },
  { type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: <Heading2 className="w-3.5 h-3.5" /> },
  { type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: <Heading3 className="w-3.5 h-3.5" /> },
  { type: 'code', label: '/code', desc: 'Code-Block mit Syntax', icon: <Code className="w-3.5 h-3.5" /> },
  { type: 'callout', label: '/callout', desc: 'Hinweisbox', icon: <MessageSquare className="w-3.5 h-3.5" /> },
  { type: 'divider', label: '/divider', desc: 'Trennlinie', icon: <Minus className="w-3.5 h-3.5" /> },
];

export interface OutlinerBlockProps {
  block: DocumentBlock;
  index: number;
  maxAllowedLevel: number;
  hasChildren: boolean;
  isFocused: boolean;
  canEdit: boolean;
  levelOffset?: number;
  onZoomBlock?: (blockId: string) => void;
  onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
  onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
  onDeleteBlock: (blockId: string) => void;
  onIndentBlock: (blockId: string, delta: 1 | -1) => void;
  onNavigateFocus: (blockId: string, direction: 'up' | 'down') => void;
  onTagClick?: (tag: string) => void;
  onWikiLinkClick?: (pageTitle: string) => void;
  onDragStartBlock?: (index: number) => void;
  onDragOverBlock?: (e: React.DragEvent, index: number) => void;
  onDropBlock?: (index: number) => void;
  isDragTarget?: boolean;
  isTargeted?: boolean;
  registerTextareaRef: (blockId: string, el: HTMLTextAreaElement | null) => void;
}

export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
  block,
  index,
  maxAllowedLevel,
  hasChildren,
  isFocused,
  canEdit,
  levelOffset = 0,
  onZoomBlock,
  onUpdateBlock,
  onCreateBlockBelow,
  onDeleteBlock,
  onIndentBlock,
  onNavigateFocus,
  onTagClick,
  onWikiLinkClick,
  onDragStartBlock,
  onDragOverBlock,
  onDropBlock,
  isDragTarget,
  isTargeted,
  registerTextareaRef,
}) => {
  const [localContent, setLocalContent] = useState<string>(block.content || '');
  const [slashSearch, setSlashSearch] = useState<string | null>(null);
  const [slashIndex, setSlashIndex] = useState(0);
  const [showLinkModal, setShowLinkModal] = useState<boolean>(false);

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const debounceTimerRef = useRef<number | null>(null);
  const latestBlockRef = useRef<DocumentBlock>(block);
  latestBlockRef.current = block;
  const localContentRef = useRef<string>(localContent);
  localContentRef.current = localContent;

  // Callback refs to avoid stale closures in setTimeout, debounce flush, and event listeners
  const onUpdateBlockRef = useRef(onUpdateBlock);
  onUpdateBlockRef.current = onUpdateBlock;
  const onCreateBlockBelowRef = useRef(onCreateBlockBelow);
  onCreateBlockBelowRef.current = onCreateBlockBelow;
  const onDeleteBlockRef = useRef(onDeleteBlock);
  onDeleteBlockRef.current = onDeleteBlock;
  const onIndentBlockRef = useRef(onIndentBlock);
  onIndentBlockRef.current = onIndentBlock;
  const onNavigateFocusRef = useRef(onNavigateFocus);
  onNavigateFocusRef.current = onNavigateFocus;

  // Track if this input currently has actual focus in an active browser window
  const isFocusedRef = useRef<boolean>(false);

  const flushDebounce = useCallback(
    (contentToFlush: string, overrides?: Partial<DocumentBlock>) => {
      if (debounceTimerRef.current !== null) {
        window.clearTimeout(debounceTimerRef.current);
        debounceTimerRef.current = null;
      }
      const nextBlock: DocumentBlock = {
        ...latestBlockRef.current,
        content: contentToFlush,
        ...overrides,
      };
      onUpdateBlockRef.current(nextBlock, true);
    },
    []
  );

  // Sync incoming remote changes ONLY when this textarea is NOT actively being edited
  // Condition: isFocusedRef.current === true && document.hasFocus()
  useEffect(() => {
    const isActivelyEditing =
      isFocusedRef.current === true &&
      typeof document !== 'undefined' &&
      document.hasFocus() &&
      textareaRef.current !== null &&
      document.activeElement === textareaRef.current;

    if (!isActivelyEditing && block.content !== localContentRef.current) {
      setLocalContent(block.content || '');
      localContentRef.current = block.content || '';
    }
  }, [block.content]);

  // Handle window blur / focus to instantly flush debounced input and clear zombie focus
  useEffect(() => {
    const handleWindowBlur = () => {
      if (debounceTimerRef.current !== null) {
        window.clearTimeout(debounceTimerRef.current);
        debounceTimerRef.current = null;
        flushDebounce(localContentRef.current);
      } else if (localContentRef.current !== latestBlockRef.current.content) {
        flushDebounce(localContentRef.current);
      }
      isFocusedRef.current = false;
    };

    const handleWindowFocus = () => {
      const isThisActive =
        textareaRef.current !== null &&
        document.activeElement === textareaRef.current &&
        document.hasFocus();
      isFocusedRef.current = isThisActive;
    };

    window.addEventListener('blur', handleWindowBlur);
    window.addEventListener('focus', handleWindowFocus);
    return () => {
      window.removeEventListener('blur', handleWindowBlur);
      window.removeEventListener('focus', handleWindowFocus);
    };
  }, [flushDebounce]);

  useEffect(() => {
    return () => {
      if (debounceTimerRef.current !== null) {
        window.clearTimeout(debounceTimerRef.current);
        debounceTimerRef.current = null;
      }
    };
  }, []);

  const adjustHeight = useCallback(() => {
    const el = textareaRef.current;
    if (!el) return;
    el.style.height = 'auto';
    el.style.height = `${Math.max(22, el.scrollHeight)}px`;
  }, []);

  useLayoutEffect(() => {
    adjustHeight();
  }, [localContent, block.type, block.level, adjustHeight]);

  useEffect(() => {
    window.addEventListener('resize', adjustHeight);
    return () => window.removeEventListener('resize', adjustHeight);
  }, [adjustHeight]);

  const filteredSlashCommands = useMemo(() => {
    if (slashSearch === null) return [];
    const q = slashSearch.toLowerCase();
    return SLASH_COMMANDS.filter(
      (c) => c.label.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
    );
  }, [slashSearch]);

  const applySlashCommand = (cmd: SlashCommand) => {
    setSlashSearch(null);
    const clean = localContent.replace(/\/([a-z0-9]*)$/i, '').trim();
    if (cmd.type === 'link') {
      setLocalContent(clean);
      setShowLinkModal(true);
      return;
    }
    setLocalContent(clean);
    flushDebounce(clean, {
      type: cmd.type,
      checked: cmd.type === 'todo' ? Boolean(block.checked) : false,
    });
  };

  const handleInsertLink = (linkMarkdown: string) => {
    setShowLinkModal(false);
    const cursor = textareaRef.current?.selectionStart ?? localContent.length;
    const before = localContent.slice(0, cursor);
    const after = localContent.slice(cursor);
    const newContent = `${before}${before && !before.endsWith(' ') ? ' ' : ''}${linkMarkdown}${after && !after.startsWith(' ') ? ' ' : ''}${after}`.trim();
    setLocalContent(newContent);
    flushDebounce(newContent);
  };

  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    if (!canEdit) return;
    let val = e.target.value;
    let typeOverride: BlockType | undefined;
    let checkedOverride: boolean | undefined;

    // Quick markdown shortcuts
    if (val.startsWith('[] ') || val.startsWith('[ ] ')) {
      val = val.replace(/^\[\s?\]\s/, '');
      typeOverride = 'todo';
      checkedOverride = false;
    } else if (val.startsWith('[x] ') || val.startsWith('[X] ')) {
      val = val.replace(/^\[[xX]\]\s/, '');
      typeOverride = 'todo';
      checkedOverride = true;
    } else if (val.startsWith('# ') && block.type !== 'h1') {
      val = val.slice(2);
      typeOverride = 'h1';
    } else if (val.startsWith('## ') && block.type !== 'h2') {
      val = val.slice(3);
      typeOverride = 'h2';
    } else if (val.startsWith('### ') && block.type !== 'h3') {
      val = val.slice(4);
      typeOverride = 'h3';
    }

    // Check for slash command invocation
    const slashMatch = val.match(/\/([a-z0-9]*)$/i);
    if (slashMatch) {
      setSlashSearch(slashMatch[1]);
      setSlashIndex(0);
    } else {
      setSlashSearch(null);
    }

    setLocalContent(val);

    if (debounceTimerRef.current !== null) {
      window.clearTimeout(debounceTimerRef.current);
    }

    if (typeOverride) {
      flushDebounce(val, {
        type: typeOverride,
        checked: checkedOverride ?? latestBlockRef.current.checked,
      });
      return;
    }

    debounceTimerRef.current = window.setTimeout(() => {
      debounceTimerRef.current = null;
      onUpdateBlockRef.current({
        ...latestBlockRef.current,
        content: val,
      });
    }, 150);
  };

  const handleFocus = () => {
    isFocusedRef.current = true;
  };

  const handleBlur = () => {
    isFocusedRef.current = false;
    if (debounceTimerRef.current !== null) {
      window.clearTimeout(debounceTimerRef.current);
      debounceTimerRef.current = null;
      flushDebounce(localContentRef.current);
    } else if (localContentRef.current !== latestBlockRef.current.content) {
      flushDebounce(localContentRef.current);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (!canEdit) return;

    // Slash command navigation
    if (slashSearch !== null && filteredSlashCommands.length > 0) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setSlashIndex((prev) => (prev + 1) % filteredSlashCommands.length);
        return;
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        setSlashIndex((prev) => (prev - 1 + filteredSlashCommands.length) % filteredSlashCommands.length);
        return;
      }
      if (e.key === 'Enter' || e.key === 'Tab') {
        e.preventDefault();
        const selected = filteredSlashCommands[slashIndex];
        if (selected) {
          applySlashCommand(selected);
        }
        return;
      }
      if (e.key === 'Escape') {
        e.preventDefault();
        setSlashSearch(null);
        return;
      }
    }

    // 1. Tab / Shift+Tab -> Strict Indent / Outdent
    if (e.key === 'Tab') {
      e.preventDefault();
      e.stopPropagation();
      flushDebounce(localContent);
      onIndentBlockRef.current(block.id, e.shiftKey ? -1 : 1);
      return;
    }

    // 2. Enter (without Shift) -> If block is completely empty and level > minLevel, outdent (Shift+Tab behaviour), otherwise create new block below
    if (e.key === 'Enter' && !e.shiftKey && block.type !== 'code') {
      e.preventDefault();
      e.stopPropagation();
      setSlashSearch(null);

      const minLevel = levelOffset || 0;
      if (localContent === '' && Math.max(0, block.level || 0) > minLevel) {
        flushDebounce(localContent);
        onIndentBlockRef.current(block.id, -1);
        return;
      }

      flushDebounce(localContent);
      onCreateBlockBelowRef.current(block.id, localContent);
      return;
    }

    // 3. Backspace on empty block -> IMMEDIATELY DELETE THE BLOCK (regardless of level)!
    // Outdenting is strictly done via Shift+Tab.
    if (e.key === 'Backspace' && localContent === '') {
      e.preventDefault();
      e.stopPropagation();
      setSlashSearch(null);
      if (debounceTimerRef.current !== null) {
        window.clearTimeout(debounceTimerRef.current);
        debounceTimerRef.current = null;
      }
      onDeleteBlockRef.current(block.id);
      return;
    }

    // 4. Arrow navigation between blocks
    if (e.key === 'ArrowUp' && !e.shiftKey && !e.altKey) {
      const el = textareaRef.current;
      if (el && el.selectionStart === 0 && el.selectionEnd === 0) {
        e.preventDefault();
        flushDebounce(localContent);
        onNavigateFocusRef.current(block.id, 'up');
      }
      return;
    }

    if (e.key === 'ArrowDown' && !e.shiftKey && !e.altKey) {
      const el = textareaRef.current;
      if (el && el.selectionStart === localContent.length && el.selectionEnd === localContent.length) {
        e.preventDefault();
        flushDebounce(localContent);
        onNavigateFocusRef.current(block.id, 'down');
      }
      return;
    }
  };

  const level = Math.max(0, block.level || 0);
  const visualLevel = Math.max(0, level - (levelOffset || 0));

  // Parse rich tokens (WikiLinks [[Page]], Markdown Links [Title](url), raw URLs, and #Tags)
  const tokens = useMemo(() => {
    const parts = (localContent || '').split(
      /(\[\[.*?\]\]|\[.*?\]\(https?:\/\/.*?\)|\bhttps?:\/\/[^\s]+|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g
    );
    return parts.filter(Boolean);
  }, [localContent]);

  const hasSpecialTokens = tokens.some(
    (t) =>
      t.startsWith('#') ||
      (t.startsWith('[[') && t.endsWith(']]')) ||
      /^\[(.*?)\]\((https?:\/\/.*?)\)$/.test(t) ||
      /^https?:\/\//.test(t)
  );

  return (
    <div
      className={`group relative flex items-start gap-1 py-1 px-1.5 rounded-card transition-all duration-300 ${
        isDragTarget
          ? 'border-t-2 border-accent bg-accent/10'
          : isTargeted
          ? 'bg-accent/15 ring-2 ring-accent'
          : isFocused
          ? 'bg-panel-elevated'
          : 'hover:bg-panel'
      }`}
      style={{
        paddingLeft: `${visualLevel * 22 + 4}px`,
      }}
      onDragOver={(e) => onDragOverBlock?.(e, index)}
      onDrop={() => onDropBlock?.(index)}
    >
      {/* Indentation Guide Line */}
      {visualLevel > 0 &&
        Array.from({ length: visualLevel }).map((_, lvlIdx) => (
          <div
            key={lvlIdx}
            className="pointer-events-none absolute top-0 bottom-0 w-px border-l border-border"
            style={{ left: `${lvlIdx * 22 + 12}px` }}
          />
        ))}

      {/* Bullet Controls: Collapse Toggle & Bullet (Drag-Handle & Zoom) / Checkbox */}
      <div className="flex items-center gap-0.5 pt-1 select-none shrink-0">
        {hasChildren ? (
          <button
            type="button"
            onClick={() =>
              flushDebounce(localContent, { collapsed: !block.collapsed })
            }
            className="p-0.5 text-muted hover:text-accent transition-colors"
            title={block.collapsed ? 'Unterpunkte ausklappen' : 'Unterpunkte einklappen'}
          >
            {block.collapsed ? (
              <ChevronRight className="w-3.5 h-3.5" />
            ) : (
              <ChevronDown className="w-3.5 h-3.5 text-accent" />
            )}
          </button>
        ) : (
          <span className="w-3.5" />
        )}

        {block.type === 'todo' ? (
          <button
            type="button"
            disabled={!canEdit}
            onClick={() =>
              flushDebounce(localContent, { checked: !block.checked })
            }
            className={`w-4 h-4 checkbox-square flex items-center justify-center transition-colors border ${
              block.checked
                ? 'bg-status-ok border-status-ok text-on-accent'
                : 'border-strong hover:border-accent text-transparent'
            }`}
            title={block.checked ? 'Als offen markieren' : 'Als erledigt markieren'}
          >
            <Check className="w-3 h-3 stroke-[3]" />
          </button>
        ) : (
          <button
            type="button"
            draggable={canEdit}
            onDragStart={() => canEdit && onDragStartBlock?.(index)}
            onClick={() => onZoomBlock?.(block.id)}
            className={`w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover group/bullet transition-transform ${
              canEdit ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
            }`}
            title={
              canEdit
                ? 'Ziehen zum Verschieben • Klick: Ast hineinzoomen (Fokus-Modus)'
                : 'Klick: In diesen Ast hineinzoomen (Fokus-Modus)'
            }
          >
            <span
              className={`w-1.5 h-1.5 rounded-full transition-all ${
                block.collapsed && hasChildren
                  ? 'bg-accent ring-2 ring-accent/30'
                  : isFocused
                  ? 'bg-accent scale-125'
                  : 'bg-faint group-hover/bullet:bg-accent group-hover/bullet:scale-125'
              }`}
            />
          </button>
        )}
      </div>

      {/* Main Block Content */}
      <div className="flex-1 min-w-0 pr-1 relative">
        {block.type === 'divider' ? (
          <div className="py-2">
            <hr className="border-t border-border" />
          </div>
        ) : block.type === 'code' ? (
          <div className="bg-code border border-border rounded-btn p-2 my-0.5">
            <div className="text-[10px] text-faint font-mono uppercase pb-1 flex justify-between">
              <span>Code</span>
              <button
                type="button"
                onClick={() => flushDebounce(localContent, { type: 'bullet' })}
                className="hover:text-accent"
              >
                Als Text
              </button>
            </div>
            <textarea
              ref={(el) => {
                textareaRef.current = el;
                registerTextareaRef(block.id, el);
              }}
              rows={1}
              value={localContent}
              readOnly={!canEdit}
              onFocus={handleFocus}
              onBlur={handleBlur}
              onChange={handleContentChange}
              onKeyDown={handleKeyDown}
              className="w-full resize-none font-mono text-xs bg-transparent text-status-ok border-0 focus:outline-none focus:ring-0 leading-relaxed"
            />
          </div>
        ) : block.type === 'callout' ? (
          <div className="bg-panel-elevated border-l-2 border-accent p-2 rounded-r-btn my-0.5">
            <textarea
              ref={(el) => {
                textareaRef.current = el;
                registerTextareaRef(block.id, el);
              }}
              rows={1}
              value={localContent}
              readOnly={!canEdit}
              onFocus={handleFocus}
              onBlur={handleBlur}
              onChange={handleContentChange}
              onKeyDown={handleKeyDown}
              className="w-full resize-none bg-transparent text-sm text-main border-0 focus:outline-none focus:ring-0 leading-relaxed italic"
            />
          </div>
        ) : (
          <div className="relative w-full">
            <textarea
              ref={(el) => {
                textareaRef.current = el;
                registerTextareaRef(block.id, el);
              }}
              rows={1}
              value={localContent}
              readOnly={!canEdit}
              onFocus={handleFocus}
              onBlur={handleBlur}
              onChange={handleContentChange}
              onKeyDown={handleKeyDown}
              placeholder={
                index === 0 && level === 0
                  ? 'Schreibe einen Punkt… (Enter = Neu, Tab = Einrücken, Shift+Tab = Ausrücken, / für Befehle)'
                  : ''
              }
              className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
                block.type === 'h1'
                  ? 'text-lg font-bold text-main tracking-tight'
                  : block.type === 'h2'
                  ? 'text-base font-semibold text-main'
                  : block.type === 'h3'
                  ? 'text-sm font-semibold text-main'
                  : block.type === 'todo' && block.checked
                  ? 'text-sm text-faint line-through'
                  : 'text-sm text-main'
              }`}
            />
          </div>
        )}

        {/* Rich Tokens Bar (Wiki-Links & #Tags) if present */}
        {hasSpecialTokens && !isFocused && (
          <div className="flex flex-wrap items-center gap-1 mt-0.5">
            {tokens.map((part, idx) => {
              if (part.startsWith('#') && part.length > 1) {
                const tag = part.slice(1);
                return (
                  <button
                    key={idx}
                    type="button"
                    onClick={() => onTagClick?.(tag)}
                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-accent bg-accent-dim hover:bg-accent/20 rounded-btn transition-colors"
                  >
                    <Hash className="w-2.5 h-2.5 opacity-80" />
                    <span>{tag}</span>
                  </button>
                );
              }
              if (part.startsWith('[[') && part.endsWith(']]')) {
                const page = part.slice(2, -2).trim();
                return (
                  <button
                    key={idx}
                    type="button"
                    onClick={() => onWikiLinkClick?.(page)}
                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-info bg-status-info/10 hover:bg-status-info/20 rounded-btn transition-colors"
                    title={`Notiz öffnen: ${page}`}
                  >
                    <FileText className="w-2.5 h-2.5 opacity-80" />
                    <span>{page}</span>
                  </button>
                );
              }
              const mdMatch = part.match(/^\[(.*?)\]\((https?:\/\/.*?)\)$/);
              if (mdMatch) {
                const label = mdMatch[1];
                const url = mdMatch[2];
                return (
                  <a
                    key={idx}
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
                    title={url}
                  >
                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
                    <span>{label || url}</span>
                  </a>
                );
              }
              if (/^https?:\/\//.test(part)) {
                return (
                  <a
                    key={idx}
                    href={part}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
                    title={part}
                  >
                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
                    <span className="truncate max-w-[160px]">{part}</span>
                  </a>
                );
              }
              return null;
            })}
          </div>
        )}

        {/* Floating Slash Commands Menu */}
        {slashSearch !== null && canEdit && (
          <div className="absolute left-0 top-8 z-40 w-56 panel-surface shadow-panel border border-border rounded-card p-1">
            <div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-faint border-b border-border mb-1">
              Befehl auswählen
            </div>
            <div className="max-h-48 overflow-y-auto space-y-0.5">
              {filteredSlashCommands.map((cmd, i) => (
                <button
                  key={cmd.type}
                  type="button"
                  onMouseDown={(e) => {
                    e.preventDefault();
                    applySlashCommand(cmd);
                  }}
                  className={`w-full text-left px-2 py-1 rounded-btn text-xs flex items-center justify-between transition-colors ${
                    i === slashIndex
                      ? 'bg-accent text-on-accent'
                      : 'text-main hover:bg-panel-elevated'
                  }`}
                >
                  <div className="flex items-center gap-1.5">
                    {cmd.icon}
                    <span className="font-semibold">{cmd.label}</span>
                  </div>
                  <span className="text-[10px] opacity-75">{cmd.desc}</span>
                </button>
              ))}
              {filteredSlashCommands.length === 0 && (
                <div className="p-2 text-center text-xs text-faint">
                  Kein Befehl gefunden
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Zoom / Focus button on hover */}
      <button
        type="button"
        onClick={() => onZoomBlock?.(block.id)}
        className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
        title="In diesen Ast hineinzoomen (Fokus-Modus)"
      >
        <Maximize2 className="w-3.5 h-3.5" />
      </button>

      {/* Delete button on hover */}
      {canEdit && (
        <button
          type="button"
          onClick={() => onDeleteBlockRef.current(block.id)}
          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0"
          title="Block löschen"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      )}

      {/* Link Insertion Modal */}
      {showLinkModal && (
        <LinkModal
          isOpen={showLinkModal}
          onClose={() => setShowLinkModal(false)}
          onInsertLink={handleInsertLink}
        />
      )}
    </div>
  );
};