{% extends "base.html" %}
{% block title %}Поисковые запросы — TG Agent{% endblock %}
{% block head_scripts %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
{% endblock %}
{% block content %}
<h1>Поисковые запросы</h1>

<div class="card mb-4">
    <div class="card-header fw-semibold">Добавить запрос</div>
    <div class="card-body">
        <form method="post" action="/search-queries/add" data-busy>
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-8">
                    <label class="form-label">Запрос <span class="hint" data-tooltip="Текст для поиска в собранных сообщениях. Поддерживает обычный текст, regex и FTS5-синтаксис">?</span></label>
                    <input type="text" class="form-control" name="query" required placeholder="аренда квартир">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Интервал (мин) <span class="hint" data-tooltip="Как часто запускать поиск по новым сообщениям (минимум 5 минут)">?</span></label>
                    <input type="number" class="form-control" name="interval_minutes" value="60" min="5">
                </div>
            </div>
            <div class="mb-3">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="is_regex" value="true" id="add-is-regex" onchange="if(this.checked) document.getElementById('add-is-fts').checked=false">
                    <label class="form-check-label" for="add-is-regex">Regex <span class="hint" data-tooltip="Интерпретировать запрос как регулярное выражение (re.IGNORECASE)">?</span></label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="is_fts" value="true" id="add-is-fts" onchange="if(this.checked) document.getElementById('add-is-regex').checked=false">
                    <label class="form-check-label" for="add-is-fts">FTS5 <span class="hint" data-tooltip="Полнотекстовый поиск с поддержкой операторов: OR, AND, NOT, префикс*, «точная фраза»">?</span></label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="notify_on_collect" value="true" id="add-notify">
                    <label class="form-check-label" for="add-notify">Уведомлять при сборе <span class="hint" data-tooltip="Отправлять уведомление в Telegram при каждом обнаружении новых совпадений">?</span></label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="track_stats" value="true" id="add-track" checked>
                    <label class="form-check-label" for="add-track">Отслеживать статистику <span class="hint" data-tooltip="Считать совпадения и строить график по дням. Отключите, если запрос нужен только для уведомлений">?</span></label>
                </div>
            </div>
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-8">
                    <label class="form-label">Исключения <span class="hint" data-tooltip="Сообщения, содержащие любую из этих строк, будут пропущены (без учёта регистра)">?</span></label>
                    <textarea class="form-control" name="exclude_patterns" rows="2" placeholder="по одному на строку"></textarea>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Макс. длина текста <span class="hint" data-tooltip="Пропускать сообщения длиннее указанного числа символов. Полезно для фильтрации спама и копипасты">?</span></label>
                    <input type="number" class="form-control" name="max_length" min="1" placeholder="без ограничения">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Добавить</button>
        </form>
    </div>
</div>

{% if items %}
<!-- Desktop: table -->
<div class="table-responsive d-none d-md-block">
<table class="table table-striped table-sm sq-table">
    <thead>
        <tr>
            <th>Запрос</th>
            <th>Режим</th>
            <th>Интервал</th>
            <th>Активен</th>
            <th>Всего (30д)</th>
            <th>Посл. запуск</th>
            <th>Действия</th>
        </tr>
    </thead>
    <tbody>
        {% for item in items %}
        {% set sq = item.query %}
        <tr id="row-{{ sq.id }}">
            <td title="{{ sq.query }}"><code>{{ sq.query }}</code>{% if sq.is_regex %} <small>(regex)</small>{% endif %}{% if sq.is_fts %} <small>(fts)</small>{% endif %}</td>
            <td>
                {% if sq.notify_on_collect %}<span title="Уведомления при сборе">&#128276;</span>{% endif %}
                {% if sq.track_stats %}<span title="Отслеживание статистики">&#128202;</span>{% endif %}
            </td>
            <td>{% if sq.track_stats %}{{ sq.interval_minutes }} мин{% else %}—{% endif %}</td>
            <td>{% if sq.is_active %}<span class="badge-active">&#9679;</span>{% else %}<span class="badge-inactive">&#9679;</span>{% endif %}</td>
            <td>{{ item.total_30d }}</td>
            <td>{{ item.last_run[:16] if item.last_run else "—" }}</td>
            <td>
                {% if sq.is_regex %}
                <span class="btn btn-outline-secondary btn-sm emoji-btn opacity-50" style="cursor:default" title="Regex-запросы нельзя открыть в поиске">&#128269;</span>
                {% else %}
                <a href="/search?q={{ sq.query|urlencode }}{% if sq.max_length %}+len%3C{{ sq.max_length }}{% endif %}{% if sq.is_fts %}&is_fts=1{% endif %}"
                   class="btn btn-outline-secondary btn-sm emoji-btn" title="Найти посты">&#128269;</a>
                {% endif %}
                <button type="button" class="btn btn-outline-secondary btn-sm emoji-btn" title="Редактировать" onclick="toggleEdit({{ sq.id }})">&#9999;&#65039;</button>
                <form method="post" action="/search-queries/{{ sq.id }}/run" class="d-inline" data-busy>
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="Запустить сейчас">&#9654;&#65039;</button>
                </form>
                <form method="post" action="/search-queries/{{ sq.id }}/toggle" class="d-inline" data-busy>
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="{{ 'Отключить' if sq.is_active else 'Включить' }}">
                        {{ "⏏️" if sq.is_active else "🔄" }}
                    </button>
                </form>
                <form method="post" action="/search-queries/{{ sq.id }}/delete" class="d-inline" onsubmit="return confirm('Удалить этот запрос и всю его статистику?')" data-busy>
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Удалить">&#128465;&#65039;</button>
                </form>
            </td>
        </tr>
        <tr id="edit-{{ sq.id }}" class="d-none">
            <td colspan="7">
                <form method="post" action="/search-queries/{{ sq.id }}/edit" data-busy>
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-md-8">
                            <label class="form-label">Запрос <span class="hint" data-tooltip="Текст для поиска в собранных сообщениях. Поддерживает обычный текст, regex и FTS5-синтаксис">?</span></label>
                            <input type="text" class="form-control" name="query" value="{{ sq.query }}" required>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Интервал (мин) <span class="hint" data-tooltip="Как часто запускать поиск по новым сообщениям (минимум 5 минут)">?</span></label>
                            <input type="number" class="form-control" name="interval_minutes" value="{{ sq.interval_minutes }}" min="5">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="is_regex" value="true" {{ "checked" if sq.is_regex }} id="edit-is-regex-{{ sq.id }}" onchange="if(this.checked) document.getElementById('edit-is-fts-{{ sq.id }}').checked=false">
                            <label class="form-check-label" for="edit-is-regex-{{ sq.id }}">Regex</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="is_fts" value="true" {{ "checked" if sq.is_fts }} id="edit-is-fts-{{ sq.id }}" onchange="if(this.checked) document.getElementById('edit-is-regex-{{ sq.id }}').checked=false">
                            <label class="form-check-label" for="edit-is-fts-{{ sq.id }}">FTS5</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="notify_on_collect" value="true" {{ "checked" if sq.notify_on_collect }} id="edit-notify-{{ sq.id }}">
                            <label class="form-check-label" for="edit-notify-{{ sq.id }}">Уведомлять при сборе</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="track_stats" value="true" {{ "checked" if sq.track_stats }} id="edit-track-{{ sq.id }}">
                            <label class="form-check-label" for="edit-track-{{ sq.id }}">Отслеживать статистику</label>
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-md-8">
                            <label class="form-label">Исключения</label>
                            <textarea class="form-control" name="exclude_patterns" rows="2" placeholder="по одному на строку">{{ sq.exclude_patterns }}</textarea>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Макс. длина текста</label>
                            <input type="number" class="form-control" name="max_length" min="1" value="{{ sq.max_length or '' }}" placeholder="без ограничения">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary me-2">Сохранить</button>
                    <button type="button" class="btn btn-secondary" onclick="toggleEdit({{ sq.id }})">Отмена</button>
                </form>
            </td>
        </tr>
        {% if item.daily_stats %}
        <tr>
            <td colspan="7">
                <details>
                    <summary>График по дням ({{ item.daily_stats | length }} дн.)</summary>
                    <div style="position:relative;height:200px;margin:0.5rem 0">
                        <canvas id="chart-{{ sq.id }}"></canvas>
                    </div>
                    <script>
                    (function() {
                        var ctx = document.getElementById('chart-{{ sq.id }}');
                        new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: [{% for stat in item.daily_stats %}'{{ stat.day[5:] }}'{% if not loop.last %},{% endif %}{% endfor %}],
                                datasets: [{
                                    label: 'Совпадений',
                                    data: [{% for stat in item.daily_stats %}{{ stat.count }}{% if not loop.last %},{% endif %}{% endfor %}],
                                    backgroundColor: '#0d6efd',
                                    borderRadius: 3
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { display: false } },
                                scales: {
                                    y: { beginAtZero: true, ticks: { precision: 0 } }
                                }
                            }
                        });
                    })();
                    </script>
                </details>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Mobile: cards -->
<div class="d-md-none mobile-cards">
    {% for item in items %}
    {% set sq = item.query %}
    <div class="card mb-2">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-1">
                <code class="text-truncate">{{ sq.query }}</code>
                {% if sq.is_active %}<span class="badge-active">&#9679;</span>{% else %}<span class="badge-inactive">&#9679;</span>{% endif %}
            </div>
            <small class="text-muted">
                {% if sq.is_regex %}regex{% endif %}{% if sq.is_fts %}fts{% endif %}
                {% if sq.track_stats %}&middot; {{ sq.interval_minutes }} мин{% endif %}
                &middot; {{ item.total_30d }} за 30д
                {% if item.last_run %}&middot; {{ item.last_run[:16] }}{% endif %}
            </small>
            <div class="card-actions">
                {% if not sq.is_regex %}
                <a href="/search?q={{ sq.query|urlencode }}{% if sq.max_length %}+len%3C{{ sq.max_length }}{% endif %}{% if sq.is_fts %}&is_fts=1{% endif %}"
                   class="btn btn-outline-secondary btn-sm emoji-btn" title="Найти посты">&#128269;</a>
                {% endif %}
                <form method="post" action="/search-queries/{{ sq.id }}/run" class="d-inline" data-busy>
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="Запустить сейчас">&#9654;&#65039;</button>
                </form>
                <form method="post" action="/search-queries/{{ sq.id }}/toggle" class="d-inline" data-busy>
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="{{ 'Отключить' if sq.is_active else 'Включить' }}">
                        {{ "⏏️" if sq.is_active else "🔄" }}
                    </button>
                </form>
                <form method="post" action="/search-queries/{{ sq.id }}/delete" class="d-inline" onsubmit="return confirm('Удалить этот запрос и всю его статистику?')" data-busy>
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Удалить">&#128465;&#65039;</button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<p>Нет поисковых запросов.</p>
{% endif %}
<script>
function toggleEdit(id) {
    var editRow = document.getElementById('edit-' + id);
    if (!editRow.classList.contains('d-none')) {
        editRow.querySelector('form').reset();
    }
    document.getElementById('row-' + id).classList.toggle('d-none');
    editRow.classList.toggle('d-none');
}
</script>
{% endblock %}