/* ── Obsidian Vault Reader ─────────────────────────────────────────────
 * File tree navigation, markdown rendering, wiki-links, search.
 * Relies on server.py's /api/vault/* endpoints.
 */

const VAULT_API = '/api/vault';

// ── Markdown Renderer ────────────────────────────────────────────────
function escapeHtml(text) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(text));
    return div.innerHTML;
}

function renderMarkdown(md) {
    // Normalise line endings
    let text = md.replace(/\r\n?/g, '\n');

    // Extract code blocks first so they're not mangled by inline rules
    const blocks = [];
    text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
        const idx = blocks.length;
        blocks.push(`<pre><code class="lang-${escapeHtml(lang || '')}">${escapeHtml(code.trimEnd())}</code></pre>`);
        return `\x00CODEBLOCK${idx}\x00`;
    });

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

    // Wiki-links [[Page Name]] → clickable links
    text = text.replace(/\[\[([^\]]+)\]\]/g, (_, page) => {
        const label = page.includes('|') ? page.split('|')[1] : page;
        const target = page.split('|')[0];
        const href = '#' + target.replace(/\s+/g, '-').toLowerCase();
        return `<a href="#" class="wiki-link" data-wiki-link="${escapeHtml(target)}">${escapeHtml(label)}</a>`;
    });

    // Images ![alt](url)
    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" loading="lazy">');

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

    // Bold/italic: ***bold italic***, **bold**, *italic*
    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    text = text.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');

    // Strikethrough
    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');

    // Blockquotes
    text = text.replace(/^&gt;(.*)$/gm, '<blockquote>$1</blockquote>');
    text = text.replace(/^>(.*)$/gm, '<blockquote>$1</blockquote>');

    // Horizontal rules
    text = text.replace(/^(---|\*\*\*|___)\s*$/gm, '<hr>');

    // Headings (must be at start of line)
    text = text.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
    text = text.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
    text = text.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
    text = text.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
    text = text.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
    text = text.replace(/^#\s+(.+)$/gm, function (_, title) {
        const id = title.replace(/\s+/g, '-').replace(/[^\w-]/g, '').toLowerCase();
        return `<h1 id="${id}">${title}</h1>`;
    });

    // Ordered lists
    text = text.replace(/^(?:\d+\.\s.*(?:\n|$))+/gm, function (match) {
        const items = match.trim().split('\n').map(l => l.replace(/^\d+\.\s+/, '').trim());
        return '<ol>' + items.map(i => `<li>${i}</li>`).join('') + '</ol>\n';
    });

    // Unordered lists
    text = text.replace(/^(?:[-*+]\s.*(?:\n|$))+/gm, function (match) {
        const items = match.trim().split('\n').map(l => l.replace(/^[-*+]\s+/, '').trim());
        return '<ul>' + items.map(i => `<li>${i}</li>`).join('') + '</ul>\n';
    });

    // Tables (pipe tables: header | separator | rows)
    text = text.replace(/^(\|.+\|)\n\|[-| :]+\|\n((?:\|.+\|\n?)*)/gm, function (_, header, rows) {
        const headers = header.split('|').map(c => c.trim()).filter(Boolean);
        const rowLines = rows.trim().split('\n').filter(l => l.trim());
        const body = rowLines.map(r => {
            const cells = r.split('|').map(c => c.trim()).filter(Boolean);
            return '<tr>' + cells.map(c => `<td>${c}</td>`).join('') + '</tr>';
        }).join('');
        return '<table><thead><tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr></thead><tbody>' + body + '</tbody></table>\n';
    });

    // Restore code blocks
    text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_, idx) => blocks[parseInt(idx)]);

    // Double line breaks → paragraph breaks (but not inside block elements)
    // Simple approach: wrap consecutive text lines in <p> tags
    // Skip elements that are already block-level
    const blockTags = ['<h1', '<h2', '<h3', '<h4', '<h5', '<h6', '<pre', '<ul', '<ol', '<blockquote', '<hr', '<table', '<div'];
    const lines = text.split('\n');
    let html = '';
    let paraLines = [];

    function flushPara() {
        if (paraLines.length) {
            const pText = paraLines.join('<br>');
            if (pText.trim()) {
                html += '<p>' + pText.trim() + '</p>\n';
            }
            paraLines = [];
        }
    }

    for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        if (!line) {
            flushPara();
            continue;
        }
        const isBlock = blockTags.some(tag => line.startsWith(tag));
        if (isBlock) {
            flushPara();
            html += line + '\n';
        } else {
            paraLines.push(line);
        }
    }
    flushPara();

    return html;
}

// ── Vault API helpers ─────────────────────────────────────────────────
async function apiFetch(url) {
    const resp = await fetch(url);
    if (!resp.ok) {
        let msg = `HTTP ${resp.status}`;
        try {
            const body = await resp.json();
            if (body.error) msg = body.error;
        } catch (_) {}
        throw new Error(msg);
    }
    return resp.json();
}

// ── Tree Node Cache ───────────────────────────────────────────────────
// We cache directory contents so expanding/collapsing folders doesn't re-fetch.
const treeCache = new Map();

async function getTree(dirPath) {
    const key = dirPath || '';
    if (treeCache.has(key)) return treeCache.get(key);
    const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : '';
    const data = await apiFetch(`${VAULT_API}/tree${params}`);
    treeCache.set(key, data);
    return data;
}

function invalidateTreeCache(path) {
    // If we update a path, clear its parent cache too
    const parts = path.split('/');
    while (parts.length) {
        treeCache.delete(parts.join('/'));
        parts.pop();
    }
    treeCache.delete(''); // root
}

// ── Tree Panel ────────────────────────────────────────────────────────
let treeLoadStack = []; // tracks which nodes are expanded

function renderTree(dirPath, container, level) {
    level = level || 0;
    const padding = level * 18;

    getTree(dirPath).then(data => {
        const items = data.items || [];
        for (const item of items) {
            const node = document.createElement('div');
            node.className = 'vault-tree-node';
            node.style.paddingLeft = (padding + 4) + 'px';

            if (item.type === 'folder') {
                const isExpanded = treeLoadStack.includes(dirPath + '/' + item.name);
                const icon = isExpanded ? '▼' : '▶';
                node.innerHTML = `<span class="tree-folder-icon">${icon}</span> <span class="tree-folder-name">${escapeHtml(item.name)}</span>`;
                node.className += ' vault-tree-folder';
                node._path = dirPath ? dirPath + '/' + item.name : item.name;
                node._expanded = isExpanded;

                if (isExpanded) {
                    const childContainer = document.createElement('div');
                    childContainer.className = 'vault-tree-children';
                    node.appendChild(childContainer);
                    renderTree(node._path, childContainer, level + 1);
                }

                node.addEventListener('click', e => {
                    e.stopPropagation();
                    toggleFolder(node);
                });
            } else if (item.name.endsWith('.md') || item.name.endsWith('.txt') || item.name.endsWith('.markdown')) {
                node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name">${escapeHtml(item.name)}</span>`;
                node.className += ' vault-tree-file';
                node._path = dirPath ? dirPath + '/' + item.name : item.name;
                node.addEventListener('click', e => {
                    e.stopPropagation();
                    loadFile(node._path);
                });
            } else {
                node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name tree-muted">${escapeHtml(item.name)}</span>`;
                node.className += ' vault-tree-file vault-tree-other';
            }
            container.appendChild(node);
        }
    }).catch(err => {
        const errNode = document.createElement('div');
        errNode.className = 'vault-tree-error';
        errNode.textContent = '⚠️ ' + err.message;
        container.appendChild(errNode);
    });
}

function toggleFolder(node) {
    const children = node.querySelector('.vault-tree-children');
    const icon = node.querySelector('.tree-folder-icon');
    if (children) {
        // Collapse
        node.removeChild(children);
        icon.textContent = '▶';
        node._expanded = false;
        const idx = treeLoadStack.indexOf(node._path);
        if (idx > -1) treeLoadStack.splice(idx, 1);
    } else {
        // Expand
        icon.textContent = '▼';
        node._expanded = true;
        treeLoadStack.push(node._path);
        const childContainer = document.createElement('div');
        childContainer.className = 'vault-tree-children';
        node.appendChild(childContainer);
        renderTree(node._path, childContainer, parseInt(node.style.paddingLeft) / 18 + 1);
    }
}

async function loadTree(rootPath) {
    const container = document.getElementById('vault-tree');
    container.innerHTML = ''; // clear
    treeLoadStack = [];
    renderTree(rootPath, container, 0);
}

// ── Content Panel ─────────────────────────────────────────────────────
async function loadFile(filePath) {
    const panel = document.getElementById('vault-content');
    panel.innerHTML = '<div class="vault-loading">Loading...</div>';

    try {
        const data = await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(filePath)}`);
        const html = renderMarkdown(data.content);

        panel.innerHTML = `
            <div class="vault-file-header">
                <span class="vault-file-path">${escapeHtml(data.path)}</span>
            </div>
            <div class="vault-markdown-body">${html}</div>
        `;

        // Wire up wiki-link clicks
        panel.querySelectorAll('.wiki-link').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();
                const target = link.dataset.wikiLink;
                navigateToWikiPage(target);
            });
        });

        // Highlight current file in tree
        document.querySelectorAll('.vault-tree-file.active').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.vault-tree-file').forEach(el => {
            if (el._path === filePath) {
                el.classList.add('active');
                el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
            }
        });

    } catch (err) {
        panel.innerHTML = `<div class="vault-error"><strong>Error:</strong> ${escapeHtml(err.message)}</div>`;
    }
}

async function navigateToWikiPage(pageName) {
    // Look for a file named after the wiki link
    const encoded = encodeURIComponent(pageName);
    // Try exact filename first, then search
    const possiblePaths = [
        pageName + '.md',
        'wiki/' + pageName + '.md',
        pageName + '/' + pageName + '.md',
    ];

    for (const p of possiblePaths) {
        try {
            await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(p)}`);
            loadFile(p);
            return;
        } catch (_) {}
    }

    // Fallback: search for it
    const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(pageName)}`);
    if (data.results && data.results.length > 0) {
        loadFile(data.results[0].path);
    } else {
        const panel = document.getElementById('vault-content');
        panel.innerHTML = `<div class="vault-error"><strong>Page not found:</strong> ${escapeHtml(pageName)}</div>`;
    }
}

// ── Search ────────────────────────────────────────────────────────────
let searchTimeout = null;

function setupSearch() {
    const input = document.getElementById('vault-search-input');
    const results = document.getElementById('vault-search-results');

    input.addEventListener('input', () => {
        clearTimeout(searchTimeout);
        const q = input.value.trim();
        if (q.length < 2) {
            results.hidden = true;
            return;
        }
        searchTimeout = setTimeout(() => performSearch(q), 300);
    });

    // Close on Escape / click outside
    document.addEventListener('click', e => {
        if (!e.target.closest('.vault-search-box')) {
            results.hidden = true;
        }
    });

    input.addEventListener('keydown', e => {
        if (e.key === 'Escape') results.hidden = true;
        if (e.key === 'Enter' && !results.hidden) {
            const first = results.querySelector('.vault-search-result-item');
            if (first) {
                first.click();
                results.hidden = true;
            }
        }
    });
}

async function performSearch(q) {
    const results = document.getElementById('vault-search-results');
    results.innerHTML = '<div class="vault-search-status">Searching...</div>';
    results.hidden = false;

    try {
        const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(q)}`);
        if (data.count === 0) {
            results.innerHTML = '<div class="vault-search-status">No results found</div>';
            return;
        }

        let html = `<div class="vault-search-count">${data.count} result${data.count !== 1 ? 's' : ''}</div>`;
        for (const r of data.results.slice(0, 50)) {
            const displayPath = r.path.length > 80 ? '...' + r.path.slice(-77) : r.path;
            html += `<div class="vault-search-result-item" data-path="${escapeHtml(r.path)}" data-line="${r.line}">
                <div class="vault-search-result-path">${escapeHtml(displayPath)}:${r.line}</div>
                <div class="vault-search-result-snippet">${escapeHtml(r.snippet)}</div>
            </div>`;
        }
        if (data.count > 50) {
            html += `<div class="vault-search-status">... and ${data.count - 50} more</div>`;
        }
        results.innerHTML = html;

        results.querySelectorAll('.vault-search-result-item').forEach(item => {
            item.addEventListener('click', () => {
                loadFile(item.dataset.path);
                results.hidden = true;
                document.getElementById('vault-search-input').value = '';
            });
        });
    } catch (err) {
        results.innerHTML = `<div class="vault-search-status">Error: ${escapeHtml(err.message)}</div>`;
    }
}

// ── Init ──────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    // Only init vault when its panel is shown
    const vaultPanel = document.getElementById('vault');
    const observer = new MutationObserver(() => {
        if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
            vaultPanel.dataset.vaultLoaded = 'true';
            initVault();
        }
    });
    observer.observe(vaultPanel, { attributes: true, attributeFilter: ['hidden'] });

    // Also check initially
    if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
        vaultPanel.dataset.vaultLoaded = 'true';
        initVault();
    }

    // Toggle tree sidebar on mobile
    document.getElementById('vault-toggle-tree').addEventListener('click', () => {
        document.getElementById('vault-tree').classList.toggle('vault-tree-visible');
    });
});

function initVault() {
    setupSearch();
    loadTree('');

    // Close tree on file click in mobile view
    document.getElementById('vault-tree').addEventListener('click', e => {
        if (window.innerWidth <= 900 && e.target.closest('.vault-tree-file')) {
            document.getElementById('vault-tree').classList.remove('vault-tree-visible');
        }
    });
}