{% 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>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div class="lg:col-span-2 bg-white rounded-xl p-6 border border-gray-200 shadow-sm min-h-[600px]" id="tree-container">
            <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 class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm" id="detail-panel">
            <h3 class="text-sm font-semibold text-gray-900 mb-4 pb-3 border-b border-gray-100">节点详情</h3>
            <p class="text-gray-400 text-sm" id="detail-placeholder">点击左侧树节点查看详情</p>
            <div id="detail-content" class="hidden space-y-4 mt-3">
                <div>
                    <p class="text-xs font-medium text-gray-500 mb-1">标签</p>
                    <p class="text-sm text-gray-900 font-semibold" id="detail-label"></p>
                </div>
                <div>
                    <p class="text-xs font-medium text-gray-500 mb-1">描述</p>
                    <p class="text-sm text-gray-600 leading-relaxed" id="detail-description"></p>
                </div>
                <div>
                    <p class="text-xs font-medium text-gray-500 mb-1">关键词</p>
                    <div id="detail-keywords" class="flex flex-wrap gap-1"></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" id="detail-expression"></code>
                </div>
                <div id="detail-record-actions" class="hidden pt-3 border-t border-gray-100 space-y-2">
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">原始文本</p>
                        <p class="text-xs text-gray-500 leading-relaxed" id="detail-input-text"></p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">标签</p>
                        <div id="detail-tags" class="flex flex-wrap gap-1"></div>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">多平台表达式</p>
                        <div id="detail-platforms" class="space-y-1"></div>
                    </div>
                    <div class="flex items-center space-x-2 pt-2">
                        <button id="detail-view-btn" class="flex-1 px-3 py-1.5 text-xs font-medium text-brand-600 bg-brand-50 hover:bg-brand-100 rounded-lg transition">查看完整详情</button>
                        <button id="detail-edit-btn" class="flex-1 px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-lg transition">编辑</button>
                        <button id="detail-delete-btn" class="flex-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let allTreeData = {};
let _selectedRecordId = null;

async function loadTree(domain) {
    const container = document.getElementById('tree-content');
    const loading = document.getElementById('tree-loading');
    loading.classList.remove('hidden');
    container.classList.add('hidden');

    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 || {};

        container.innerHTML = '';

        const domainNames = Object.keys(allTreeData);
        if (domainNames.length === 0) {
            container.innerHTML = '<p class="text-gray-400 text-center py-20 text-sm">暂无数据</p>';
        } else {
            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 => {
                    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 ? '...' : '');
                    recordHeader.addEventListener('click', () => showRecordDetail(record, recordHeader));
                    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);
                });

                container.appendChild(domainDiv);
            });
        }

        loading.classList.add('hidden');
        container.classList.remove('hidden');
    } catch (err) {
        loading.innerHTML = '<p class="text-red-500 text-sm">加载失败: ' + err.message + '</p>';
    }
}

function renderMeceNode(node, depth) {
    const div = document.createElement('div');
    div.className = 'tree-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>' : '');

    label.addEventListener('click', (e) => { e.stopPropagation(); showNodeDetail(node, label); });
    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;
}

function showNodeDetail(node, labelEl) {
    _selectedRecordId = null;
    document.querySelectorAll('.tree-node-label').forEach(el => el.classList.remove('active'));
    if (labelEl) labelEl.classList.add('active');

    document.getElementById('detail-placeholder').classList.add('hidden');
    document.getElementById('detail-content').classList.remove('hidden');
    document.getElementById('detail-label').textContent = node.label;
    document.getElementById('detail-description').textContent = node.description || '无描述';

    const kwContainer = document.getElementById('detail-keywords');
    kwContainer.innerHTML = '';
    (node.keywords || []).forEach(kw => {
        const span = document.createElement('span');
        span.className = 'keyword-tag';
        span.textContent = kw;
        kwContainer.appendChild(span);
    });

    if (node.keywords && node.keywords.length > 0) {
        const expr = node.keywords.length > 1 ?
            '(' + node.keywords.map(k => '"' + k + '"').join(' OR ') + ')' :
            '"' + node.keywords[0] + '"';
        document.getElementById('detail-expression').textContent = expr;
    } else {
        document.getElementById('detail-expression').textContent = '无';
    }

    document.getElementById('detail-record-actions').classList.add('hidden');
}

function showRecordDetail(record, labelEl) {
    _selectedRecordId = record.record_id;
    document.querySelectorAll('.tree-node-label').forEach(el => el.classList.remove('active'));
    if (labelEl) labelEl.classList.add('active');

    document.getElementById('detail-placeholder').classList.add('hidden');
    document.getElementById('detail-content').classList.remove('hidden');
    document.getElementById('detail-label').textContent = record.domain;
    document.getElementById('detail-description').textContent = record.bool_result.expression.explanation || '无解释';

    const kwContainer = document.getElementById('detail-keywords');
    kwContainer.innerHTML = '';
    const keywords = record.extracted_keywords || record.input_keywords || [];
    keywords.forEach(kw => {
        const span = document.createElement('span');
        span.className = 'keyword-tag';
        span.textContent = kw;
        kwContainer.appendChild(span);
    });

    document.getElementById('detail-expression').textContent = record.bool_result.expression.raw_expression;

    const actions = document.getElementById('detail-record-actions');
    actions.classList.remove('hidden');

    document.getElementById('detail-input-text').textContent = record.input_text || '无';

    const tagC = document.getElementById('detail-tags');
    tagC.innerHTML = '';
    (record.tags || []).forEach(t => {
        const s = document.createElement('span');
        s.className = 'keyword-tag';
        s.textContent = t;
        tagC.appendChild(s);
    });

    const platC = document.getElementById('detail-platforms');
    platC.innerHTML = '';
    const exprs = (record.bool_result && record.bool_result.expression) ?
        (record.bool_result.expression.platform_expressions || record.bool_result.expression.dialect_expressions || {}) : {};
    const entries = Object.entries(exprs).filter(([k, v]) => v);
    if (entries.length > 0) {
        entries.forEach(([name, expr]) => {
            const d = document.createElement('div');
            d.innerHTML = '<span class="text-xs text-gray-400 font-medium">[' + name + ']</span> <code class="text-xs text-gray-600 font-mono break-all">' + expr + '</code>';
            platC.appendChild(d);
        });
    }

    document.getElementById('detail-view-btn').onclick = () => openDetailDrawer(record.record_id);
    document.getElementById('detail-edit-btn').onclick = () => {
        openDetailDrawer(record.record_id);
        setTimeout(openEditModal, 300);
    };
    document.getElementById('detail-delete-btn').onclick = () => {
        if (!confirm('确定删除此记录？')) return;
        deleteRecordById(record.record_id).then(ok => {
            if (ok) {
                document.getElementById('detail-content').classList.add('hidden');
                document.getElementById('detail-placeholder').classList.remove('hidden');
                loadTree(document.getElementById('domain-filter').value);
            }
        });
    };
}

function onRecordDeleted(recordId) {
    document.getElementById('detail-content').classList.add('hidden');
    document.getElementById('detail-placeholder').classList.remove('hidden');
    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);
});

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