import React, { useEffect, useMemo, useRef, useState } from 'react';
import {
  Plus,
  Trash2,
  Users,
  Check,
  Radio,
  Sparkles,
  X,
  Hash,
} from 'lucide-react';
import { ListItem, SharedList, ListShare, Team, User, WSMessage } from '../../lib/types';
import { api, buildWebSocketURL, triggerHaptic } from '../../lib/api';
import { UnifiedShareModal } from '../../components/UnifiedShareModal';
import { useMobileActions } from '../../context/MobileActionContext';

interface SharedListsViewProps {
  onRefreshGlobal: () => void;
  currentUser?: User | null;
}

export function parseListItemInput(rawText: string, defaultQty?: string): {
  content: string;
  quantity: string;
  category?: string;
} {
  let text = rawText.trim();
  const hashtagRegex = /#([a-zA-Z0-9äöüÄÖÜß_-]+)/g;
  const matches = Array.from(text.matchAll(hashtagRegex));

  let category: string | undefined = undefined;
  if (matches.length > 0) {
    category = matches[0][1];
    text = text.replace(hashtagRegex, '').replace(/\s+/g, ' ').trim();
  }

  if (!text && matches.length > 0) {
    text = matches[0][1];
  }

  return {
    content: text,
    quantity: defaultQty?.trim() || '',
    category,
  };
}

export function getItemCategory(item: ListItem): string {
  if (item.category && item.category.trim()) {
    return item.category.trim().replace(/^#/, '');
  }
  const match = item.content.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/);
  if (match) {
    return match[1];
  }
  return '';
}

export function getItemDisplayContent(item: ListItem): string {
  if (item.content.includes('#')) {
    const cleaned = item.content.replace(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '').replace(/\s+/g, ' ').trim();
    if (cleaned) return cleaned;
  }
  return item.content;
}

export function deduplicateItems(items: ListItem[]): ListItem[] {
  const seen = new Set<string>();
  const result: ListItem[] = [];
  for (const item of items) {
    if (item && item.id && !seen.has(item.id)) {
      seen.add(item.id);
      result.push(item);
    }
  }
  return result;
}

export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGlobal, currentUser }) => {
  const { setGroups, setPrimaryAction } = useMobileActions();
  const [lists, setLists] = useState<SharedList[]>([]);
  const [activeListId, setActiveListId] = useState<string>('');

  const [newItemText, setNewItemText] = useState('');
  const [newItemQty, setNewItemQty] = useState('');
  const [isSubmittingItem, setIsSubmittingItem] = useState(false);

  const [wsConnected, setWsConnected] = useState(false);
  const [showNewListModal, setShowNewListModal] = useState(false);
  const [newListTitle, setNewListTitle] = useState('');
  const [newListIcon, setNewListIcon] = useState('🛒');

  const [showShareModal, setShowShareModal] = useState(false);
  const [collaborators, setCollaborators] = useState<User[]>([]);
  const [teams, setTeams] = useState<Team[]>([]);

  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
  const [suggestionIndex, setSuggestionIndex] = useState<number>(0);
  const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
  const [workspaceTags, setWorkspaceTags] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement | null>(null);

  const [draggingItemId, setDraggingItemId] = useState<string | null>(null);
  const [dragOverItemTarget, setDragOverItemTarget] = useState<{ itemId: string; position: 'before' | 'after' } | null>(null);
  const [dragOverCategoryTarget, setDragOverCategoryTarget] = useState<string | null>(null);

  const wsRef = useRef<WebSocket | null>(null);

  const loadLists = async () => {
    try {
      let all = await api.getAllLists();
      if (all.length === 0) {
        try {
          const created = await api.createList('Wocheneinkauf', '🛒', 'shopping');
          all = [created];
        } catch {
          // fallback
        }
      }
      const deduplicated = all.map((l) => ({
        ...l,
        items: deduplicateItems(l.items || []),
      }));
      setLists(deduplicated);
      if (deduplicated.length > 0 && (!activeListId || !deduplicated.some((l) => l.id === activeListId))) {
        setActiveListId(deduplicated[0].id);
      }
    } catch {
      // ignore
    }
  };

  useEffect(() => {
    loadLists();
    api
      .getWorkspaceTags()
      .then((tags) => {
        setWorkspaceTags(tags.map((t) => t.tag.replace(/^#/, '')));
      })
      .catch(() => {});
  }, []);

  const activeList = useMemo(() => {
    return lists.find((l) => l.id === activeListId) || lists[0] || null;
  }, [lists, activeListId]);

  useEffect(() => {
    if (!activeList?.id) return;

    if (wsRef.current) {
      wsRef.current.close();
    }

    let ws: WebSocket | null = null;
    try {
      ws = new WebSocket(buildWebSocketURL(activeList.id));
      wsRef.current = ws;

      ws.onopen = () => {
        setWsConnected(true);
      };

      ws.onclose = () => {
        setWsConnected(false);
      };

      ws.onmessage = (evt) => {
        try {
          const msg: WSMessage = JSON.parse(evt.data);
          const msgListId = msg.listId || (msg as any).list_id;
          if (msg.event === 'ITEM_CREATED' && msgListId) {
            const newItem: ListItem = msg.payload;
            if (!newItem || !newItem.id) return;
            setLists((prev) =>
              prev.map((l) => {
                if (l.id !== msgListId) return l;
                if (l.items.some((i) => i.id === newItem.id)) return l;
                return { ...l, items: deduplicateItems([newItem, ...l.items]) };
              })
            );
          } else if (msg.event === 'ITEM_TOGGLED' && msgListId) {
            const updatedItem: ListItem = msg.payload;
            setLists((prev) =>
              prev.map((l) => {
                if (l.id !== msgListId) return l;
                return {
                  ...l,
                  items: l.items.map((i) => (i.id === updatedItem.id ? updatedItem : i)),
                };
              })
            );
          } else if (msg.event === 'ITEM_DELETED' && msgListId) {
            const deletedId = msg.payload?.itemId;
            setLists((prev) =>
              prev.map((l) => {
                if (l.id !== msgListId) return l;
                return { ...l, items: l.items.filter((i) => i.id !== deletedId) };
              })
            );
          } else if (msg.event === 'LIST_CLEARED' && msgListId) {
            setLists((prev) =>
              prev.map((l) => {
                if (l.id !== msgListId) return l;
                return { ...l, items: l.items.filter((i) => !i.isCompleted) };
              })
            );
          } else if (
            msg.event === 'LIST_CREATED' ||
            msg.event === 'LIST_DELETED' ||
            msg.event === 'LIST_SHARED' ||
            msg.event === 'LIST_UNSHARED' ||
            msg.event === 'ITEM_REORDERED' ||
            msg.event === 'LIST_UPDATED'
          ) {
            loadLists();
          }
        } catch {
          // ignore malformed frames
        }
      };
    } catch {
      setWsConnected(false);
    }

    return () => {
      if (ws) ws.close();
    };
  }, [activeList?.id]);

  useEffect(() => {
    const handleGlobalWs = (e: any) => {
      const msg = e.detail;
      if (!msg) return;
      if (
        msg.event === 'LIST_SHARED' ||
        msg.event === 'LIST_UNSHARED' ||
        msg.event === 'LIST_CREATED' ||
        msg.event === 'LIST_DELETED' ||
        msg.event === 'ITEM_REORDERED' ||
        msg.event === 'LIST_UPDATED'
      ) {
        loadLists();
      }
    };
    window.addEventListener('mindsift:ws', handleGlobalWs);
    return () => window.removeEventListener('mindsift:ws', handleGlobalWs);
  }, []);

  const handleAddItem = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!activeList || !newItemText.trim() || isSubmittingItem) return;
    setIsSubmittingItem(true);
    triggerHaptic(15);

    setShowSuggestions(false);
    const parsed = parseListItemInput(newItemText, newItemQty);
    setNewItemText('');
    setNewItemQty('');
    setCursorPosition(null);

    try {
      const item = await api.createListItem(activeList.id, parsed.content, parsed.category, parsed.quantity);
      setLists((prev) =>
        prev.map((l) => {
          if (l.id !== activeList.id) return l;
          if (l.items.some((i) => i.id === item.id)) return l;
          return { ...l, items: deduplicateItems([item, ...l.items]) };
        })
      );
      onRefreshGlobal();
    } catch (err: any) {
      alert(err.message || 'Fehler beim Erstellen des Listeneintrags');
    } finally {
      setIsSubmittingItem(false);
    }
  };

  const handleToggleItem = async (item: ListItem) => {
    if (!activeList) return;
    triggerHaptic(10);
    const nextCompleted = !item.isCompleted;

    setLists((prev) =>
      prev.map((l) => {
        if (l.id !== activeList.id) return l;
        return {
          ...l,
          items: l.items.map((i) => (i.id === item.id ? { ...i, isCompleted: nextCompleted } : i)),
        };
      })
    );

    await api.toggleListItem(activeList.id, item.id, nextCompleted);
    onRefreshGlobal();
  };

  const handleDeleteItem = async (itemId: string) => {
    if (!activeList) return;
    triggerHaptic(15);
    setLists((prev) =>
      prev.map((l) =>
        l.id === activeList.id ? { ...l, items: l.items.filter((i) => i.id !== itemId) } : l
      )
    );
    await api.deleteListItem(activeList.id, itemId);
  };

  const handleClearCompleted = async () => {
    if (!activeList) return;
    triggerHaptic(20);
    await api.clearCompletedItems(activeList.id);
    setLists((prev) =>
      prev.map((l) =>
        l.id === activeList.id ? { ...l, items: l.items.filter((i) => !i.isCompleted) } : l
      )
    );
  };

  const handleItemDragStart = (e: React.DragEvent, item: ListItem) => {
    e.stopPropagation();
    e.dataTransfer.setData('application/mindsift-list-item-id', item.id);
    e.dataTransfer.setData('text/plain', item.id);
    e.dataTransfer.effectAllowed = 'move';
    setDraggingItemId(item.id);
  };

  const handleItemDragOver = (e: React.DragEvent, targetItemId: string) => {
    e.preventDefault();
    e.stopPropagation();
    if (!draggingItemId || draggingItemId === targetItemId) return;

    const rect = e.currentTarget.getBoundingClientRect();
    const position = e.clientY - rect.top < rect.height / 2 ? 'before' : 'after';

    if (
      !dragOverItemTarget ||
      dragOverItemTarget.itemId !== targetItemId ||
      dragOverItemTarget.position !== position
    ) {
      setDragOverItemTarget({ itemId: targetItemId, position });
    }
  };

  const handleItemDragLeave = (e: React.DragEvent, targetItemId: string) => {
    e.stopPropagation();
    if (dragOverItemTarget?.itemId === targetItemId) {
      setDragOverItemTarget(null);
    }
  };

  const handleDropOnItem = async (e: React.DragEvent, targetItem: ListItem, targetCategory: string) => {
    e.preventDefault();
    e.stopPropagation();

    const sourceId =
      e.dataTransfer.getData('application/mindsift-list-item-id') ||
      e.dataTransfer.getData('text/plain') ||
      draggingItemId;

    const position = dragOverItemTarget?.position || 'after';
    setDraggingItemId(null);
    setDragOverItemTarget(null);
    setDragOverCategoryTarget(null);

    if (!activeList || !sourceId || sourceId === targetItem.id) return;

    triggerHaptic(15);

    const sourceItem = activeList.items.find((i) => i.id === sourceId);
    if (!sourceItem) return;

    const targetCatNormalized = targetCategory.trim();
    const isCategoryChanged = (sourceItem.category || '').toLowerCase() !== targetCatNormalized.toLowerCase();

    let newCategory = sourceItem.category;
    let newContent = sourceItem.content;

    if (isCategoryChanged) {
      newCategory = targetCatNormalized;
      if (!targetCatNormalized) {
        newContent = newContent.replace(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '').replace(/\s+/g, ' ').trim();
      } else if (newContent.includes('#')) {
        newContent = newContent.replace(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g, `#${targetCatNormalized}`).trim();
      }
    }

    const remainingItems = activeList.items.filter((i) => i.id !== sourceId);
    const targetIndex = remainingItems.findIndex((i) => i.id === targetItem.id);
    if (targetIndex === -1) return;

    const insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
    const updatedSourceItem: ListItem = {
      ...sourceItem,
      category: newCategory,
      content: newContent,
    };

    const newItems = [...remainingItems];
    newItems.splice(insertIndex, 0, updatedSourceItem);

    const reorderPayload: { id: string; sortOrder: number; category?: string; content?: string }[] = [];
    newItems.forEach((it, idx) => {
      it.sortOrder = idx;
      if (it.id === sourceId) {
        reorderPayload.push({
          id: it.id,
          sortOrder: idx,
          category: newCategory,
          content: newContent,
        });
      } else {
        reorderPayload.push({
          id: it.id,
          sortOrder: idx,
        });
      }
    });

    setLists((prev) =>
      prev.map((l) => (l.id === activeList.id ? { ...l, items: newItems } : l))
    );

    try {
      await api.reorderListItems(activeList.id, reorderPayload);
    } catch {
      loadLists();
    }
  };

  const handleDropOnCategoryHeader = async (e: React.DragEvent, targetCategory: string) => {
    e.preventDefault();
    e.stopPropagation();

    const sourceId =
      e.dataTransfer.getData('application/mindsift-list-item-id') ||
      e.dataTransfer.getData('text/plain') ||
      draggingItemId;

    setDraggingItemId(null);
    setDragOverItemTarget(null);
    setDragOverCategoryTarget(null);

    if (!activeList || !sourceId) return;

    triggerHaptic(15);
    const sourceItem = activeList.items.find((i) => i.id === sourceId);
    if (!sourceItem) return;

    const targetCatNormalized = targetCategory.trim();
    let newCategory = targetCatNormalized;
    let newContent = sourceItem.content;

    if (!targetCatNormalized) {
      newContent = newContent.replace(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '').replace(/\s+/g, ' ').trim();
    } else if (newContent.includes('#')) {
      newContent = newContent.replace(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g, `#${targetCatNormalized}`).trim();
    }

    const updatedSourceItem: ListItem = {
      ...sourceItem,
      category: newCategory,
      content: newContent,
    };

    const remainingItems = activeList.items.filter((i) => i.id !== sourceId);
    const newItems = [updatedSourceItem, ...remainingItems];

    const reorderPayload = newItems.map((it, idx) => {
      it.sortOrder = idx;
      if (it.id === sourceId) {
        return {
          id: it.id,
          sortOrder: idx,
          category: newCategory,
          content: newContent,
        };
      }
      return { id: it.id, sortOrder: idx };
    });

    setLists((prev) =>
      prev.map((l) => (l.id === activeList.id ? { ...l, items: newItems } : l))
    );

    try {
      await api.reorderListItems(activeList.id, reorderPayload);
    } catch {
      loadLists();
    }
  };

  const handleCreateList = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newListTitle.trim()) return;
    const created = await api.createList(newListTitle.trim(), newListIcon, 'shopping');
    setNewListTitle('');
    setShowNewListModal(false);
    await loadLists();
    setActiveListId(created.id);
    onRefreshGlobal();
  };

  const handleDeleteList = async (listId: string) => {
    if (!window.confirm('Diese Liste wirklich löschen?')) return;
    try {
      await api.deleteList(listId);
      await loadLists();
      onRefreshGlobal();
    } catch (err: any) {
      alert(err.message || 'Liste konnte nicht gelöscht werden');
    }
  };

  const openShareModal = async () => {
    if (!activeList) return;
    setShowShareModal(true);
    try {
      const [usersList, teamsList, sharesList] = await Promise.all([
        api.getUsersDirectory ? api.getUsersDirectory().catch(() => api.getCollaborators().catch(() => [])) : api.getCollaborators().catch(() => []),
        api.getUserTeams().catch(() => []),
        api.getListShares(activeList.id).catch(() => []),
      ]);
      setCollaborators(usersList);
      setTeams(teamsList);
      setLists((prev) => prev.map((l) => (l.id === activeList.id ? { ...l, shares: sharesList } : l)));
    } catch {
      // ignore
    }
  };

  const allAvailableHashtags = useMemo(() => {
    const tagMap = new Map<string, string>();

    // 1. Collect from all lists and items (open and completed)
    for (const l of lists) {
      for (const item of l.items) {
        if (item.category && item.category.trim()) {
          const raw = item.category.trim().replace(/^#/, '');
          if (raw) {
            const lower = raw.toLowerCase();
            const existing = tagMap.get(lower);
            const formatted = raw.charAt(0).toUpperCase() + raw.slice(1);
            if (!existing || (raw[0] === raw[0].toUpperCase() && existing[0] === existing[0].toLowerCase())) {
              tagMap.set(lower, formatted);
            }
          }
        }
        if (item.content && item.content.includes('#')) {
          const matches = item.content.matchAll(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g);
          for (const m of matches) {
            const raw = m[1];
            const lower = raw.toLowerCase();
            const existing = tagMap.get(lower);
            const formatted = raw.charAt(0).toUpperCase() + raw.slice(1);
            if (!existing || (raw[0] === raw[0].toUpperCase() && existing[0] === existing[0].toLowerCase())) {
              tagMap.set(lower, formatted);
            }
          }
        }
      }
    }

    // 2. Also incorporate workspace tags
    for (const t of workspaceTags) {
      const raw = t.trim().replace(/^#/, '');
      if (raw) {
        const lower = raw.toLowerCase();
        if (!tagMap.has(lower)) {
          tagMap.set(lower, raw.charAt(0).toUpperCase() + raw.slice(1));
        }
      }
    }

    return Array.from(tagMap.values()).sort((a, b) =>
      a.localeCompare(b, 'de', { sensitivity: 'base' })
    );
  }, [lists, workspaceTags]);

  const activeHashtagQuery = useMemo(() => {
    if (!showSuggestions) return null;
    const pos = cursorPosition !== null ? cursorPosition : newItemText.length;
    const textBefore = newItemText.slice(0, pos);
    const match = textBefore.match(/(?:^|\s)#([a-zA-Z0-9äöüÄÖÜß_-]*)$/);
    if (!match) return null;
    return {
      query: match[1],
      matchIndex: match.index! + (match[0].startsWith(' ') ? 1 : 0),
      cursorPos: pos,
    };
  }, [newItemText, cursorPosition, showSuggestions]);

  const matchingSuggestions = useMemo(() => {
    if (!activeHashtagQuery) return [];
    const q = activeHashtagQuery.query.toLowerCase();
    if (!q) {
      return allAvailableHashtags;
    }
    const startsWithMatches: string[] = [];
    const containsMatches: string[] = [];
    for (const tag of allAvailableHashtags) {
      const lower = tag.toLowerCase();
      if (lower.startsWith(q)) {
        startsWithMatches.push(tag);
      } else if (lower.includes(q)) {
        containsMatches.push(tag);
      }
    }
    return [...startsWithMatches, ...containsMatches];
  }, [activeHashtagQuery, allAvailableHashtags]);

  const applySuggestion = (tag: string) => {
    if (!activeHashtagQuery) return;
    const before = newItemText.slice(0, activeHashtagQuery.matchIndex);
    const after = newItemText.slice(activeHashtagQuery.cursorPos);
    const newText = `${before}#${tag} ${after}`;
    setNewItemText(newText);
    setShowSuggestions(false);
    setSuggestionIndex(0);

    const newCursor = activeHashtagQuery.matchIndex + tag.length + 2; // '#' + tag + ' '
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
        inputRef.current.setSelectionRange(newCursor, newCursor);
        setCursorPosition(newCursor);
      }
    }, 10);
  };

  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (showSuggestions && activeHashtagQuery && matchingSuggestions.length > 0) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setSuggestionIndex((prev) => (prev + 1) % matchingSuggestions.length);
        return;
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        setSuggestionIndex((prev) => (prev - 1 + matchingSuggestions.length) % matchingSuggestions.length);
        return;
      }
      if (e.key === 'Enter' || e.key === 'Tab') {
        e.preventDefault();
        const selected = matchingSuggestions[suggestionIndex] || matchingSuggestions[0];
        if (selected) {
          applySuggestion(selected);
        }
        return;
      }
      if (e.key === 'Escape') {
        e.preventDefault();
        setShowSuggestions(false);
        return;
      }
    }
  };

  const safeActiveItems = useMemo(() => deduplicateItems(activeList?.items || []), [activeList?.items]);
  const openItems = useMemo(() => safeActiveItems.filter((i) => !i.isCompleted), [safeActiveItems]);
  const completedItems = useMemo(() => safeActiveItems.filter((i) => i.isCompleted), [safeActiveItems]);

  const groupedOpenItems = useMemo(() => {
    const groupsMap = new Map<string, ListItem[]>();
    const canonicalMap = new Map<string, string>();
    const uncategorized: ListItem[] = [];

    for (const item of openItems) {
      const cat = getItemCategory(item);
      if (!cat) {
        uncategorized.push(item);
      } else {
        const key = cat.toLowerCase();
        const list = groupsMap.get(key) || [];
        list.push(item);
        groupsMap.set(key, list);

        const currentCanonical = canonicalMap.get(key);
        if (!currentCanonical) {
          const formatted = cat.charAt(0).toUpperCase() + cat.slice(1);
          canonicalMap.set(key, formatted);
        } else if (cat[0] === cat[0].toUpperCase() && currentCanonical[0] === currentCanonical[0].toLowerCase()) {
          canonicalMap.set(key, cat);
        }
      }
    }

    const sortedKeys = Array.from(groupsMap.keys()).sort((a, b) => {
      const labelA = canonicalMap.get(a) || a;
      const labelB = canonicalMap.get(b) || b;
      return labelA.localeCompare(labelB, 'de', { sensitivity: 'base' });
    });

    const result: { category: string; label: string; items: ListItem[] }[] = [];

    for (const key of sortedKeys) {
      const displayLabel = canonicalMap.get(key) || key;
      result.push({
        category: key,
        label: `#${displayLabel}`,
        items: groupsMap.get(key)!,
      });
    }

    if (uncategorized.length > 0) {
      result.push({
        category: '',
        label: result.length > 0 ? 'Allgemein' : '',
        items: uncategorized,
      });
    }

    return result;
  }, [openItems]);

  // Register context-sensitive mobile menu groups behind the MindSift logo
  useEffect(() => {
    setPrimaryAction(() => {
      setTimeout(() => {
        inputRef.current?.focus();
        inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }, 60);
    });

    setGroups([
      {
        id: 'lists-actions',
        title: 'Aktionen',
        items: [
          {
            id: 'list-new-item',
            label: 'Neuen Eintrag hinzufügen',
            icon: <Plus className="w-4 h-4 text-accent" />,
            variant: 'accent',
            onClick: () => {
              setTimeout(() => {
                inputRef.current?.focus();
                inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
              }, 60);
            },
          },
          {
            id: 'list-new-list',
            label: 'Neue Einkaufsliste erstellen',
            icon: <Plus className="w-4 h-4" />,
            onClick: () => setShowNewListModal(true),
          },
          ...(activeList
            ? [
                {
                  id: 'list-share',
                  label: `Liste "${activeList.title}" teilen`,
                  icon: <Users className="w-4 h-4" />,
                  onClick: () => openShareModal(),
                },
              ]
            : []),
          ...(completedItems.length > 0
            ? [
                {
                  id: 'list-clear-completed',
                  label: `Erledigte aufräumen (${completedItems.length})`,
                  icon: <Sparkles className="w-4 h-4" />,
                  onClick: () => handleClearCompleted(),
                },
              ]
            : []),
          ...(activeList && lists.length > 1
            ? [
                {
                  id: 'list-delete',
                  label: `Liste "${activeList.title}" löschen`,
                  icon: <Trash2 className="w-4 h-4" />,
                  variant: 'danger' as const,
                  onClick: () => handleDeleteList(activeList.id),
                },
              ]
            : []),
        ],
      },
      {
        id: 'lists-switcher',
        title: 'Einkaufslisten wechseln',
        items: lists.map((lst) => {
          const openCount = deduplicateItems(lst.items || []).filter((i) => !i.isCompleted).length;
          return {
            id: `select-list-${lst.id}`,
            label: lst.title,
            icon: <span className="text-base">{lst.icon}</span>,
            badge: openCount > 0 ? openCount : undefined,
            active: activeList?.id === lst.id,
            onClick: () => setActiveListId(lst.id),
          };
        }),
      },
    ]);
  }, [lists, activeList, completedItems.length, setGroups, setPrimaryAction]);

  return (
    <div className="w-full space-y-3">
      {/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
        <div className="flex items-center gap-2 min-w-0">
          <span className="text-sm font-semibold text-main truncate">
            {activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
          </span>
          {openItems.length > 0 && (
            <span className="badge-neutral text-[11px] flex-shrink-0">
              {openItems.length} offen
            </span>
          )}
        </div>
        <div className="flex items-center gap-1.5 flex-shrink-0">
          {activeList && (
            <button
              type="button"
              onClick={openShareModal}
              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
              title="Liste teilen"
            >
              <Users className="w-4 h-4 text-accent" />
            </button>
          )}
          <div
            className={`h-9 w-9 flex items-center justify-center rounded-btn border ${
              wsConnected
                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
                : 'bg-canvas border-border text-muted'
            }`}
            title={wsConnected ? 'Live synchronisiert (Online)' : 'Offline'}
          >
            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
          </div>
        </div>
      </div>

      {/* Top Header: List Tabs & Actions (Desktop) */}
      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
        {/* List Tabs */}
        <div className="flex flex-wrap items-center gap-1">
          {lists.map((lst) => {
            const openCount = deduplicateItems(lst.items || []).filter((i) => !i.isCompleted).length;
            const isSelected = activeList?.id === lst.id;
            return (
              <div key={lst.id} className="relative group flex items-center">
                <button
                  onClick={() => setActiveListId(lst.id)}
                  className={`h-8 px-3 text-xs font-medium border flex items-center gap-1.5 transition-colors ${
                    isSelected
                      ? 'bg-panel border-accent text-main'
                      : 'bg-canvas border-border text-muted hover:text-main'
                  } ${isSelected && lists.length > 1 ? 'rounded-l-btn rounded-r-none border-r-0' : 'rounded-btn'}`}
                >
                  <span>{lst.icon}</span>
                  <span>{lst.title}</span>
                  {openCount > 0 && (
                    <span className="ml-1 badge-neutral">{openCount}</span>
                  )}
                </button>
                {isSelected && lists.length > 1 && (
                  <button
                    onClick={() => handleDeleteList(lst.id)}
                    title="Liste löschen"
                    className="h-8 px-2 bg-panel border-y border-r border-accent text-faint hover:text-status-err hover:bg-status-err/10 rounded-r-btn flex items-center justify-center transition-colors cursor-pointer"
                  >
                    <X className="w-3 h-3" />
                  </button>
                )}
              </div>
            );
          })}

          <button
            onClick={() => setShowNewListModal((prev) => !prev)}
            className="h-8 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors"
            title="Neue Liste anlegen"
          >
            <Plus className="w-3.5 h-3.5" />
            <span>Neue Liste</span>
          </button>
        </div>

        {/* Right Header Section: Geteilt Badge, Icon-Only Share Button & Live Sync */}
        <div className="flex items-center gap-2">
          {activeList && (() => {
            const isOwner = activeList.isOwner !== false && (activeList.userId === currentUser?.id || !activeList.userId || currentUser?.role === 'admin');
            const sharesCount = activeList.shares?.length || 0;
            const isShared = sharesCount > 0;
            const ownerDisplayName = activeList.ownerName || 'Eigentümer';

            return (
              <div className="flex items-center gap-1.5">
                {isShared && (
                  isOwner ? (
                    <button
                      type="button"
                      onClick={openShareModal}
                      className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
                      title="Teilen-Menü öffnen: Geteilt mit Nutzern/Gruppen anzeigen & verwalten"
                    >
                      <Users className="w-2.5 h-2.5" />
                      <span>Geteilt ({sharesCount})</span>
                    </button>
                  ) : (
                    <button
                      type="button"
                      onClick={openShareModal}
                      className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
                      title="Teilen & Berechtigungen öffnen"
                    >
                      <Users className="w-2.5 h-2.5" />
                      <span>Geteilt von {ownerDisplayName}</span>
                    </button>
                  )
                )}

                <button
                  type="button"
                  onClick={openShareModal}
                  className="btn-icon"
                  title="Liste teilen und Berechtigungen"
                >
                  <Users className="w-3.5 h-3.5" />
                </button>
              </div>
            );
          })()}

          {/* Live Sync Status */}
          <div
            className={`h-8 w-8 flex items-center justify-center rounded-btn border ${
              wsConnected
                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
                : 'bg-canvas border-border text-muted'
            }`}
            title={wsConnected ? 'Live synchronisiert (Online)' : 'Offline'}
          >
            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
          </div>
        </div>
      </div>

      {showNewListModal && (
        <form
          onSubmit={handleCreateList}
          className="p-2 panel-surface flex flex-wrap items-center gap-2"
        >
          <div className="flex items-center gap-1.5">
            {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
              <button
                key={ic}
                type="button"
                onClick={() => setNewListIcon(ic)}
                className={`w-9 h-9 flex items-center justify-center rounded-btn transition-colors ${
                  newListIcon === ic
                    ? 'bg-accent/20 border border-accent text-accent'
                    : 'bg-canvas hover:bg-panel-elevated border border-border'
                }`}
              >
                {ic}
              </button>
            ))}
          </div>
          <input
            type="text"
            value={newListTitle}
            onChange={(e) => setNewListTitle(e.target.value)}
            placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
            className="flex-1 h-9 px-3 input-field text-sm"
            autoFocus
          />
          <button
            type="submit"
            className="btn-primary h-9 px-4 text-xs sm:text-sm"
          >
            Liste erstellen
          </button>
        </form>
      )}

      {/* Active Shared List View */}
      {activeList ? (
        <div className="space-y-4">
          {/* Quick-Add Form */}
          <form
            onSubmit={handleAddItem}
            className="flex flex-col sm:flex-row items-center gap-2 panel-surface p-2 sm:p-1.5 relative"
          >
            <div className="relative flex items-center gap-2 flex-1 w-full px-1.5">
              <Plus className="w-4 h-4 text-accent flex-shrink-0" />
              <input
                ref={inputRef}
                type="text"
                value={newItemText}
                onChange={(e) => {
                  setNewItemText(e.target.value);
                  setCursorPosition(e.target.selectionStart);
                  setShowSuggestions(true);
                  setSuggestionIndex(0);
                }}
                onKeyDown={handleInputKeyDown}
                onSelect={(e) => {
                  setCursorPosition(e.currentTarget.selectionStart);
                }}
                onFocus={(e) => {
                  setCursorPosition(e.target.selectionStart);
                  setShowSuggestions(true);
                }}
                onBlur={() => {
                  setTimeout(() => setShowSuggestions(false), 200);
                }}
                placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal)…`}
                className="flex-1 bg-transparent py-1.5 sm:py-1 text-sm text-main placeholder-faint focus:outline-none"
              />

              {/* Hashtag Autocomplete Suggestions Dropdown */}
              {showSuggestions && activeHashtagQuery && matchingSuggestions.length > 0 && (
                <div className="absolute left-6 top-full mt-2 w-64 max-h-56 overflow-y-auto bg-panel-elevated border border-border rounded-btn shadow-xl py-1 z-50 animate-in fade-in zoom-in-95 duration-100">
                  <div className="px-2.5 py-1 text-[10px] uppercase font-semibold text-faint tracking-wider border-b border-border/50">
                    Hashtags
                  </div>
                  {matchingSuggestions.map((tag, idx) => {
                    const isSelected = idx === suggestionIndex;
                    return (
                      <button
                        key={tag}
                        type="button"
                        onMouseDown={(e) => {
                          e.preventDefault();
                          applySuggestion(tag);
                        }}
                        className={`w-full text-left px-3 py-2 sm:py-1.5 text-xs flex items-center justify-between transition-colors ${
                          isSelected
                            ? 'bg-accent/20 text-accent font-medium'
                            : 'text-main hover:bg-panel-hover'
                        }`}
                      >
                        <span className="flex items-center gap-1.5">
                          <span className="text-accent font-mono font-semibold">#</span>
                          <span>{tag}</span>
                        </span>
                        {isSelected && (
                          <span className="text-[10px] text-faint font-mono">↵</span>
                        )}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="flex items-center gap-1.5 w-full sm:w-auto justify-end px-1 sm:px-0">
              <input
                type="text"
                value={newItemQty}
                onChange={(e) => setNewItemQty(e.target.value)}
                placeholder="Menge (z.B. 2x)"
                className="flex-1 sm:flex-none sm:w-28 h-9 sm:h-7 px-2.5 sm:px-2 input-field text-xs"
              />
              <button
                type="submit"
                disabled={isSubmittingItem || !newItemText.trim()}
                className="btn-primary h-9 sm:h-7 px-3.5 sm:px-3 text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1 flex-shrink-0"
              >
                {isSubmittingItem ? 'Wird hinzugefügt…' : 'Hinzufügen'}
              </button>
            </div>
          </form>

          {/* Open Items Grouped by Hashtags / Categories */}
          {openItems.length === 0 ? (
            <div className="p-8 text-center text-muted text-sm space-y-1 panel-surface">
              <p className="font-medium text-main flex items-center justify-center gap-1.5">
                <Sparkles className="w-4 h-4 text-accent" />
                <span>Alles erledigt</span>
              </p>
              <p className="text-xs text-faint">Keine offenen Punkte auf dieser Liste.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {groupedOpenItems.map((group) => (
                <div key={group.category || 'uncategorized'} className="space-y-1.5">
                  {/* Category Group Header: white text directly on canvas background */}
                  {group.label && (
                    <div className="flex items-center justify-between px-1">
                      <span className="text-xs font-semibold text-main tracking-wide">
                        {group.label}
                      </span>
                      <span className="badge-neutral font-mono text-[10px]">
                        {group.items.length}
                      </span>
                    </div>
                  )}

                  {/* Lighter panel-surface card container with items */}
                  <div
                    onDragOver={(e) => {
                      e.preventDefault();
                      if (draggingItemId) setDragOverCategoryTarget(group.category);
                    }}
                    onDragLeave={() => {
                      if (dragOverCategoryTarget === group.category) setDragOverCategoryTarget(null);
                    }}
                    onDrop={(e) => handleDropOnCategoryHeader(e, group.category)}
                    className={`panel-surface divide-y divide-border overflow-hidden transition-all ${
                      dragOverCategoryTarget === group.category && !dragOverItemTarget
                        ? 'ring-2 ring-accent/60 bg-accent/5'
                        : ''
                    }`}
                  >
                    {group.items.map((item) => {
                      const cat = getItemCategory(item);
                      const displayContent = getItemDisplayContent(item);
                      const isDragging = draggingItemId === item.id;
                      const isTarget = dragOverItemTarget?.itemId === item.id;

                      return (
                        <div
                          key={item.id}
                          draggable
                          onDragStart={(e) => handleItemDragStart(e, item)}
                          onDragEnd={() => {
                            setDraggingItemId(null);
                            setDragOverItemTarget(null);
                            setDragOverCategoryTarget(null);
                          }}
                          onDragOver={(e) => handleItemDragOver(e, item.id)}
                          onDragLeave={(e) => handleItemDragLeave(e, item.id)}
                          onDrop={(e) => handleDropOnItem(e, item, group.category)}
                          onClick={() => handleToggleItem(item)}
                          className={`px-3.5 py-3.5 sm:px-3 sm:py-2.5 flex items-center justify-between gap-3 cursor-pointer cursor-grab active:cursor-grabbing select-none transition-colors hover:bg-panel-hover group relative ${
                            isDragging ? 'opacity-30 border border-dashed border-accent/40' : ''
                          }`}
                        >
                          {/* Drop insertion line indicator */}
                          {isTarget && dragOverItemTarget.position === 'before' && (
                            <div className="absolute top-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
                          )}
                          {isTarget && dragOverItemTarget.position === 'after' && (
                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
                          )}

                          <div className="flex items-center gap-3 sm:gap-2.5 min-w-0 flex-1">
                            {/* Eckiges Abhaken */}
                            <button
                              type="button"
                              draggable={false}
                              onMouseDown={(e) => e.stopPropagation()}
                              onClick={(e) => {
                                e.stopPropagation();
                                handleToggleItem(item);
                              }}
                              className={`w-5 h-5 sm:w-4 sm:h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
                                item.isCompleted
                                  ? 'bg-status-ok border-status-ok text-on-accent'
                                  : 'border-strong hover:border-accent text-transparent'
                              }`}
                              title={item.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
                            >
                              <Check className="w-3.5 h-3.5 sm:w-3 sm:h-3 stroke-[3]" />
                            </button>

                            <span className="text-sm font-medium text-main truncate">
                              {displayContent}
                            </span>

                            {item.quantity && (
                              <span className="badge-accent">
                                {item.quantity}
                              </span>
                            )}

                            {cat && !group.label && (
                              <span className="px-1.5 py-0.5 text-[10px] font-medium text-accent bg-accent/10 border border-accent/25 rounded-md">
                                #{cat}
                              </span>
                            )}
                          </div>

                          <button
                            type="button"
                            draggable={false}
                            onMouseDown={(e) => e.stopPropagation()}
                            onClick={(e) => {
                              e.stopPropagation();
                              handleDeleteItem(item.id);
                            }}
                            className="btn-icon btn-icon-danger p-2 sm:p-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
                            title="Eintrag löschen"
                          >
                            <Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                          </button>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Completed Items Section */}
          {completedItems.length > 0 && (
            <div className="space-y-1.5 pt-2">
              <div className="flex items-center justify-between px-1">
                <span className="text-xs font-semibold text-muted uppercase tracking-wider">
                  Erledigt ({completedItems.length})
                </span>
                <button
                  onClick={handleClearCompleted}
                  className="btn-action min-h-[36px] sm:min-h-0 text-xs"
                >
                  Erledigte aufräumen
                </button>
              </div>

              <div className="panel-surface divide-y divide-border opacity-70 overflow-hidden">
                {completedItems.map((item) => {
                  const displayContent = getItemDisplayContent(item);

                  return (
                    <div
                      key={item.id}
                      onClick={() => handleToggleItem(item)}
                      className="px-3.5 py-3 sm:px-3 sm:py-2 flex items-center justify-between gap-3 cursor-pointer hover:bg-panel-hover transition-colors group"
                    >
                      <div className="flex items-center gap-3 min-w-0 flex-1">
                        {/* Eckiges Abhaken */}
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleToggleItem(item);
                          }}
                          className="w-5 h-5 sm:w-4 sm:h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border bg-status-ok border-status-ok text-on-accent"
                          title="Als offen markieren"
                        >
                          <Check className="w-3.5 h-3.5 sm:w-3 sm:h-3 stroke-[3]" />
                        </button>

                        <span className="text-sm text-faint line-through truncate">
                          {displayContent}
                        </span>

                        {item.quantity && (
                          <span className="text-xs text-faint">({item.quantity})</span>
                        )}
                      </div>

                      <div className="flex items-center gap-2">
                        {item.completedByName && (
                          <span className="text-xs text-faint">✓ {item.completedByName}</span>
                        )}
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDeleteItem(item.id);
                          }}
                          className="btn-icon btn-icon-danger p-2 sm:p-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
                          title="Löschen"
                        >
                          <Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      ) : null}

      {/* Unified Shopping List Sharing Modal */}
      {showShareModal && activeList && (
        <UnifiedShareModal
          isOpen={showShareModal}
          onClose={() => setShowShareModal(false)}
          title={`Liste teilen: ${activeList.title}`}
          resourceName={activeList.title}
          resourceIcon={activeList.icon || '🛒'}
          isOwner={activeList.isOwner !== false && (activeList.userId === currentUser?.id || !activeList.userId || currentUser?.role === 'admin')}
          currentUserId={currentUser?.id}
          shares={(activeList.shares || []).map((s) => ({
            id: s.id,
            targetType: s.targetType,
            targetId: s.targetId,
            targetName: s.targetName || (s.targetType === 'team' ? 'Gruppe' : 'Benutzer'),
            targetEmail: s.targetEmail,
            permission: s.role === 'viewer' ? ('viewer' as const) : ('editor' as const),
            role: s.role,
            createdAt: s.createdAt,
          }))}
          teams={teams}
          collaborators={collaborators}
          allowRoleSelection={true}
          onAddShare={async (targetType, targetId, permission) => {
            await api.addListShare(activeList.id, {
              targetType,
              targetId,
              role: permission,
            });
            const freshShares = await api.getListShares(activeList.id);
            setLists((prev) =>
              prev.map((l) => (l.id === activeList.id ? { ...l, shares: freshShares } : l))
            );
            onRefreshGlobal();
          }}
          onRemoveShare={async (shareId) => {
            await api.removeListShare(activeList.id, shareId);
            const freshShares = await api.getListShares(activeList.id);
            setLists((prev) =>
              prev.map((l) => (l.id === activeList.id ? { ...l, shares: freshShares } : l))
            );
            onRefreshGlobal();
          }}
        />
      )}
    </div>
  );
};