/**
 * TASKMATE - Knowledge Manager
 * ============================
 * Wiki-Layout: Baum-Navigation + Content-Bereich
 */

import api from './api.js';
import { $, $$ } from './utils.js';
import store from './store.js';

class KnowledgeManager {
  constructor() {
    this.categories = [];
    this.allEntries = [];
    this.selectedEntryId = null;
    this.selectedCategoryId = null;
    this.expandedCategories = new Set();
    this.isEditing = false;
    this.editingEntryId = null;
    this.filterQuery = '';
    this.initialized = false;
    this.searchDebounceTimer = null;
  }

  async init() {
    console.log('[Knowledge] init() called, initialized:', this.initialized);

    if (this.initialized) {
      await this.loadData();
      return;
    }

    // DOM Elements - Layout
    this.knowledgeView = $('#view-knowledge');
    this.mobileCategories = $('#knowledge-mobile-categories');

    // DOM Elements - Sidebar
    this.sidebarSearch = $('#knowledge-sidebar-search');
    this.newCategoryBtn = $('#btn-new-category');
    this.tree = $('#knowledge-tree');
    this.treeEmpty = $('#knowledge-tree-empty');

    // DOM Elements - Content
    this.emptyState = $('#knowledge-empty');
    this.reader = $('#knowledge-reader');
    this.editor = $('#knowledge-editor');

    // Reader Elements
    this.readerTitle = $('#knowledge-reader-title');
    this.readerMeta = $('#knowledge-reader-meta');
    this.readerUrl = $('#knowledge-reader-url');
    this.readerBody = $('#knowledge-reader-body');
    this.readerAttachments = $('#knowledge-reader-attachments');
    this.editEntryBtn = $('#btn-edit-entry');
    this.deleteEntryReaderBtn = $('#btn-delete-entry-reader');

    // Editor Elements
    this.editorForm = $('#knowledge-editor-form');
    this.editorId = $('#knowledge-editor-id');
    this.editorCategoryId = $('#knowledge-editor-category-id');
    this.editorTitle = $('#knowledge-editor-title');
    this.editorTitleInput = $('#knowledge-editor-title-input');
    this.editorUrlInput = $('#knowledge-editor-url-input');
    this.editorNotes = $('#knowledge-editor-notes');
    this.editorAttachments = $('#knowledge-editor-attachments');
    this.editorAttachmentsList = $('#knowledge-editor-attachments-list');
    this.editorFileInput = $('#knowledge-editor-file-input');
    this.btnUploadFile = $('#btn-upload-file');
    this.btnCancelEditor = $('#btn-cancel-editor');

    // Category Modal Elements
    this.categoryModal = $('#knowledge-category-modal');
    this.categoryForm = $('#knowledge-category-form');
    this.categoryModalTitle = $('#knowledge-category-modal-title');
    this.categoryIdInput = $('#knowledge-category-id');
    this.categoryNameInput = $('#knowledge-category-name');
    this.categoryDescriptionInput = $('#knowledge-category-description');
    this.categoryColorInput = $('#knowledge-category-color');
    this.categoryIconInput = $('#knowledge-category-icon');

    // Icon Picker Elements
    this.iconPickerPreview = $('#icon-picker-preview');
    this.iconPreviewEmoji = $('#icon-preview-emoji');
    this.iconPickerSection = $('#icon-picker-section');

    this.bindEvents();
    this.initialized = true;
    console.log('[Knowledge] Initialization complete');

    await this.loadData();
  }

  bindEvents() {
    // Sidebar search
    this.sidebarSearch?.addEventListener('input', (e) => {
      this.filterQuery = e.target.value.trim().toLowerCase();
      this.renderTree();
    });

    // New Category Button
    this.newCategoryBtn?.addEventListener('click', () => {
      this.openCategoryModal();
    });

    // Category Form Submit
    this.categoryForm?.addEventListener('submit', (e) => this.handleCategorySubmit(e));

    // Modal close buttons
    this.categoryModal?.querySelectorAll('[data-close-modal]').forEach(btn => {
      btn.addEventListener('click', () => this.closeCategoryModal());
    });

    // Icon Picker Events
    this.bindIconPickerEvents();

    // Reader buttons
    this.editEntryBtn?.addEventListener('click', () => {
      if (this.selectedEntryId) {
        this.showEditor(this.selectedEntryId);
      }
    });

    this.deleteEntryReaderBtn?.addEventListener('click', () => {
      if (this.selectedEntryId) {
        this.deleteEntry(this.selectedEntryId);
      }
    });

    // Editor form
    this.editorForm?.addEventListener('submit', (e) => {
      e.preventDefault();
      this.saveEntry();
    });

    this.btnCancelEditor?.addEventListener('click', () => {
      if (this.editingEntryId) {
        this.showEntry(this.editingEntryId);
      } else {
        this.showEmptyState();
      }
    });

    // File upload
    this.btnUploadFile?.addEventListener('click', () => {
      this.editorFileInput?.click();
    });

    this.editorFileInput?.addEventListener('change', (e) => {
      this.handleFileUpload(e);
    });

    // Store subscription for realtime updates
    store.subscribe('knowledge', () => {
      this.loadData();
    });

    // Socket.io realtime events
    window.addEventListener('app:refresh', () => {
      if (this.knowledgeView && !this.knowledgeView.classList.contains('hidden')) {
        this.loadData();
      }
    });
  }

  // ==========================================
  // DATA LOADING
  // ==========================================

  async loadData() {
    try {
      const [categories, entriesResult] = await Promise.all([
        api.getKnowledgeCategories(),
        api.getKnowledgeEntries()
      ]);

      this.categories = categories;
      this.categories.sort((a, b) => (a.position || 0) - (b.position || 0));

      this.allEntries = Array.isArray(entriesResult) ? entriesResult : [];
      this.allEntries.sort((a, b) => (a.position || 0) - (b.position || 0));

      this.renderTree();
      this.renderMobileCategories();

      // Refresh current view if an entry is selected
      if (this.selectedEntryId && !this.isEditing) {
        const entry = this.allEntries.find(e => e.id === this.selectedEntryId);
        if (entry) {
          this.showEntry(this.selectedEntryId);
        } else {
          this.selectedEntryId = null;
          this.showEmptyState();
        }
      }
    } catch (error) {
      console.error('[Knowledge] Error loading data:', error);
      this.showToast('Fehler beim Laden der Wissensdatenbank', 'error');
    }
  }

  async loadEntryWithAttachments(entryId) {
    try {
      return await api.getKnowledgeEntry(entryId);
    } catch (error) {
      console.error('Error loading entry:', error);
      this.showToast('Fehler beim Laden des Eintrags', 'error');
      return null;
    }
  }

  // ==========================================
  // TREE RENDERING (Sidebar)
  // ==========================================

  getFilteredTree() {
    if (!this.filterQuery) {
      return this.categories.map(cat => ({
        ...cat,
        entries: this.allEntries.filter(e => e.categoryId === cat.id)
      }));
    }

    const q = this.filterQuery;
    return this.categories
      .map(cat => {
        const matchingEntries = this.allEntries.filter(e =>
          e.categoryId === cat.id &&
          (e.title.toLowerCase().includes(q) || (e.notes && e.notes.toLowerCase().includes(q)))
        );
        const catMatches = cat.name.toLowerCase().includes(q);
        if (catMatches || matchingEntries.length > 0) {
          return {
            ...cat,
            entries: catMatches
              ? this.allEntries.filter(e => e.categoryId === cat.id)
              : matchingEntries
          };
        }
        return null;
      })
      .filter(Boolean);
  }

  renderTree() {
    if (!this.tree) return;

    const treeData = this.getFilteredTree();

    if (treeData.length === 0) {
      this.tree.innerHTML = '';
      this.treeEmpty?.classList.remove('hidden');
      return;
    }

    this.treeEmpty?.classList.add('hidden');

    // If filtering, auto-expand all categories
    if (this.filterQuery) {
      treeData.forEach(cat => this.expandedCategories.add(cat.id));
    }

    this.tree.innerHTML = treeData.map(cat => {
      const isExpanded = this.expandedCategories.has(cat.id);
      const entries = cat.entries || [];
      const icon = cat.icon || '\u{1F4C1}';

      return `
        <div class="knowledge-tree-category ${isExpanded ? 'expanded' : ''}" data-category-id="${cat.id}">
          <div class="knowledge-tree-category-header" data-category-id="${cat.id}">
            <svg class="knowledge-tree-chevron" viewBox="0 0 24 24" width="16" height="16"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span class="knowledge-tree-category-icon">${icon}</span>
            <span class="knowledge-tree-category-name">${this.escapeHtml(cat.name)}</span>
            <span class="knowledge-tree-category-count">${entries.length}</span>
            <div class="knowledge-tree-category-actions">
              <button class="btn-icon" data-action="edit-category" data-id="${cat.id}" title="Bearbeiten">
                <svg viewBox="0 0 24 24" width="12" height="12"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
              </button>
              <button class="btn-icon btn-danger-hover" data-action="delete-category" data-id="${cat.id}" title="Loeschen">
                <svg viewBox="0 0 24 24" width="12" height="12"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
              </button>
            </div>
          </div>
          <div class="knowledge-tree-entries ${isExpanded ? '' : 'hidden'}">
            ${entries.map(entry => `
              <div class="knowledge-tree-entry ${entry.id === this.selectedEntryId ? 'active' : ''}" data-entry-id="${entry.id}">
                <span class="knowledge-tree-entry-title">${this.escapeHtml(entry.title)}</span>
              </div>
            `).join('')}
            <div class="knowledge-tree-new-entry" data-category-id="${cat.id}">
              <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
              Neuer Eintrag
            </div>
          </div>
        </div>
      `;
    }).join('');

    this.bindTreeEvents();
  }

  bindTreeEvents() {
    // Category headers - toggle expand
    this.tree.querySelectorAll('.knowledge-tree-category-header').forEach(header => {
      header.addEventListener('click', (e) => {
        if (e.target.closest('.knowledge-tree-category-actions')) return;
        const catId = parseInt(header.dataset.categoryId);
        this.toggleCategory(catId);
      });
    });

    // Category edit buttons
    this.tree.querySelectorAll('[data-action="edit-category"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        this.openCategoryModal(parseInt(btn.dataset.id));
      });
    });

    // Category delete buttons
    this.tree.querySelectorAll('[data-action="delete-category"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        this.handleDeleteCategory(parseInt(btn.dataset.id));
      });
    });

    // Entry items - show entry
    this.tree.querySelectorAll('.knowledge-tree-entry').forEach(item => {
      item.addEventListener('click', () => {
        const entryId = parseInt(item.dataset.entryId);
        this.showEntry(entryId);
      });
    });

    // New entry links
    this.tree.querySelectorAll('.knowledge-tree-new-entry').forEach(item => {
      item.addEventListener('click', () => {
        const categoryId = parseInt(item.dataset.categoryId);
        this.showEditor(null, categoryId);
      });
    });
  }

  toggleCategory(categoryId) {
    if (this.expandedCategories.has(categoryId)) {
      this.expandedCategories.delete(categoryId);
    } else {
      this.expandedCategories.add(categoryId);
    }
    this.renderTree();
  }

  // ==========================================
  // MOBILE CATEGORIES
  // ==========================================

  renderMobileCategories() {
    if (!this.mobileCategories) return;

    const chips = this.categories.map(cat => `
      <div class="knowledge-mobile-chip ${cat.id === this.selectedCategoryId ? 'active' : ''}"
           data-category-id="${cat.id}">
        <span class="chip-icon">${cat.icon || '\u{1F4C1}'}</span>
        <span class="chip-name">${this.escapeHtml(cat.name)}</span>
        <span class="chip-count">(${cat.entryCount || 0})</span>
      </div>
    `).join('');

    const addChip = `
      <div class="knowledge-mobile-chip knowledge-mobile-add" data-action="add-category">
        <span>+ Neu</span>
      </div>
    `;

    this.mobileCategories.innerHTML = chips + addChip;
    this.bindMobileChipEvents();
  }

  bindMobileChipEvents() {
    this.mobileCategories?.querySelectorAll('.knowledge-mobile-chip').forEach(chip => {
      if (chip.dataset.action === 'add-category') {
        chip.addEventListener('click', () => this.openCategoryModal());
      } else {
        const categoryId = parseInt(chip.dataset.categoryId);
        chip.addEventListener('click', () => {
          this.selectedCategoryId = categoryId;
          this.expandedCategories.add(categoryId);
          this.renderTree();
          this.renderMobileCategories();
        });
      }
    });
  }

  // ==========================================
  // CONTENT STATES
  // ==========================================

  showEmptyState() {
    this.isEditing = false;
    this.editingEntryId = null;
    this.selectedEntryId = null;
    this.emptyState?.classList.remove('hidden');
    this.reader?.classList.add('hidden');
    this.editor?.classList.add('hidden');
    this.renderTree();
  }

  async showEntry(entryId) {
    this.isEditing = false;
    this.editingEntryId = null;
    this.selectedEntryId = entryId;

    // Load full entry with attachments
    const entry = await this.loadEntryWithAttachments(entryId);
    if (!entry) {
      this.showEmptyState();
      return;
    }

    // Expand parent category
    if (entry.categoryId) {
      this.expandedCategories.add(entry.categoryId);
      this.selectedCategoryId = entry.categoryId;
    }

    // Update content area
    this.emptyState?.classList.add('hidden');
    this.editor?.classList.add('hidden');
    this.reader?.classList.remove('hidden');

    // Title
    if (this.readerTitle) {
      this.readerTitle.textContent = entry.title;
    }

    // Meta
    if (this.readerMeta) {
      const cat = this.categories.find(c => c.id === entry.categoryId);
      const catName = cat ? cat.name : 'Unbekannt';
      const catIcon = cat ? (cat.icon || '\u{1F4C1}') : '\u{1F4C1}';
      const date = entry.updatedAt || entry.createdAt;
      let dateStr = '';
      if (date) {
        const d = new Date(date);
        const day = String(d.getDate()).padStart(2, '0');
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const year = d.getFullYear();
        dateStr = `${day}.${month}.${year}`;
      }
      const creator = entry.creatorName || entry.creator_name || '';
      this.readerMeta.innerHTML = `
        <span>${catIcon} ${this.escapeHtml(catName)}</span>
        ${creator ? `<span>von ${this.escapeHtml(creator)}</span>` : ''}
        ${dateStr ? `<span>${dateStr}</span>` : ''}
      `;
    }

    // URL
    if (this.readerUrl) {
      if (entry.url && entry.url.trim()) {
        this.readerUrl.classList.remove('hidden');
        this.readerUrl.innerHTML = `
          <svg viewBox="0 0 24 24" width="16" height="16"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2" fill="none"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" fill="none"/></svg>
          <a href="${this.escapeHtml(entry.url)}" target="_blank" rel="noopener noreferrer">${this.escapeHtml(entry.url)}</a>
        `;
      } else {
        this.readerUrl.classList.add('hidden');
        this.readerUrl.innerHTML = '';
      }
    }

    // Body (Markdown)
    if (this.readerBody) {
      if (entry.notes && entry.notes.trim()) {
        this.readerBody.innerHTML = this.renderMarkdown(this.sanitizeHtml(entry.notes));
      } else {
        this.readerBody.innerHTML = '<p class="text-muted">Kein Inhalt vorhanden.</p>';
      }
    }

    // Attachments
    if (this.readerAttachments) {
      const attachments = entry.attachments || [];
      if (attachments.length > 0) {
        this.readerAttachments.classList.remove('hidden');
        this.readerAttachments.innerHTML = `
          <h3>Anhaenge (${attachments.length})</h3>
          ${attachments.map(att => `
            <a href="${api.getKnowledgeAttachmentDownloadUrl(att.id)}" class="knowledge-attachment-link" download>
              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
              <span>${this.escapeHtml(att.originalName || att.original_name || 'Datei')}</span>
              <span class="knowledge-attachment-size">${this.formatFileSize(att.sizeBytes || att.size_bytes || 0)}</span>
            </a>
          `).join('')}
        `;
      } else {
        this.readerAttachments.classList.add('hidden');
        this.readerAttachments.innerHTML = '';
      }
    }

    // Update tree to highlight active entry
    this.renderTree();
    this.renderMobileCategories();
  }

  async showEditor(entryId = null, categoryId = null) {
    this.isEditing = true;
    this.editingEntryId = entryId;

    this.emptyState?.classList.add('hidden');
    this.reader?.classList.add('hidden');
    this.editor?.classList.remove('hidden');

    // Reset form
    this.editorForm?.reset();
    if (this.editorId) this.editorId.value = '';
    if (this.editorCategoryId) this.editorCategoryId.value = '';

    if (entryId) {
      // Edit existing
      const entry = await this.loadEntryWithAttachments(entryId);
      if (!entry) return;

      if (this.editorTitle) this.editorTitle.textContent = 'Eintrag bearbeiten';
      if (this.editorId) this.editorId.value = entry.id;
      if (this.editorCategoryId) this.editorCategoryId.value = entry.categoryId;
      if (this.editorTitleInput) this.editorTitleInput.value = entry.title;
      if (this.editorUrlInput) this.editorUrlInput.value = entry.url || '';
      if (this.editorNotes) this.editorNotes.value = entry.notes || '';

      // Show attachments
      this.renderEditorAttachments(entry.attachments || []);
    } else {
      // New entry
      if (this.editorTitle) this.editorTitle.textContent = 'Neuer Eintrag';
      if (this.editorCategoryId) this.editorCategoryId.value = categoryId || this.selectedCategoryId || '';

      // Hide attachments for new entries
      if (this.editorAttachments) this.editorAttachments.classList.add('hidden');
    }

    this.editorTitleInput?.focus();
  }

  // ==========================================
  // ENTRY CRUD
  // ==========================================

  async saveEntry() {
    const entryId = this.editorId?.value ? parseInt(this.editorId.value) : null;
    const categoryId = parseInt(this.editorCategoryId?.value);
    const data = {
      categoryId: categoryId,
      title: this.editorTitleInput?.value.trim(),
      url: this.editorUrlInput?.value.trim() || null,
      notes: this.editorNotes?.value.trim() || null
    };

    if (!data.title) {
      this.showToast('Bitte einen Titel eingeben', 'error');
      return;
    }

    if (!data.categoryId) {
      this.showToast('Keine Kategorie ausgewaehlt', 'error');
      return;
    }

    try {
      let savedEntry;
      if (entryId) {
        savedEntry = await api.updateKnowledgeEntry(entryId, data);
        this.showToast('Eintrag aktualisiert', 'success');
      } else {
        savedEntry = await api.createKnowledgeEntry(data);
        this.showToast('Eintrag erstellt', 'success');
      }

      // Reload data
      await this.loadData();

      // Show the saved entry
      const id = savedEntry?.id || entryId;
      if (id) {
        this.showEntry(id);
      } else {
        this.showEmptyState();
      }
    } catch (error) {
      this.showToast(error.message || 'Fehler beim Speichern', 'error');
    }
  }

  async deleteEntry(entryId) {
    const entry = this.allEntries.find(e => e.id === entryId);
    const title = entry?.title || 'Dieser Eintrag';

    const confirmDelete = confirm(`"${title}" wirklich loeschen?`);
    if (!confirmDelete) return;

    try {
      await api.deleteKnowledgeEntry(entryId);
      this.showToast('Eintrag geloescht', 'success');

      this.selectedEntryId = null;
      await this.loadData();
      this.showEmptyState();
    } catch (error) {
      this.showToast(error.message || 'Fehler beim Loeschen', 'error');
    }
  }

  // ==========================================
  // EDITOR ATTACHMENTS
  // ==========================================

  renderEditorAttachments(attachments) {
    if (!this.editorAttachments || !this.editorAttachmentsList) return;

    if (!attachments || attachments.length === 0) {
      this.editorAttachments.classList.remove('hidden');
      this.editorAttachmentsList.innerHTML = '<p class="text-muted">Keine Anhaenge vorhanden</p>';
      return;
    }

    this.editorAttachments.classList.remove('hidden');
    this.editorAttachmentsList.innerHTML = attachments.map(att => `
      <div class="knowledge-editor-attachment-item" data-attachment-id="${att.id}">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
        <span class="attachment-name">${this.escapeHtml(att.originalName || att.original_name || 'Datei')}</span>
        <span class="attachment-size">${this.formatFileSize(att.sizeBytes || att.size_bytes || 0)}</span>
        <button type="button" class="btn-icon btn-danger-hover" data-action="delete-attachment" data-id="${att.id}" title="Loeschen">
          <svg viewBox="0 0 24 24" width="14" height="14"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
        </button>
      </div>
    `).join('');

    // Bind delete events
    this.editorAttachmentsList.querySelectorAll('[data-action="delete-attachment"]').forEach(btn => {
      btn.addEventListener('click', () => {
        this.handleDeleteAttachment(parseInt(btn.dataset.id));
      });
    });
  }

  async handleFileUpload(e) {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    const entryId = parseInt(this.editorId?.value);
    if (!entryId) {
      this.showToast('Speichern Sie zuerst den Eintrag, dann koennen Sie Dateien hochladen', 'info');
      e.target.value = '';
      return;
    }

    for (const file of files) {
      try {
        await api.uploadKnowledgeAttachment(entryId, file);
        this.showToast(`${file.name} hochgeladen`, 'success');
      } catch (error) {
        this.showToast(`Fehler beim Hochladen von ${file.name}`, 'error');
      }
    }

    e.target.value = '';

    // Reload entry attachments
    const entry = await this.loadEntryWithAttachments(entryId);
    if (entry) {
      this.renderEditorAttachments(entry.attachments);
    }
  }

  async handleDeleteAttachment(attachmentId) {
    const confirmDelete = confirm('Anhang wirklich loeschen?');
    if (!confirmDelete) return;

    try {
      await api.deleteKnowledgeAttachment(attachmentId);
      this.showToast('Anhang geloescht', 'success');

      // Reload entry attachments
      const entryId = parseInt(this.editorId?.value);
      if (entryId) {
        const entry = await this.loadEntryWithAttachments(entryId);
        if (entry) {
          this.renderEditorAttachments(entry.attachments);
        }
      }
    } catch (error) {
      this.showToast(error.message || 'Fehler beim Loeschen', 'error');
    }
  }

  // ==========================================
  // SEARCH (Header search integration)
  // ==========================================

  setSearchQuery(query) {
    clearTimeout(this.searchDebounceTimer);

    if (!query || !query.trim()) {
      this.filterQuery = '';
      if (this.sidebarSearch) this.sidebarSearch.value = '';
      this.renderTree();
      return;
    }

    this.searchDebounceTimer = setTimeout(() => {
      this.filterQuery = query.trim().toLowerCase();
      if (this.sidebarSearch) this.sidebarSearch.value = query.trim();
      this.renderTree();
    }, 300);
  }

  // ==========================================
  // CATEGORY CRUD
  // ==========================================

  openCategoryModal(categoryId = null) {
    const isEdit = !!categoryId;
    this.categoryModalTitle.textContent = isEdit ? 'Kategorie bearbeiten' : 'Neue Kategorie';
    this.categoryForm?.reset();

    // Hide icon picker section
    this.iconPickerSection?.classList.add('hidden');

    if (isEdit) {
      const category = this.categories.find(c => c.id === categoryId);
      if (category) {
        this.categoryIdInput.value = category.id;
        this.categoryNameInput.value = category.name;
        this.categoryDescriptionInput.value = category.description || '';
        this.categoryColorInput.value = category.color || '#3B82F6';
        const icon = category.icon || '\u{1F4C1}';
        this.categoryIconInput.value = icon;
        if (this.iconPreviewEmoji) {
          this.iconPreviewEmoji.textContent = icon;
        }
      }
    } else {
      this.categoryIdInput.value = '';
      this.categoryColorInput.value = '#3B82F6';
      this.categoryIconInput.value = '\u{1F4C1}';
      if (this.iconPreviewEmoji) {
        this.iconPreviewEmoji.textContent = '\u{1F4C1}';
      }
    }

    this.openModal(this.categoryModal, 'knowledge-category-modal');
    this.categoryNameInput?.focus();
  }

  closeCategoryModal() {
    this.closeModal(this.categoryModal, 'knowledge-category-modal');
  }

  async handleCategorySubmit(e) {
    e.preventDefault();

    const categoryId = this.categoryIdInput?.value ? parseInt(this.categoryIdInput.value) : null;
    const data = {
      name: this.categoryNameInput?.value.trim(),
      description: this.categoryDescriptionInput?.value.trim() || null,
      color: this.categoryColorInput?.value || '#3B82F6',
      icon: this.categoryIconInput?.value.trim() || null
    };

    if (!data.name) {
      this.showToast('Bitte einen Namen eingeben', 'error');
      return;
    }

    try {
      if (categoryId) {
        await api.updateKnowledgeCategory(categoryId, data);
        this.showToast('Kategorie aktualisiert', 'success');
      } else {
        await api.createKnowledgeCategory(data);
        this.showToast('Kategorie erstellt', 'success');
      }

      this.closeCategoryModal();
      await this.loadData();
    } catch (error) {
      this.showToast(error.message || 'Fehler beim Speichern', 'error');
    }
  }

  async handleDeleteCategory(categoryId) {
    const category = this.categories.find(c => c.id === categoryId);
    if (!category) return;

    const count = category.entryCount || 0;
    const msg = count > 0
      ? `Kategorie "${category.name}" mit ${count} Eintraegen loeschen? Dies kann nicht rueckgaengig gemacht werden.`
      : `Kategorie "${category.name}" loeschen? Dies kann nicht rueckgaengig gemacht werden.`;
    const confirmDelete = confirm(msg);
    if (!confirmDelete) return;

    try {
      await api.deleteKnowledgeCategory(categoryId);
      this.showToast('Kategorie geloescht', 'success');

      // If any entry from this category was selected, clear
      if (this.selectedCategoryId === categoryId) {
        this.selectedCategoryId = null;
        this.selectedEntryId = null;
        this.showEmptyState();
      }

      await this.loadData();
    } catch (error) {
      this.showToast(error.message || 'Fehler beim Loeschen', 'error');
    }
  }

  // ==========================================
  // ICON PICKER
  // ==========================================

  bindIconPickerEvents() {
    if (!this.iconPickerPreview || !this.iconPickerSection) return;

    this.iconPickerPreview.addEventListener('click', () => {
      this.iconPickerSection.classList.toggle('hidden');
    });

    const tabs = this.iconPickerSection.querySelectorAll('.icon-tab');
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        this.switchIconTab(tab.dataset.tab);
      });
    });

    const iconBtns = this.iconPickerSection.querySelectorAll('.icon-btn');
    iconBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        this.selectIcon(btn.dataset.icon);
      });
    });
  }

  switchIconTab(tabName) {
    if (!this.iconPickerSection) return;

    const tabs = this.iconPickerSection.querySelectorAll('.icon-tab');
    tabs.forEach(tab => {
      tab.classList.toggle('active', tab.dataset.tab === tabName);
    });

    const grids = this.iconPickerSection.querySelectorAll('.icon-grid');
    grids.forEach(grid => {
      grid.classList.toggle('hidden', grid.dataset.tabContent !== tabName);
    });
  }

  selectIcon(icon) {
    if (!icon) return;

    if (this.iconPreviewEmoji) {
      this.iconPreviewEmoji.textContent = icon;
    }

    if (this.categoryIconInput) {
      this.categoryIconInput.value = icon;
    }

    if (this.iconPickerSection) {
      this.iconPickerSection.classList.add('hidden');
    }
  }

  // ==========================================
  // MODAL HELPERS
  // ==========================================

  openModal(modal, modalId) {
    if (modal) {
      modal.classList.remove('hidden');
      modal.classList.add('visible');
    }
    const overlay = $('#modal-overlay');
    if (overlay) {
      overlay.classList.remove('hidden');
      overlay.classList.add('visible');
    }
    store.openModal(modalId);
  }

  closeModal(modal, modalId) {
    if (modal) {
      modal.classList.remove('visible');
      modal.classList.add('hidden');
    }
    const openModals = store.get('openModals').filter(id => id !== modalId);
    if (openModals.length === 0) {
      const overlay = $('#modal-overlay');
      if (overlay) {
        overlay.classList.remove('visible');
        overlay.classList.add('hidden');
      }
    }
    store.closeModal(modalId);
  }

  // ==========================================
  // MARKDOWN RENDERING
  // ==========================================

  sanitizeHtml(html) {
    if (!html) return '';
    let clean = html.replace(/<\s*(script|iframe|object|embed|form|style|link|meta|base)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '');
    clean = clean.replace(/<\s*(script|iframe|object|embed|form|style|link|meta|base)\b[^>]*\/?>/gi, '');
    clean = clean.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
    clean = clean.replace(/href\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi, 'href="#"');
    clean = clean.replace(/src\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi, 'src=""');
    return clean;
  }

  renderMarkdown(text) {
    if (!text) return '';

    let html = text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');

    // Code blocks
    html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
      return `<pre><code>${code.trim()}</code></pre>`;
    });

    // Inline code
    html = html.replace(/`([^`\n]+)`/g, '<code>$1</code>');

    // Headings
    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');

    // Bold
    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');

    // Italic
    html = html.replace(/(?<!\w)\*([^*\n]+)\*(?!\w)/g, '<em>$1</em>');
    html = html.replace(/(?<!\w)_([^_\n]+)_(?!\w)/g, '<em>$1</em>');

    // Links
    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');

    // Unordered lists
    html = html.replace(/^(?:- |\* )(.+)$/gm, '<li>$1</li>');
    html = html.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');

    // Ordered lists
    html = html.replace(/^\d+\. (.+)$/gm, '<oli>$1</oli>');
    html = html.replace(/((?:<oli>.*<\/oli>\n?)+)/g, (match) => {
      return '<ol>' + match.replace(/<\/?oli>/g, (tag) => tag.replace('oli', 'li')) + '</ol>';
    });

    // Paragraphs
    html = html.replace(/\n\n+/g, '</p><p>');

    // Line breaks
    html = html.replace(/(?<!<\/h[123]>|<\/li>|<\/ul>|<\/ol>|<\/pre>|<\/p>|<p>)\n(?!<h[123]|<li>|<ul>|<ol>|<pre>|<\/p>|<p>)/g, '<br>');

    // Wrap in paragraphs
    html = '<p>' + html + '</p>';

    // Clean empty paragraphs
    html = html.replace(/<p>\s*<\/p>/g, '');

    // Don't wrap block elements in <p>
    html = html.replace(/<p>\s*(<(?:h[123]|ul|ol|pre|blockquote)[\s>])/g, '$1');
    html = html.replace(/(<\/(?:h[123]|ul|ol|pre|blockquote)>)\s*<\/p>/g, '$1');

    return html;
  }

  // ==========================================
  // UTILITIES
  // ==========================================

  formatFileSize(bytes) {
    if (!bytes) return '0 B';
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
  }

  escapeHtml(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }

  showToast(message, type = 'info') {
    window.dispatchEvent(new CustomEvent('toast:show', {
      detail: { message, type }
    }));
  }

  // ==========================================
  // SHOW/HIDE
  // ==========================================

  show() {
    this.knowledgeView?.classList.remove('hidden');
    this.knowledgeView?.classList.add('active');
  }

  hide() {
    this.knowledgeView?.classList.add('hidden');
    this.knowledgeView?.classList.remove('active');
  }
}

// Create singleton instance
const knowledgeManager = new KnowledgeManager();

export { knowledgeManager };
export default knowledgeManager;