{% extends "base.html" %}
{% block title %}Поиск — TG Agent{% endblock %}
{% block content %}
<h1>Поиск по постам</h1>

<form method="get" action="/search" data-busy>
    <div class="mb-3">
        <label for="q" class="form-label">Запрос</label>
        <input type="text" class="form-control" id="q" name="q" value="{{ q }}" placeholder="Введите поисковый запрос" autofocus>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12 col-sm-6 col-md-3">
            <label for="channel-select" class="form-label">Канал</label>
            <select name="channel_id" id="channel-select" class="form-select">
                <option value="">Все каналы</option>
                {% for ch in channels %}
                <option value="{{ ch.channel_id }}" {{ 'selected' if channel_id == ch.channel_id else '' }}>
                    {{ ch.title or ch.username or ch.channel_id }}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-6 col-sm-6 col-md-3">
            <label for="date-from" class="form-label">Дата от</label>
            <input type="date" class="form-control" name="date_from" id="date-from" value="{{ date_from }}">
        </div>
        <div class="col-6 col-sm-6 col-md-3">
            <label for="date-to" class="form-label">Дата до</label>
            <input type="date" class="form-control" name="date_to" id="date-to" value="{{ date_to }}">
        </div>
    </div>

    <div class="row g-2 align-items-end mb-3 search-options">
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Поиск по ранее собранным сообщениям в локальной базе данных">
            <input class="form-check-input" type="radio" name="mode" id="mode-local" value="local" {{ 'checked' if mode == 'local' else '' }}>
            <label class="form-check-label" for="mode-local">Локальная база</label>
        </div>
        {% if 'semantic' in available_modes %}
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Семантический поиск по локальной базе через embeddings и semantic backend">
            <input class="form-check-input" type="radio" name="mode" id="mode-semantic" value="semantic" {{ 'checked' if mode == 'semantic' else '' }}>
            <label class="form-check-label" for="mode-semantic">Семантический</label>
        </div>
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Гибридный поиск: объединяет FTS5 и semantic retrieval">
            <input class="form-check-input" type="radio" name="mode" id="mode-hybrid" value="hybrid" {{ 'checked' if mode == 'hybrid' else '' }}>
            <label class="form-check-label" for="mode-hybrid">Гибридный</label>
        </div>
        {% endif %}
        {% if 'my_chats' in available_modes %}
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Поиск по всем чатам и каналам подключённого аккаунта через Telegram API">
            <input class="form-check-input" type="radio" name="mode" id="mode-my-chats" value="my_chats" {{ 'checked' if mode == 'my_chats' else '' }}>
            <label class="form-check-label" for="mode-my-chats">Мои чаты</label>
        </div>
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Поиск внутри выбранного канала через Telegram API">
            <input class="form-check-input" type="radio" name="mode" id="mode-channel" value="channel" {{ 'checked' if mode == 'channel' else '' }}>
            <label class="form-check-label" for="mode-channel">В канале</label>
        </div>
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Глобальный поиск по публичным каналам (требуется Telegram Premium)">
            <input class="form-check-input" type="radio" name="mode" id="mode-telegram" value="telegram" {{ 'checked' if mode == 'telegram' else '' }}>
            <label class="form-check-label" for="mode-telegram">Публичные (Premium)</label>
        </div>
        {% endif %}
        {% if search_quota and search_quota.remains is not none %}
        <div class="col-12 col-lg-auto">
            <small id="quota-info" class="text-muted">
                Premium-поиск: осталось {{ search_quota.remains }}{% if search_quota.total_daily %} из {{ search_quota.total_daily }}{% endif %} сегодня
            </small>
        </div>
        {% endif %}
        {% if 'ai' in available_modes %}
        <div class="col-12 col-sm-6 col-lg-auto form-check" title="Семантический поиск с помощью LLM по локальной базе">
            <input class="form-check-input" type="radio" name="mode" id="mode-ai" value="ai" {{ 'checked' if mode == 'ai' else '' }}>
            <label class="form-check-label" for="mode-ai">AI-поиск</label>
        </div>
        {% endif %}
        <div class="col-12 col-sm-6 col-lg-auto form-check" id="fts-label" title="Полнотекстовый поиск FTS5 (поддерживает операторы AND, OR, NOT, фразы в кавычках)">
            <input class="form-check-input" type="checkbox" name="is_fts" value="1" id="fts-checkbox" {{ 'checked' if is_fts else '' }}>
            <label class="form-check-label" for="fts-checkbox">FTS5 <span class="hint" data-tooltip="Полнотекстовый поиск с поддержкой операторов: OR, AND, NOT, префикс*, «точная фраза», len&lt;400, len&gt;100">?</span></label>
        </div>
        <div class="col-12 col-sm-6 col-lg-auto form-check" id="all-posts-label" title="Искать по всем каналам, включая отфильтрованные">
            <input class="form-check-input" type="checkbox" name="include_filtered" value="1" id="all-posts-checkbox" {{ 'checked' if include_filtered else '' }}>
            <label class="form-check-label" for="all-posts-checkbox">Все <span class="hint" data-tooltip="Включить в результаты сообщения из отфильтрованных каналов">?</span></label>
        </div>
        <div class="col-12 col-sm-auto ms-sm-auto">
            <button type="submit" class="btn btn-primary w-100">Найти</button>
        </div>
    </div>
</form>

{% if trigger_search %}
<hr>
<div id="search-results"
     hx-get="/search/fragments/results?{{ request.url.query }}"
     hx-trigger="load"
     hx-swap="innerHTML">
    <div class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm"></span> Поиск…</div>
</div>
{% endif %}

<script>
(function() {
    var radios = document.querySelectorAll('input[name="mode"]');
    var channelSelect = document.getElementById('channel-select');
    var dateFrom = document.getElementById('date-from');
    var dateTo = document.getElementById('date-to');
    var ftsLabel = document.getElementById('fts-label');
    var ftsCheckbox = document.getElementById('fts-checkbox');
    var allPostsLabel = document.getElementById('all-posts-label');
    var allPostsCheckbox = document.getElementById('all-posts-checkbox');

    function updateState() {
        var mode = document.querySelector('input[name="mode"]:checked').value;
        var usesLocalDb = (mode === 'local' || mode === 'semantic' || mode === 'hybrid');
        var supportsFtsToggle = (mode === 'local' || mode === 'hybrid');
        channelSelect.disabled = !(mode === 'local' || mode === 'semantic' || mode === 'hybrid' || mode === 'channel');
        dateFrom.disabled = !usesLocalDb;
        dateTo.disabled = !usesLocalDb;
        ftsLabel.style.display = supportsFtsToggle ? '' : 'none';
        ftsCheckbox.disabled = !supportsFtsToggle;
        allPostsLabel.style.display = usesLocalDb ? '' : 'none';
        allPostsCheckbox.disabled = !usesLocalDb;
    }

    radios.forEach(function(r) {
        r.addEventListener('change', updateState);
    });

    updateState();
})();

// Translation on-demand
document.addEventListener('click', function(e) {
    var btn = e.target.closest('.translate-btn');
    if (!btn) return;
    e.preventDefault();
    var msgId = btn.dataset.msgId;
    if (!/^\d+$/.test(msgId || '')) return;
    function showTranslationStatus(text, isError) {
        var container = btn.parentElement.querySelector('[data-target="translation-' + msgId + '"]');
        if (!container) return;
        container.textContent = text;
        container.classList.toggle('text-danger', !!isError);
        container.style.display = '';
    }
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
    btn.disabled = true;
    fetch('/search/translate/' + msgId, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({target_lang: 'en'})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.ok && data.translation) {
            var container = btn.parentElement.querySelector('[data-target="translation-' + msgId + '"]');
            if (container) {
                var icon = document.createElement('i');
                icon.className = 'bi bi-translate me-1';
                container.innerHTML = '';
                container.classList.remove('text-danger');
                container.appendChild(icon);
                container.appendChild(document.createTextNode(data.translation));
                container.style.display = '';
            }
            btn.remove();
        } else if (data.same_lang) {
            btn.innerHTML = '<i class="bi bi-check"></i>';
        } else {
            showTranslationStatus(data.error || 'Не удалось перевести сообщение', true);
            btn.innerHTML = '<i class="bi bi-x text-danger"></i>';
            btn.disabled = false;
        }
    })
    .catch(function() {
        showTranslationStatus('Ошибка запроса перевода', true);
        btn.innerHTML = '<i class="bi bi-x text-danger"></i>';
        btn.disabled = false;
    });
});
</script>
{% endblock %}