{% 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-2">
            <input type="text" id="search-input"
                placeholder="搜索关键词..."
                class="bg-white border border-gray-300 rounded-lg px-3 py-1.5 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 w-44 transition">
            <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="tag-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 t in tags %}
                <option value="{{ t }}" {% if tag == t %}selected{% endif %}>{{ t }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-200">
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">领域</th>
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">布尔表达式</th>
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">置信度</th>
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">标签</th>
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">创建时间</th>
                    <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="records-body">
                {% for record in records %}
                <tr class="border-b border-gray-100 hover:bg-gray-50 transition cursor-pointer" data-id="{{ record.record_id }}" onclick="openDetailModal('{{ record.record_id }}')">
                    <td class="px-4 py-3">
                        <span class="text-sm font-medium text-brand-600">{{ record.domain }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <code class="text-xs text-gray-600 break-all font-mono">{{ record.bool_result.expression.raw_expression[:100] }}{% if record.bool_result.expression.raw_expression|length > 100 %}...{% endif %}</code>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full
                            {% if record.bool_result.confidence_score >= 0.8 %}bg-green-50 text-green-700 border border-green-200
                            {% elif record.bool_result.confidence_score >= 0.5 %}bg-amber-50 text-amber-700 border border-amber-200
                            {% else %}bg-red-50 text-red-700 border border-red-200{% endif %}">
                            {{ (record.bool_result.confidence_score * 100)|int }}%
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        {% for t in record.tags[:3] %}
                        <span class="keyword-tag">{{ t }}</span>
                        {% endfor %}
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-400">{{ record.created_at[:10] }}</td>
                    <td class="px-4 py-3" onclick="event.stopPropagation()">
                        <div class="flex items-center space-x-2">
                            <button onclick="openDetailModal('{{ record.record_id }}')"
                                class="text-xs text-brand-600 hover:text-brand-700 transition font-medium">查看</button>
                            <button onclick="openDetailModal('{{ record.record_id }}').then(() => openEditModal())"
                                class="text-xs text-gray-500 hover:text-brand-600 transition font-medium">编辑</button>
                            <button onclick="deleteRecordById('{{ record.record_id }}').then(ok => { if(ok) removeRow('{{ record.record_id }}') })"
                                class="text-xs text-gray-400 hover:text-red-500 transition font-medium">删除</button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% if not records %}
                <tr>
                    <td colspan="6" class="px-4 py-16 text-center text-gray-400 text-sm">暂无搜索记录</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    {% if total_pages > 1 %}
    <div class="flex items-center justify-center space-x-3 mt-5">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}&domain={{ domain or '' }}&tag={{ tag or '' }}"
            class="px-3 py-1.5 bg-white border border-gray-300 rounded-lg text-sm text-gray-600 hover:border-brand-400 hover:text-brand-600 transition">上一页</a>
        {% endif %}

        <span class="text-xs text-gray-500">第 {{ page }} / {{ total_pages }} 页（共 {{ total }} 条）</span>

        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}&domain={{ domain or '' }}&tag={{ tag or '' }}"
            class="px-3 py-1.5 bg-white border border-gray-300 rounded-lg text-sm text-gray-600 hover:border-brand-400 hover:text-brand-600 transition">下一页</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

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

function onRecordDeleted(recordId) {
    removeRow(recordId);
}

function onRecordUpdated(recordId, data) {
    setTimeout(() => location.reload(), 300);
}

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

let searchTimer;
document.getElementById('search-input').addEventListener('input', function() {
    clearTimeout(searchTimer);
    const query = this.value.trim();
    searchTimer = setTimeout(() => {
        const domain = document.getElementById('domain-filter').value;
        const tag = document.getElementById('tag-filter').value;
        const params = new URLSearchParams({ q: query, page: '1' });
        if (domain) params.set('domain', domain);
        if (tag) params.set('tag', tag);
        window.location.href = '/list?' + params.toString();
    }, 300);
});

document.getElementById('domain-filter').addEventListener('change', function() {
    const params = new URLSearchParams({ domain: this.value, page: '1' });
    const tag = document.getElementById('tag-filter').value;
    if (tag) params.set('tag', tag);
    window.location.href = '/list?' + params.toString();
});

document.getElementById('tag-filter').addEventListener('change', function() {
    const params = new URLSearchParams({ tag: this.value, page: '1' });
    const domain = document.getElementById('domain-filter').value;
    if (domain) params.set('domain', domain);
    window.location.href = '/list?' + params.toString();
});
</script>
{% endblock %}