{% extends "base.html" %}

{% block title %}deepdive-search 首页{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="text-center mb-10 pt-4">
        <h1 class="text-3xl font-bold text-gray-900 mb-3 tracking-tight">DeepDive Search</h1>
        <p class="text-base text-gray-500 max-w-xl mx-auto leading-relaxed">
            输入技术领域与描述文本，自动生成符合 MECE 原则的布尔搜索逻辑，支持多平台输出。
        </p>
    </div>

    <div class="max-w-xl mx-auto bg-white rounded-xl p-6 border border-gray-200 shadow-sm mb-10">
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">技术领域</label>
                <input type="text" id="domain-input"
                    placeholder="例如: distributed-systems, machine-learning"
                    class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    描述文本
                    <span class="text-gray-400 font-normal">（输入大段文本，自动提取关键词）</span>
                </label>
                <textarea id="text-input" rows="5"
                    placeholder="例如：&#10;我正在研究分布式系统中的共识算法，包括 Paxos、Raft 等容错协议，以及 PBFT、HotStuff 等拜占庭容错协议。希望能找到关于这些算法的性能对比、工程实践和最新进展的资料。"
                    class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition resize-y"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">搜索平台</label>
                <select id="platform-select"
                    class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition">
                    <optgroup label="通用搜索">
                        <option value="generic">通用布尔</option>
                        <option value="google">Google</option>
                        <option value="scholar">Google Scholar</option>
                        <option value="elasticsearch">Elasticsearch</option>
                        <option value="pubmed">PubMed</option>
                    </optgroup>
                    <optgroup label="职业平台">
                        <option value="linkedin">LinkedIn</option>
                        <option value="maimai">脉脉</option>
                        <option value="liepin">猎聘</option>
                    </optgroup>
                    <optgroup label="开发者平台">
                        <option value="github">GitHub</option>
                    </optgroup>
                </select>
            </div>
            <button id="generate-btn"
                class="w-full bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium py-2.5 rounded-lg transition shadow-sm flex items-center justify-center space-x-2">
                <span>生成 MECE 搜索逻辑</span>
            </button>
        </div>

        <div id="result-area" class="hidden mt-5 p-4 bg-gray-50 rounded-lg border border-gray-200">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-900" id="result-domain"></h3>
                <span class="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded-full border border-gray-200" id="result-confidence"></span>
            </div>
            <div class="mb-3">
                <p class="text-xs font-medium text-gray-500 mb-1">提取关键词</p>
                <div id="result-keywords" class="flex flex-wrap gap-1"></div>
            </div>
            <div class="mb-3">
                <p class="text-xs font-medium text-gray-500 mb-1">布尔表达式</p>
                <code class="block bg-white p-3 rounded-lg border border-gray-200 text-brand-700 text-sm break-all font-mono" id="result-expression"></code>
            </div>
            <div class="mb-3">
                <p class="text-xs font-medium text-gray-500 mb-1">解释</p>
                <p class="text-sm text-gray-600 leading-relaxed" id="result-explanation"></p>
            </div>
            <div id="result-platforms" class="hidden">
                <p class="text-xs font-medium text-gray-500 mb-1">其他平台表达式</p>
                <div id="platform-expressions" class="space-y-1"></div>
            </div>
        </div>

        <div id="error-area" class="hidden mt-5 p-3 bg-red-50 border border-red-200 rounded-lg">
            <p class="text-red-600 text-sm" id="error-message"></p>
        </div>
    </div>

    {% if recent_records %}
    <div class="max-w-3xl mx-auto">
        <h2 class="text-sm font-semibold text-gray-900 mb-3">最近搜索</h2>
        <div class="space-y-2" id="recent-list">
            {% for record in recent_records %}
            <div class="bg-white rounded-lg p-4 border border-gray-200 hover:border-brand-200 hover:shadow-sm transition group" data-id="{{ record.record_id }}">
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-sm font-medium text-brand-600 cursor-pointer hover:underline" onclick="openDetailDrawer('{{ record.record_id }}')">{{ record.domain }}</span>
                    <div class="flex items-center space-x-2">
                        <span class="text-xs text-gray-400">{{ record.created_at[:10] }}</span>
                        <button onclick="event.stopPropagation(); deleteRecordById('{{ record.record_id }}').then(ok => { if(ok) { const el = document.querySelector('[data-id=\\'{{ record.record_id }}\\']'); if(el) { el.style.opacity='0'; setTimeout(() => el.remove(), 200); } } })"
                            class="text-xs text-gray-300 hover:text-red-500 transition opacity-0 group-hover:opacity-100">删除</button>
                    </div>
                </div>
                <code class="text-xs text-gray-600 break-all font-mono cursor-pointer" onclick="openDetailDrawer('{{ record.record_id }}')">{{ record.bool_result.expression.raw_expression[:120] }}{% if record.bool_result.expression.raw_expression|length > 120 %}...{% endif %}</code>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if total_count > 0 %}
    <div class="text-center mt-6">
        <a href="/list" class="text-sm font-medium text-brand-600 hover:text-brand-700 transition">
            查看全部 {{ total_count }} 条记录 &rarr;
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
function onRecordDeleted(recordId) {
    const el = document.querySelector('[data-id="' + recordId + '"]');
    if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 200); }
}

function onRecordCreated(data) {
    setTimeout(() => location.reload(), 800);
}

document.getElementById('generate-btn').addEventListener('click', async function() {
    const domain = document.getElementById('domain-input').value.trim();
    const text = document.getElementById('text-input').value.trim();
    const platform = document.getElementById('platform-select').value;

    if (!domain) {
        alert('请输入技术领域');
        return;
    }
    if (!text) {
        alert('请输入描述文本');
        return;
    }

    const btn = this;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<span class="loading-spinner"></span><span>生成中...</span>';
    btn.disabled = true;

    document.getElementById('result-area').classList.add('hidden');
    document.getElementById('error-area').classList.add('hidden');

    try {
        const response = await fetch('/api/search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ domain, text, platform, save: true })
        });
        const data = await response.json();

        if (data.error) {
            document.getElementById('error-area').classList.remove('hidden');
            document.getElementById('error-message').textContent = data.error;
        } else {
            document.getElementById('result-area').classList.remove('hidden');
            document.getElementById('result-domain').textContent = data.domain;
            document.getElementById('result-confidence').textContent = '置信度 ' + (data.bool_result.confidence_score * 100).toFixed(0) + '%';

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

            document.getElementById('result-expression').textContent = data.bool_result.expression.raw_expression;
            document.getElementById('result-explanation').textContent = data.bool_result.expression.explanation;

            const platDiv = document.getElementById('result-platforms');
            const platExprs = document.getElementById('platform-expressions');
            platExprs.innerHTML = '';
            const exprs = data.bool_result.expression.platform_expressions || data.bool_result.expression.dialect_expressions || {};
            const platEntries = Object.entries(exprs).filter(([k, v]) => k !== platform && v);
            if (platEntries.length > 0) {
                platDiv.classList.remove('hidden');
                platEntries.forEach(([name, expr]) => {
                    const div = document.createElement('div');
                    div.innerHTML = '<span class="text-xs text-gray-400 font-medium">[' + name + ']</span> <code class="text-xs text-gray-600 font-mono">' + expr + '</code>';
                    platExprs.appendChild(div);
                });
            } else {
                platDiv.classList.add('hidden');
            }
        }
    } catch (err) {
        document.getElementById('error-area').classList.remove('hidden');
        document.getElementById('error-message').textContent = '请求失败: ' + err.message;
    } finally {
        btn.innerHTML = originalText;
        btn.disabled = false;
    }
});
</script>
{% endblock %}