{% extends "base.html" %}
{% from "_macros.html" import icon %}
{% block title %}Шаблоны пайплайнов — TG Agent{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="mb-0"><i class="bi bi-collection"></i> Шаблоны пайплайнов</h1>
    <a class="btn btn-secondary btn-sm" href="/pipelines">{{ icon("back") }} Назад к пайплайнам</a>
</div>

<p class="text-muted">Выберите шаблон для создания нового пайплайна. Шаблоны содержат готовые наборы нод — вы можете настроить их после создания с помощью AI-редактора.</p>

{% set category_icons = {
    "content": "bi-pencil-square",
    "automation": "bi-gear",
    "moderation": "bi-shield-check",
    "monitoring": "bi-eye",
} %}

{% set node_icons = {
    "source": "bi-box-arrow-in-right",
    "retrieve_context": "bi-search",
    "llm_generate": "bi-stars",
    "llm_refine": "bi-pencil",
    "image_generate": "bi-image",
    "publish": "bi-send",
    "notify": "bi-bell",
    "filter": "bi-funnel",
    "delay": "bi-clock",
    "react": "bi-emoji-smile",
    "forward": "bi-reply-all",
    "delete_message": "bi-trash",
    "fetch_messages": "bi-cloud-download",
    "condition": "bi-signpost-split",
    "search_query_trigger": "bi-search",
    "agent_loop": "bi-robot",
} %}

{% set categories = [] %}
{% for tpl in templates %}
    {% if tpl.category not in categories %}
        {% set _ = categories.append(tpl.category) %}
    {% endif %}
{% endfor %}

{% for category in categories %}
<h3 class="mt-4"><i class="bi {{ category_icons.get(category, 'bi-diagram-3') }}"></i> {{ category|capitalize }}</h3>
<div class="row g-3">
    {% for tpl in templates %}
    {% if tpl.category == category %}
    {# Determine template capabilities #}
    {% set node_types = [] %}
    {% for node in tpl.template_json.nodes %}
        {% set _ = node_types.append(node.type.value) %}
    {% endfor %}
    {% set uses_llm = "llm_generate" in node_types or "llm_refine" in node_types or "agent_loop" in node_types %}
    {% set needs_target = "forward" in node_types or "publish" in node_types %}

    <div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-semibold">{{ tpl.name }}</span>
                {% if tpl.is_builtin %}<span class="badge bg-secondary">builtin</span>{% endif %}
            </div>
            <div class="card-body">
                <p class="card-text text-muted small">{{ tpl.description }}</p>
                <div class="mb-2">
                    {% for node in tpl.template_json.nodes %}
                    <span class="badge bg-light text-dark border me-1"><i class="bi {{ node_icons.get(node.type.value, 'bi-circle') }}"></i> {{ node.name }}</span>
                    {% endfor %}
                </div>
                {% if uses_llm %}
                <span class="badge bg-info text-dark mb-2"><i class="bi bi-stars"></i> Требует LLM</span>
                {% endif %}
                <div class="mt-2">
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tplModal{{ tpl.id }}"><i class="bi bi-plus-lg"></i> Использовать</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="toggleJsonView('tpl-json-{{ tpl.id }}')"><i class="bi bi-code-slash"></i> JSON</button>
                </div>
                <pre class="d-none small mt-2 p-2 border rounded bg-light" id="tpl-json-{{ tpl.id }}" style="max-height:200px;overflow:auto">{{ tpl.template_json.to_json() }}</pre>
            </div>
        </div>
    </div>

    <!-- Create from template modal -->
    <div class="modal fade" id="tplModal{{ tpl.id }}" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Создать из шаблона: {{ tpl.name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="post" action="/pipelines/from-template">
                    <input type="hidden" name="template_id" value="{{ tpl.id }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Название</label>
                            <input class="form-control" type="text" name="name" value="{{ tpl.name }}" required>
                        </div>

                        {% if uses_llm %}
                        <div class="mb-3">
                            <label class="form-label">LLM модель</label>
                            <input class="form-control" type="text" name="llm_model" placeholder="claude-sonnet-4.5">
                            {% if not llm_configured %}
                            <div class="form-text text-warning"><i class="bi bi-exclamation-triangle"></i> LLM-провайдер не настроен. <a href="/settings">Настройки</a></div>
                            {% endif %}
                        </div>
                        {% endif %}

                        <div class="mb-3">
                            <label class="form-label">Интервал (мин)</label>
                            <input class="form-control" type="number" name="generate_interval_minutes" min="1" value="60">
                        </div>

                        {# Source channels — AJAX searchable picker #}
                        <div class="mb-3">
                            <label class="form-label"><i class="bi bi-box-arrow-in-right"></i> Каналы-источники</label>
                            <div class="searchable-picker" data-picker-name="source_channel_ids" data-picker-multi="true" data-picker-url="/pipelines/api/channels/search?q=">
                                <div class="picker-selected"></div>
                                <input type="search" class="form-control form-control-sm mb-1" placeholder="Введите название или ID канала (мин. 2 символа)..." data-picker-search>
                                <div class="list-group picker-list"></div>
                                <small class="text-muted d-none" data-picker-empty>Ничего не найдено</small>
                            </div>
                        </div>

                        {% if needs_target %}
                        {# Target dialogs #}
                        <div class="mb-3">
                            <label class="form-label"><i class="bi bi-box-arrow-right"></i> Целевые диалоги</label>
                            <div class="searchable-picker" data-picker-name="target_refs" data-picker-multi="true">
                                <div class="picker-selected"></div>
                                <input type="search" class="form-control form-control-sm mb-1" placeholder="Поиск диалога..." data-picker-search>
                                <div class="btn-group btn-group-sm mb-1" data-picker-filters>
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="all">Все</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="channel">Каналы</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="group">Группы</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="dm">Личные</button>
                                </div>
                                <div class="list-group picker-list">
                                    {% for account in accounts %}
                                    {% set dialogs = cached_dialogs.get(account.phone, []) %}
                                    {% for dialog in dialogs %}
                                    {% set ref = account.phone ~ "|" ~ dialog.channel_id %}
                                    {% set dtype = dialog.channel_type %}
                                    {% set dgroup = "dm" if dtype == "dm" else ("channel" if dtype in ("channel", "monoforum") else "group") %}
                                    <label class="list-group-item list-group-item-action d-flex align-items-center gap-2"
                                           data-picker-option
                                           data-value="{{ ref }}"
                                           data-group="{{ dgroup }}"
                                           data-search-text="{{ ((dialog.title or '') ~ ' ' ~ dtype ~ ' ' ~ account.phone)|lower }}">
                                        <input type="checkbox" class="form-check-input mt-0">
                                        <span>{{ dialog.title or dialog.channel_id }}</span>
                                        <small class="text-muted ms-auto">{{ dtype }}</small>
                                    </label>
                                    {% endfor %}
                                    {% endfor %}
                                </div>
                                <small class="text-muted d-none" data-picker-empty>Ничего не найдено</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Создать</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endfor %}

{% if not templates %}
<div class="text-center py-5">
    <i class="bi bi-collection fs-1 text-muted"></i>
    <p class="mt-2">Шаблонов пока нет.</p>
</div>
{% endif %}

<script>
function toggleJsonView(id) {
    document.getElementById(id).classList.toggle("d-none");
}
</script>
{% endblock %}