{% extends "base.html" %}

{% block title %}树状视图 - deepdive-search{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl font-semibold text-gray-900">树状视图</h1>
        <div class="flex items-center space-x-3">
            <select id="domain-filter"
                class="bg-white border border-gray-300 rounded-lg px-3 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition">
                <option value="">全部领域</option>
                {% for d in domains %}
                <option value="{{ d }}" {% if domain == d %}selected{% endif %}>{{ d }}</option>
                {% endfor %}
            </select>
            <select id="record-selector"
                class="bg-white border border-gray-300 rounded-lg px-3 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition hidden">
            </select>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden" style="min-height: 600px;">
        <div id="jsmind-container" style="width: 100%; height: 600px;"></div>
        <div id="fallback-tree" class="hidden p-6" style="min-height: 600px;">
            <div class="text-gray-400 text-center py-20 text-sm" id="tree-loading">
                <p>加载中...</p>
            </div>
            <div id="tree-content" class="hidden"></div>
        </div>
        <div id="tree-empty" class="hidden text-gray-400 text-center py-20 text-sm">
            <p>暂无数据</p>
        </div>
    </div>

    <div id="drilldown-panel" class="hidden mt-5"></div>
</div>

<div id="leaf-detail-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeLeafModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-xl shadow-xl border border-gray-200 overflow-y-auto max-h-[85vh]">
        <div class="sticky top-0 bg-white border-b border-gray-100 px-5 py-4 flex items-center justify-between z-10 rounded-t-xl">
            <div>
                <h2 class="text-base font-semibold text-gray-900" id="leaf-modal-title"></h2>
                <nav id="leaf-modal-breadcrumb" class="flex items-center flex-wrap gap-1 text-xs mt-1"></nav>
            </div>
            <button onclick="closeLeafModal()" class="text-gray-400 hover:text-gray-600 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div id="leaf-modal-body" class="px-5 py-4 space-y-4"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let allTreeData = {};
let _selectedRecordId = null;
let _currentRecord = null;
let _jmInstance = null;
let _useJsMind = typeof jsMind !== 'undefined' && !window.__jsmindFailed;
let _drillPath = [];
let _drillIdSeq = 0;
let _nodeMap = {};
let _jsmindIdMap = {};

function assignDrillIds(node, parentDrillId) {
    const drillId = 'd_' + (_drillIdSeq++);
    node._drillId = drillId;
    node._parentDrillId = parentDrillId;
    _nodeMap[drillId] = node;
    if (node.children) {
        node.children.forEach(child => assignDrillIds(child, drillId));
    }
}

function resetNodeMap() {
    _drillIdSeq = 0;
    _nodeMap = {};
    _jsmindIdMap = {};
}

function buildPathByDrillId(drillId) {
    const path = [];
    let current = _nodeMap[drillId];
    while (current) {
        path.unshift(current);
        current = current._parentDrillId ? _nodeMap[current._parentDrillId] : null;
    }
    return path;
}

function isLeafNode(node) {
    return !node.children || node.children.length === 0;
}

function meceToJsMind(node, isRoot) {
    const drillId = node._drillId;
    const jmId = node.node_id || ('jm_' + Math.random().toString(36).substr(2, 8));
    _jsmindIdMap[jmId] = drillId;

    const topic = isRoot
        ? node.label
        : node.label + (node.keywords && node.keywords.length > 0
            ? ' (' + node.keywords.length + ')' : '');
    return {
        id: jmId,
        topic: topic,
        data: {
            label: node.label,
            keywords: node.keywords || [],
            description: node.description || '',
            node_id: node.node_id || '',
            drillId: drillId
        },
        children: (node.children || []).map(c => meceToJsMind(c, false))
    };
}

function buildNodeExpr(node) {
    if (!node.keywords || node.keywords.length === 0) return '无';
    if (node.keywords.length === 1) return '"' + node.keywords[0] + '"';
    return '(' + node.keywords.map(k => '"' + k + '"').join(' OR ') + ')';
}

function buildBreadcrumbHtml(path, clickable) {
    let html = '';
    path.forEach((n, i) => {
        if (i > 0) html += '<span class="text-gray-300 mx-0.5">/</span>';
        if (i === path.length - 1) {
            html += '<span class="text-brand-600 font-semibold">' + n.label + '</span>';
        } else if (clickable) {
            html += '<button class="text-gray-500 hover:text-brand-600 transition" onclick="drillToNode(\'' + n._drillId + '\')">' + n.label + '</button>';
        } else {
            html += '<span class="text-gray-400">' + n.label + '</span>';
        }
    });
    return html;
}

/* ===== 末端节点模态框 ===== */

function openLeafModal(node, path) {
    const modal = document.getElementById('leaf-detail-modal');
    document.getElementById('leaf-modal-title').textContent = node.label;

    const bcNav = document.getElementById('leaf-modal-breadcrumb');
    bcNav.innerHTML = buildBreadcrumbHtml(path, true);

    const kwHtml = (node.keywords || []).map(k => '<span class="keyword-tag">' + k + '</span>').join('');
    const expr = buildNodeExpr(node);

    const platExprs = (_currentRecord && _currentRecord.bool_result && _currentRecord.bool_result.expression)
        ? (_currentRecord.bool_result.expression.platform_expressions || _currentRecord.bool_result.expression.dialect_expressions || {})
        : {};
    const platHtml = Object.entries(platExprs).filter(([k, v]) => v).map(([name, pExpr]) =>
        '<div><span class="text-xs text-gray-400 font-medium">[' + name + ']</span> <code class="text-xs text-gray-600 font-mono break-all">' + pExpr + '</code></div>'
    ).join('');

    const body = document.getElementById('leaf-modal-body');
    body.innerHTML = '<div>'
        + '<p class="text-xs font-medium text-gray-500 mb-1">描述</p>'
        + '<p class="text-sm text-gray-600 leading-relaxed">' + (node.description || '无描述') + '</p>'
        + '</div>'
        + (kwHtml ? '<div><p class="text-xs font-medium text-gray-500 mb-1">关键词</p><div class="flex flex-wrap gap-1">' + kwHtml + '</div></div>' : '')
        + '<div>'
        + '<p class="text-xs font-medium text-gray-500 mb-1">布尔表达式</p>'
        + '<code class="block bg-gray-50 p-2.5 rounded-lg border border-gray-200 text-brand-700 text-xs break-all font-mono">' + expr + '</code>'
        + '</div>'
        + (platHtml ? '<div><p class="text-xs font-medium text-gray-500 mb-1">多平台表达式</p><div class="space-y-1.5">' + platHtml + '</div></div>' : '')
        + '<div class="flex items-center space-x-2 pt-3 border-t border-gray-100">'
        + '<button onclick="closeLeafModal(); openDetailModal(\'' + _currentRecord.record_id + '\')" class="flex-1 px-3 py-2 text-sm font-medium text-brand-600 bg-brand-50 hover:bg-brand-100 rounded-lg transition">查看完整记录</button>'
        + '<button onclick="closeLeafModal()" class="flex-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-lg transition">关闭</button>'
        + '</div>';

    modal.classList.remove('hidden');
}

function closeLeafModal() {
    document.getElementById('leaf-detail-modal').classList.add('hidden');
}

/* ===== 非末端节点钻取面板 ===== */

function renderDrilldown(record, node, path) {
    const panel = document.getElementById('drilldown-panel');
    panel.classList.remove('hidden');

    const breadcrumbHtml = buildBreadcrumbHtml(path, true);
    const isRoot = path.length === 1;
    const kwHtml = (node.keywords || []).map(k => '<span class="keyword-tag">' + k + '</span>').join('');
    const exprHtml = buildNodeExpr(node);

    let childrenHtml = '';
    if (node.children && node.children.length > 0) {
        childrenHtml = '<div class="mt-4"><p class="text-xs font-medium text-gray-500 mb-2">子分类（点击继续钻取）</p><div class="space-y-2">';
        node.children.forEach(child => {
            const childKwCount = (child.keywords || []).length;
            const childDesc = (child.description || '').substring(0, 60);
            const leaf = isLeafNode(child);
            const clickAction = leaf
                ? 'openLeafModal(_nodeMap[\'' + child._drillId + '\'], buildPathByDrillId(\'' + child._drillId + '\'))'
                : 'drillToNode(\'' + child._drillId + '\')';
            const leafBadge = leaf ? ' <span class="text-[10px] text-brand-500 bg-brand-50 px-1.5 py-0.5 rounded-full ml-1">叶子</span>' : '';
            childrenHtml += '<button class="drill-child-btn w-full text-left px-4 py-3 bg-gray-50 hover:bg-brand-50 border border-gray-200 hover:border-brand-300 rounded-lg transition group" onclick="' + clickAction + '">'
                + '<div class="flex items-center justify-between">'
                + '<span class="text-sm font-medium text-gray-900 group-hover:text-brand-700">' + child.label + leafBadge + '</span>'
                + '<span class="text-xs text-gray-400">' + childKwCount + ' 个关键词</span>'
                + '</div>'
                + (childDesc ? '<p class="text-xs text-gray-500 mt-1">' + childDesc + '</p>' : '')
                + '</button>';
        });
        childrenHtml += '</div></div>';
    }

    let recordActionsHtml = '';
    if (isRoot && record) {
        const tagsHtml = (record.tags || []).map(t => '<span class="keyword-tag">' + t + '</span>').join('');
        const platExprs = (record.bool_result && record.bool_result.expression)
            ? (record.bool_result.expression.platform_expressions || record.bool_result.expression.dialect_expressions || {})
            : {};
        const platHtml = Object.entries(platExprs).filter(([k, v]) => v).map(([name, pExpr]) =>
            '<div><span class="text-xs text-gray-400 font-medium">[' + name + ']</span> <code class="text-xs text-gray-600 font-mono break-all">' + pExpr + '</code></div>'
        ).join('');

        recordActionsHtml = '<div class="mt-5 pt-4 border-t border-gray-200 space-y-4">'
            + '<div><p class="text-xs font-medium text-gray-500 mb-1">原始文本</p><p class="text-sm text-gray-600 leading-relaxed">' + (record.input_text || '无') + '</p></div>'
            + (tagsHtml ? '<div><p class="text-xs font-medium text-gray-500 mb-1">标签</p><div class="flex flex-wrap gap-1">' + tagsHtml + '</div></div>' : '')
            + (platHtml ? '<div><p class="text-xs font-medium text-gray-500 mb-1">多平台表达式</p><div class="space-y-1.5">' + platHtml + '</div></div>' : '')
            + '<div class="flex items-center space-x-2 pt-2">'
            + '<button onclick="openDetailModal(\'' + record.record_id + '\')" class="flex-1 px-3 py-2 text-sm font-medium text-brand-600 bg-brand-50 hover:bg-brand-100 rounded-lg transition">查看完整详情</button>'
            + '<button onclick="openDetailModal(\'' + record.record_id + '\').then(() => openEditModal())" class="flex-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-lg transition">编辑</button>'
            + '<button onclick="deleteRecordById(\'' + record.record_id + '\').then(ok => { if(ok) { closeDrilldown(); loadTree(document.getElementById(\'domain-filter\').value); } })" class="flex-1 px-3 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition">删除</button>'
            + '</div></div>';
    }

    panel.innerHTML = '<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">'
        + '<div class="flex items-center justify-between mb-3">'
        + '<nav class="flex items-center flex-wrap gap-1 text-sm">' + breadcrumbHtml + '</nav>'
        + '<button onclick="closeDrilldown()" class="text-gray-400 hover:text-gray-600 transition flex-shrink-0 ml-3"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>'
        + '</div>'
        + '<div class="space-y-4">'
        + '<div><p class="text-xs font-medium text-gray-500 mb-1">描述</p><p class="text-sm text-gray-600 leading-relaxed">' + (node.description || '无描述') + '</p></div>'
        + (kwHtml ? '<div><p class="text-xs font-medium text-gray-500 mb-1">关键词</p><div class="flex flex-wrap gap-1">' + kwHtml + '</div></div>' : '')
        + '<div><p class="text-xs font-medium text-gray-500 mb-1">布尔表达式</p><code class="block bg-gray-50 p-2.5 rounded-lg border border-gray-200 text-brand-700 text-xs break-all font-mono">' + exprHtml + '</code></div>'
        + childrenHtml
        + recordActionsHtml
        + '</div></div>';
}

function drillToNode(drillId) {
    if (!_currentRecord) return;
    const node = _nodeMap[drillId];
    if (!node) return;
    const path = buildPathByDrillId(drillId);
    if (!path || path.length === 0) return;

    if (isLeafNode(node)) {
        openLeafModal(node, path);
        return;
    }

    _drillPath = path;
    renderDrilldown(_currentRecord, node, path);
    document.getElementById('drilldown-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function closeDrilldown() {
    document.getElementById('drilldown-panel').classList.add('hidden');
    _drillPath = [];
}

/* ===== jsMind 渲染 ===== */

function renderWithJsMind(domain) {
    const container = document.getElementById('jsmind-container');
    const emptyEl = document.getElementById('tree-empty');
    const fallbackEl = document.getElementById('fallback-tree');

    container.classList.remove('hidden');
    fallbackEl.classList.add('hidden');

    const domainNames = Object.keys(allTreeData);
    if (domainNames.length === 0) {
        container.classList.add('hidden');
        emptyEl.classList.remove('hidden');
        return;
    }
    emptyEl.classList.add('hidden');

    const selector = document.getElementById('record-selector');
    selector.classList.remove('hidden');
    selector.innerHTML = '';

    const firstDomain = domainNames[0];
    const records = allTreeData[firstDomain] || [];

    if (records.length > 0) {
        records.forEach((rec, idx) => {
            const opt = document.createElement('option');
            opt.value = idx;
            const expr = rec.bool_result.expression.raw_expression;
            opt.textContent = rec.domain + ' — ' + expr.substring(0, 50) + (expr.length > 50 ? '...' : '');
            selector.appendChild(opt);
        });
    }

    showJsMindRecord(0);
}

function showJsMindRecord(index) {
    const selector = document.getElementById('record-selector');
    const domainNames = Object.keys(allTreeData);
    if (domainNames.length === 0) return;

    const firstDomain = domainNames[0];
    const records = allTreeData[firstDomain] || [];
    if (index < 0 || index >= records.length) return;

    const record = records[index];
    _selectedRecordId = record.record_id;
    _currentRecord = record;
    closeDrilldown();
    closeLeafModal();

    if (!record.mece_tree || !record.mece_tree.root) {
        document.getElementById('jsmind-container').classList.add('hidden');
        document.getElementById('tree-empty').classList.remove('hidden');
        return;
    }

    resetNodeMap();
    assignDrillIds(record.mece_tree.root, null);

    const mindData = {
        meta: {
            name: record.domain,
            author: 'deepdive-search',
            version: '0.8'
        },
        format: 'node_tree',
        data: meceToJsMind(record.mece_tree.root, true)
    };

    const options = {
        container: 'jsmind-container',
        editable: false,
        theme: 'primary',
        view: {
            engine: 'canvas',
            hmargin: 80,
            vmargin: 50,
            line_width: 1.5,
            line_color: '#d1d5db'
        },
        layout: {
            hspace: 30,
            vspace: 20,
            pspace: 16
        }
    };

    if (_jmInstance) {
        _jmInstance.show(mindData);
    } else {
        _jmInstance = new jsMind(options);
        _jmInstance.show(mindData);
    }

    _jmInstance.add_event_listener(function(type, data) {
        if (type === jsMind.event_type.select) {
            const jmNode = data.node;
            if (jmNode) {
                const drillId = (jmNode.data && jmNode.data.drillId)
                    || _jsmindIdMap[jmNode.id];
                if (drillId) {
                    drillToNode(drillId);
                }
            }
        }
    });
}

/* ===== 手写树降级渲染 ===== */

function renderWithFallback(domain) {
    const container = document.getElementById('jsmind-container');
    const fallbackEl = document.getElementById('fallback-tree');
    const emptyEl = document.getElementById('tree-empty');
    const treeContent = document.getElementById('tree-content');
    const loading = document.getElementById('tree-loading');

    container.classList.add('hidden');
    fallbackEl.classList.remove('hidden');
    loading.classList.remove('hidden');
    treeContent.classList.add('hidden');

    treeContent.innerHTML = '';

    const domainNames = Object.keys(allTreeData);
    if (domainNames.length === 0) {
        fallbackEl.classList.add('hidden');
        emptyEl.classList.remove('hidden');
        return;
    }
    emptyEl.classList.add('hidden');

    domainNames.forEach(domainName => {
        const domainDiv = document.createElement('div');
        domainDiv.className = 'mb-6';

        const header = document.createElement('div');
        header.className = 'flex items-center space-x-2 mb-3';
        header.innerHTML = '<span class="text-brand-600 text-base font-semibold">' + domainName + '</span>'
            + '<span class="text-xs text-gray-400">(' + allTreeData[domainName].length + ' 条记录)</span>';
        domainDiv.appendChild(header);

        allTreeData[domainName].forEach(record => {
            _currentRecord = record;
            _selectedRecordId = record.record_id;
            resetNodeMap();

            if (record.mece_tree && record.mece_tree.root) {
                assignDrillIds(record.mece_tree.root, null);
            }

            const recordDiv = document.createElement('div');
            recordDiv.className = 'mb-4';

            const recordHeader = document.createElement('div');
            recordHeader.className = 'tree-node-label mb-2 text-sm text-gray-700 font-mono';
            recordHeader.textContent = record.bool_result.expression.raw_expression.substring(0, 80) + (record.bool_result.expression.raw_expression.length > 80 ? '...' : '');
            if (record.mece_tree && record.mece_tree.root) {
                recordHeader.addEventListener('click', () => {
                    drillToNode(record.mece_tree.root._drillId);
                });
            }
            recordDiv.appendChild(recordHeader);

            if (record.mece_tree && record.mece_tree.root) {
                const treeEl = renderMeceNode(record.mece_tree.root, 1);
                recordDiv.appendChild(treeEl);
            }

            domainDiv.appendChild(recordDiv);
        });

        treeContent.appendChild(domainDiv);
    });

    loading.classList.add('hidden');
    treeContent.classList.remove('hidden');
}

function renderMeceNode(node, depth) {
    const div = document.createElement('div');
    div.className = 'tree-node';

    const drillId = node._drillId;
    const leaf = isLeafNode(node);
    const label = document.createElement('div');
    label.className = 'tree-node-label text-sm';
    label.innerHTML = '<span class="text-gray-900 font-medium">' + node.label + '</span>'
        + (node.keywords && node.keywords.length > 0
            ? ' <span class="text-xs text-gray-400 font-normal">(' + node.keywords.length + ' 个关键词)</span>' : '')
        + (leaf ? ' <span class="text-[10px] text-brand-500 bg-brand-50 px-1.5 py-0.5 rounded-full">叶子</span>' : '');

    label.addEventListener('click', (e) => {
        e.stopPropagation();
        drillToNode(drillId);
    });
    div.appendChild(label);

    if (node.children && node.children.length > 0) {
        const childrenDiv = document.createElement('div');
        childrenDiv.className = 'tree-connector';
        node.children.forEach(child => {
            childrenDiv.appendChild(renderMeceNode(child, depth + 1));
        });
        div.appendChild(childrenDiv);
    }

    return div;
}

/* ===== 数据加载与分发 ===== */

async function loadTree(domain) {
    const params = new URLSearchParams();
    if (domain) params.set('domain', domain);

    try {
        const response = await fetch('/api/records/tree?' + params.toString());
        const data = await response.json();
        allTreeData = data.tree || {};

        if (_useJsMind) {
            renderWithJsMind(domain);
        } else {
            renderWithFallback(domain);
        }
    } catch (err) {
        const container = _useJsMind
            ? document.getElementById('jsmind-container')
            : document.getElementById('tree-loading');
        if (container) container.innerHTML = '<p class="text-red-500 text-sm p-6">加载失败: ' + err.message + '</p>';
    }
}

function onRecordDeleted(recordId) {
    closeDrilldown();
    closeLeafModal();
    loadTree(document.getElementById('domain-filter').value);
}

function onRecordUpdated(recordId, data) {
    loadTree(document.getElementById('domain-filter').value);
}

function onRecordCreated(data) {
    loadTree(document.getElementById('domain-filter').value);
}

document.getElementById('domain-filter').addEventListener('change', function() {
    loadTree(this.value);
});

document.getElementById('record-selector').addEventListener('change', function() {
    showJsMindRecord(parseInt(this.value, 10));
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeLeafModal();
    }
});

loadTree('{{ domain or "" }}');
</script>
{% endblock %}