{% extends "base.html" %}
{% block title %}Создать пайплайн — TG Agent{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="mb-0">Создать пайплайн</h1>
    <a class="btn btn-secondary btn-sm" href="/pipelines"><i class="bi bi-arrow-left"></i> Назад</a>
</div>

{# Stepper nav #}
<nav class="wizard-stepper mb-4">
    <div class="wizard-step-card active" data-step="1"><i class="bi bi-bullseye step-icon"></i>Тип</div>
    <div class="wizard-step-card" data-step="2"><i class="bi bi-box-arrow-in-right step-icon"></i>Источники</div>
    <div class="wizard-step-card" data-step="3"><i class="bi bi-gear step-icon"></i>Действие</div>
    <div class="wizard-step-card" data-step="4"><i class="bi bi-clock step-icon"></i>Расписание</div>
    <div class="wizard-step-card" data-step="5"><i class="bi bi-check-circle step-icon"></i>Проверка</div>
</nav>

<form id="wizard-form" method="post" action="/pipelines/create-wizard" data-busy>

<div class="row g-3 mb-4">
    <div class="col-12 col-lg-6">
        <label class="form-label fw-semibold">Название пайплайна</label>
        <input class="form-control" type="text" name="name" placeholder="Мой пайплайн" id="wizard-name" required>
        <div class="form-text">Обязательное поле — заполните до перехода на следующий шаг.</div>
    </div>
    <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label">Аккаунт</label>
        <select class="form-select" name="account_phone">
            <option value="">Автовыбор</option>
            {% for account in accounts %}
            <option value="{{ account.phone }}">{{ account.phone }}</option>
            {% endfor %}
        </select>
    </div>
</div>

{# === Step 1: Pipeline Type === #}
<div class="wizard-step active" id="step-1">
    <h5 class="mb-3">Выберите тип пайплайна</h5>
    <div class="row g-3">
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'forward')">
                <input type="radio" name="pipeline_type" value="forward">
                <div class="card-body text-center">
                    <i class="bi bi-reply-all fs-2 mb-2"></i>
                    <h6 class="card-title">Пересылка сообщений</h6>
                    <p class="card-text small text-muted">Пересылает сообщения из источников в целевые каналы/чаты</p>
                    <code class="small">ИСТОЧНИК → ПЕРЕСЫЛКА</code>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'react')">
                <input type="radio" name="pipeline_type" value="react">
                <div class="card-body text-center">
                    <i class="bi bi-emoji-smile fs-2 mb-2"></i>
                    <h6 class="card-title">Авто-реакции</h6>
                    <p class="card-text small text-muted">Ставит emoji-реакции на сообщения с случайной задержкой</p>
                    <code class="small">ИСТОЧНИК → ЗАДЕРЖКА → РЕАКЦИЯ</code>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'filter_action')">
                <input type="radio" name="pipeline_type" value="filter_action">
                <div class="card-body text-center">
                    <i class="bi bi-funnel fs-2 mb-2"></i>
                    <h6 class="card-title">Фильтр + действие</h6>
                    <p class="card-text small text-muted">Фильтрует по ключевым словам или regex, затем пересылает/реагирует/удаляет</p>
                    <code class="small">ИСТОЧНИК → ФИЛЬТР → ДЕЙСТВИЕ</code>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'cleanup')">
                <input type="radio" name="pipeline_type" value="cleanup">
                <div class="card-body text-center">
                    <i class="bi bi-trash3 fs-2 mb-2"></i>
                    <h6 class="card-title">Очистка чата</h6>
                    <p class="card-text small text-muted">Удаляет служебные сообщения (присоединение/выход из чата)</p>
                    <code class="small">ИСТОЧНИК → ФИЛЬТР → УДАЛЕНИЕ</code>
                </div>
            </label>
        </div>
    </div>
    <h5 class="mb-3 mt-4"><i class="bi bi-stars"></i> LLM-действия</h5>
    <div class="row g-3">
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'rewrite')">
                <input type="radio" name="pipeline_type" value="rewrite">
                <div class="card-body text-center">
                    <i class="bi bi-pencil fs-2 mb-2"></i>
                    <h6 class="card-title">Рерайт через LLM</h6>
                    <p class="card-text small text-muted">Переписывает сообщения своими словами через LLM</p>
                    <span class="badge bg-info text-dark"><i class="bi bi-stars"></i> Требует LLM</span>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'summarize')">
                <input type="radio" name="pipeline_type" value="summarize">
                <div class="card-body text-center">
                    <i class="bi bi-file-text fs-2 mb-2"></i>
                    <h6 class="card-title">Суммаризация</h6>
                    <p class="card-text small text-muted">Создаёт краткое содержание постов через LLM</p>
                    <span class="badge bg-info text-dark"><i class="bi bi-stars"></i> Требует LLM</span>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'translate')">
                <input type="radio" name="pipeline_type" value="translate">
                <div class="card-body text-center">
                    <i class="bi bi-translate fs-2 mb-2"></i>
                    <h6 class="card-title">Перевод</h6>
                    <p class="card-text small text-muted">Переводит посты на другой язык через LLM</p>
                    <span class="badge bg-info text-dark"><i class="bi bi-stars"></i> Требует LLM</span>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'content_gen')">
                <input type="radio" name="pipeline_type" value="content_gen">
                <div class="card-body text-center">
                    <i class="bi bi-magic fs-2 mb-2"></i>
                    <h6 class="card-title">Генерация контента</h6>
                    <p class="card-text small text-muted">Создаёт новый контент на основе контекста из источников</p>
                    <span class="badge bg-info text-dark"><i class="bi bi-stars"></i> Требует LLM</span>
                </div>
            </label>
        </div>
    </div>
    <h5 class="mb-3 mt-4"><i class="bi bi-robot"></i> Агентная автоматизация</h5>
    <div class="row g-3">
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'smart_assistant')">
                <input type="radio" name="pipeline_type" value="smart_assistant">
                <div class="card-body text-center">
                    <i class="bi bi-robot fs-2 mb-2"></i>
                    <h6 class="card-title">Умный ассистент</h6>
                    <p class="card-text small text-muted">Агент анализирует сообщения с помощью LLM и инструментов</p>
                    <span class="badge bg-warning text-dark"><i class="bi bi-robot"></i> Agent</span>
                </div>
            </label>
        </div>
        <div class="col-12 col-md-6">
            <label class="card wizard-type-card h-100 p-3" onclick="selectType(this, 'agent_moderation')">
                <input type="radio" name="pipeline_type" value="agent_moderation">
                <div class="card-body text-center">
                    <i class="bi bi-shield-check fs-2 mb-2"></i>
                    <h6 class="card-title">Агент-модерация</h6>
                    <p class="card-text small text-muted">Агент модерации с доступом к инструментам поиска и удаления</p>
                    <span class="badge bg-warning text-dark"><i class="bi bi-robot"></i> Agent</span>
                </div>
            </label>
        </div>
    </div>
</div>

{# === Step 2: Sources === #}
<div class="wizard-step" id="step-2">
    <h5 class="mb-3">Каналы-источники</h5>
    <p class="text-muted">Выберите каналы, из которых будут поступать сообщения.</p>
    <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="Поиск каналов..." data-picker-search>
        <div class="list-group picker-list"></div>
        <small class="text-muted d-none" data-picker-empty>Ничего не найдено</small>
    </div>
</div>

{# === Step 3: Action Config === #}
<div class="wizard-step" id="step-3">

    {# -- Forward panel -- #}
    <div class="action-panel d-none" id="panel-forward">
        <h5 class="mb-3">Целевые диалоги</h5>
        <p class="text-muted">Выберите каналы/чаты, куда будут пересылаться сообщения.</p>
        <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>

    {# -- React panel -- #}
    <div class="action-panel d-none" id="panel-react">
        <h5 class="mb-3">Реакции</h5>
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">Emoji реакция</label>
                <input class="form-control" type="text" name="react_emoji" placeholder="Например: 👍 🔥 ❤️" value="">
                <div class="form-text">Один emoji или несколько через пробел/запятую — при каждом запуске будет выбран случайный.</div>
            </div>
        </div>
        <h6 class="mt-4 mb-2">Задержка (опционально)</h6>
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <label class="form-label">Мин (сек)</label>
                <input class="form-control" type="number" name="delay_min" min="0" value="5">
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label">Макс (сек)</label>
                <input class="form-control" type="number" name="delay_max" min="0" value="60">
            </div>
        </div>
    </div>

    {# -- Filter+Action panel -- #}
    <div class="action-panel d-none" id="panel-filter_action">
        <h5 class="mb-3">Фильтрация</h5>
        <div class="row g-3 mb-3">
            <div class="col-12 col-md-6">
                <label class="form-label">Тип фильтра</label>
                <select class="form-select" name="filter_type" onchange="toggleFilterSubpanel()">
                    <option value="keywords">По ключевым словам</option>
                    <option value="regex">По регулярному выражению</option>
                    <option value="service_message">Служебные сообщения</option>
                    <option value="anonymous_sender">Анонимные сообщения</option>
                </select>
            </div>
        </div>

        <div id="filter-keywords" class="mb-3">
            <label class="form-label">Ключевые слова (по одному на строку)</label>
            <textarea class="form-control" name="filter_keywords" rows="3" placeholder="crypto&#10;buy now&#10;free money"></textarea>
        </div>
        <div id="filter-regex" class="mb-3 d-none">
            <label class="form-label">Регулярное выражение</label>
            <input class="form-control" type="text" name="filter_pattern" placeholder="https?://\S+">
        </div>
        <div id="filter-service" class="mb-3 d-none">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label">Message kind</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="filter_message_kind_service" value="1" checked>
                        <label class="form-check-label">service</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="filter_message_kind_regular" value="1">
                        <label class="form-check-label">regular</label>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label">Sender kind</label>
                    {% for value in ["user", "anonymous_admin", "channel", "unknown"] %}
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="filter_sender_kind_{{ value }}" value="1">
                        <label class="form-check-label">{{ value }}</label>
                    </div>
                    {% endfor %}
                </div>
                <div class="col-12">
                    <label class="form-label">Service actions</label>
                    <div class="d-flex flex-wrap gap-3">
                        {% for value in ["join", "leave", "pin", "title_changed", "photo_changed", "migrate", "created", "other"] %}
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="filter_service_action_{{ value }}" value="1" {{ "checked" if value in ["join", "leave"] else "" }}>
                            <span class="form-check-label">{{ value }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label">Media types</label>
                    <div class="d-flex flex-wrap gap-3">
                        {% for value in ["service", "text", "photo", "video", "voice", "audio", "sticker", "document", "poll"] %}
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="filter_media_type_{{ value }}" value="1">
                            <span class="form-check-label">{{ value }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="filter_has_text" value="1">
                        <label class="form-check-label">Только сообщения с текстом</label>
                    </div>
                </div>
            </div>
        </div>
        <div id="filter-anonymous" class="mb-3 d-none">
            <p class="text-muted">Будут отфильтрованы сообщения c `sender_kind=anonymous_admin`.</p>
        </div>

        <h5 class="mt-4 mb-3">Действие с отфильтрованными</h5>
        <div class="row g-3 mb-3">
            <div class="col-12 col-md-6">
                <label class="form-label">Тип действия</label>
                <select class="form-select" name="action_type" onchange="toggleActionSubpanel()">
                    <option value="forward">Переслать</option>
                    <option value="react">Поставить реакцию</option>
                    <option value="delete_message">Удалить</option>
                </select>
            </div>
        </div>

        <div id="action-forward" class="mb-3">
            <label class="form-label">Целевые диалоги</label>
            <div class="searchable-picker" data-picker-name="filter_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>
                </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>
        <div id="action-react" class="mb-3 d-none">
            <label class="form-label">Emoji</label>
            <input class="form-control" type="text" name="action_react_emoji" maxlength="10" value="">
        </div>
        <div id="action-delete" class="mb-3 d-none">
            <p class="text-muted">Отфильтрованные сообщения будут удалены.</p>
        </div>
    </div>

    {# -- Cleanup panel -- #}
    <div class="action-panel d-none" id="panel-cleanup">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> Преднастроенный пайплайн: автоматически удаляет сообщения о присоединении/выходе пользователей из чата.
            Никаких дополнительных настроек не требуется.
        </div>
    </div>

    {# -- LLM panels (shared for rewrite/summarize/translate/content_gen) -- #}
    <div class="action-panel d-none" id="panel-rewrite">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Пайплайн не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="llm_model" placeholder="Например: openai:gpt-4o-mini">
                <div class="form-text">Формат: provider:model_id. Оставьте пустым для модели по умолчанию.</div>
            </div>
        </div>
        <div class="alert alert-info mt-3">
            <i class="bi bi-info-circle"></i> Рерайт: переписывает текст сообщения своими словами, сохраняя смысл.
        </div>
    </div>

    <div class="action-panel d-none" id="panel-summarize">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Пайплайн не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="llm_model_sum" placeholder="Например: openai:gpt-4o-mini">
                <div class="form-text">Формат: provider:model_id. Оставьте пустым для модели по умолчанию.</div>
            </div>
        </div>
        <div class="alert alert-info mt-3">
            <i class="bi bi-info-circle"></i> Суммаризация: создаёт краткое содержание постов из каналов-источников.
        </div>
    </div>

    <div class="action-panel d-none" id="panel-translate">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Пайплайн не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="llm_model_tr" placeholder="Например: openai:gpt-4o-mini">
                <div class="form-text">Формат: provider:model_id. Оставьте пустым для модели по умолчанию.</div>
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label">Целевой язык</label>
                <input class="form-control" type="text" name="target_language" value="русский">
            </div>
        </div>
    </div>

    <div class="action-panel d-none" id="panel-content_gen">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Пайплайн не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="llm_model_gen" placeholder="Например: openai:gpt-4o-mini">
                <div class="form-text">Формат: provider:model_id. Оставьте пустым для модели по умолчанию.</div>
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label">Промпт для генерации</label>
            <textarea class="form-control" name="gen_prompt" rows="3" placeholder="Напиши пост на основе контекста"></textarea>
            <div class="form-text">Опишите что должен сгенерировать LLM на основе контекста из источников.</div>
        </div>
    </div>

    {# -- Agent panels -- #}
    <div class="action-panel d-none" id="panel-smart_assistant">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Агент не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="agent_model" placeholder="Например: openai:gpt-4o-mini">
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label">Макс. шагов</label>
                <input class="form-control" type="number" name="agent_max_steps" min="1" max="20" value="5">
            </div>
        </div>
        <div class="mb-3 mt-3">
            <label class="form-label">Системный промпт</label>
            <textarea class="form-control" name="agent_system_prompt" rows="3" placeholder="Ты контент-ассистент. Анализируй сообщения и создавай полезный контент."></textarea>
        </div>
    </div>

    <div class="action-panel d-none" id="panel-agent_moderation">
        {% if not llm_configured %}
        <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Ни один LLM-провайдер не настроен. Агент не сможет работать без LLM.</div>
        {% endif %}
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">LLM модель</label>
                <input class="form-control" type="text" name="agent_model_mod" placeholder="Например: openai:gpt-4o-mini">
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label">Макс. шагов</label>
                <input class="form-control" type="number" name="agent_max_steps_mod" min="1" max="20" value="5">
            </div>
        </div>
        <div class="mb-3 mt-3">
            <label class="form-label">Системный промпт</label>
            <textarea class="form-control" name="agent_system_prompt_mod" rows="3" placeholder="Ты модератор чата. Проверяй сообщения на спам и нарушающие правила."></textarea>
        </div>
    </div>
</div>

{# === Step 4: Schedule === #}
<div class="wizard-step" id="step-4">
    <h5 class="mb-3">Расписание</h5>
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <label class="form-label">Интервал запуска, мин</label>
            <input class="form-control" type="number" name="generate_interval_minutes" min="1" value="60">
        </div>
    </div>
    <div class="form-check mt-3">
        <input class="form-check-input" type="checkbox" name="is_active" value="true" id="wizard-active" checked>
        <label class="form-check-label" for="wizard-active">Активен сразу после создания</label>
    </div>
</div>

{# === Step 5: Review === #}
<div class="wizard-step" id="step-5">
    <h5 class="mb-3">Проверка</h5>
    <div id="wizard-review" class="card">
        <div class="card-body">
            <div id="review-content"></div>
        </div>
    </div>
</div>

{# Navigation buttons #}
<div class="d-flex justify-content-between mt-4">
    <button type="button" class="btn btn-secondary" id="btn-back" onclick="goBack()" style="display:none">
        <i class="bi bi-arrow-left"></i> Назад
    </button>
    <div class="ms-auto d-flex align-items-center gap-2">
        <button type="button" class="btn btn-primary" id="btn-next" onclick="goNext()">
            Далее <i class="bi bi-arrow-right"></i>
        </button>
        <div class="d-none align-items-center gap-2" id="run-controls">
            <span class="text-muted small">Собирать за последние:</span>
            <input type="number" name="since_value" id="since_value" value="24" min="1"
                   class="form-control form-control-sm" style="width:64px">
            <select name="since_unit" id="since_unit" class="form-select form-select-sm" style="width:72px">
                <option value="m">мин</option>
                <option value="h" selected>ч</option>
                <option value="d">д</option>
            </select>
            <button type="submit" name="run_after" value="1" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-play-fill"></i> Запустить
            </button>
            <button type="button" class="btn btn-outline-warning btn-sm" onclick="runDryRunCount()">
                <i class="bi bi-lightning"></i> Тест
            </button>
        </div>
        <button type="submit" name="run_after" value="" class="btn btn-success d-none" id="btn-submit">
            <i class="bi bi-check-lg"></i> Создать
        </button>
    </div>
</div>

<input type="hidden" name="pipeline_json" id="pipeline_json_input">
</form>

<script>
(function() {
    "use strict";
    var currentStep = 1;
    var pipelineType = null;
    var totalSteps = 5;

    window.selectType = function(card, type) {
        document.querySelectorAll(".wizard-type-card").forEach(function(c) {
            c.classList.remove("selected");
        });
        card.classList.add("selected");
        card.querySelector('input[type="radio"]').checked = true;
        pipelineType = type;
    };

    window.toggleFilterSubpanel = function() {
        var ft = document.querySelector('[name="filter_type"]').value;
        var panelMap = { service_message: "service", anonymous_sender: "anonymous" };
        var panelKey = panelMap[ft] || ft;
        ["keywords", "regex", "service", "anonymous"].forEach(function(t) {
            var el = document.getElementById("filter-" + t);
            if (el) el.classList.toggle("d-none", t !== panelKey);
        });
    };

    window.toggleActionSubpanel = function() {
        var at = document.querySelector('[name="action_type"]').value;
        var panelMap = { delete_message: "delete" };
        var panelKey = panelMap[at] || at;
        ["forward", "react", "delete"].forEach(function(t) {
            var el = document.getElementById("action-" + t);
            if (el) el.classList.toggle("d-none", t !== panelKey);
        });
    };

    function validateStep(step) {
        if (step === 1) {
            var nameVal = document.getElementById("wizard-name").value.trim();
            if (!nameVal) {
                alert("Введите название пайплайна в шапке формы");
                document.getElementById("wizard-name").focus();
                return false;
            }
            if (!pipelineType) { alert("Выберите тип пайплайна"); return false; }
        } else if (step === 2) {
            var src = document.querySelectorAll('[name="source_channel_ids"]');
            if (src.length === 0) { alert("Выберите хотя бы один канал-источник"); return false; }
        } else if (step === 3) {
            if (pipelineType === 'forward') {
                var tgts = document.querySelectorAll('[name="target_refs"]');
                if (tgts.length === 0) { alert("Выберите хотя бы один целевой диалог"); return false; }
            } else if (pipelineType === 'filter_action') {
                var at = document.querySelector('[name="action_type"]').value;
                if (at === 'forward') {
                    var ft = document.querySelectorAll('[name="filter_target_refs"]');
                    if (ft.length === 0) { alert("Выберите целевые диалоги для пересылки"); return false; }
                }
            }
        }
        return true;
    }

    window.goNext = function() {
        if (!validateStep(currentStep)) return;
        if (currentStep === 1) {
            configureActionPanel();
        }
        if (currentStep === 4) {
            renderReview();
        }
        showStep(currentStep + 1);
    };

    window.goBack = function() {
        showStep(currentStep - 1);
    };

    function showStep(n) {
        if (n < 1 || n > totalSteps) return;
        document.querySelectorAll(".wizard-step").forEach(function(s) { s.classList.remove("active"); });
        document.getElementById("step-" + n).classList.add("active");
        // Update stepper nav
        document.querySelectorAll(".wizard-step-card").forEach(function(card) {
            var s = parseInt(card.dataset.step);
            card.classList.remove("active", "completed");
            if (s === n) card.classList.add("active");
            else if (s < n) card.classList.add("completed");
        });
        // Toggle buttons
        document.getElementById("btn-back").style.display = n > 1 ? "" : "none";
        if (n === totalSteps) {
            document.getElementById("btn-next").classList.add("d-none");
            document.getElementById("btn-submit").classList.remove("d-none");
            document.getElementById("run-controls").classList.remove("d-none");
            document.getElementById("run-controls").classList.add("d-flex");
        } else {
            document.getElementById("btn-next").classList.remove("d-none");
            document.getElementById("btn-submit").classList.add("d-none");
            document.getElementById("run-controls").classList.add("d-none");
            document.getElementById("run-controls").classList.remove("d-flex");
        }
        currentStep = n;
    }

    function configureActionPanel() {
        document.querySelectorAll(".action-panel").forEach(function(p) { p.classList.add("d-none"); });
        var panel = document.getElementById("panel-" + pipelineType);
        if (panel) panel.classList.remove("d-none");
    }

    function getFormValues(name) {
        return Array.from(document.querySelectorAll('[name="' + name + '"]')).map(function(el) { return el.value; });
    }

    function parseTargetRefs(name) {
        name = name || "target_refs";
        return getFormValues(name).map(function(ref) {
            var parts = ref.split("|");
            return { phone: parts[0], dialog_id: parseInt(parts[1]) };
        });
    }

    function buildPipelineGraph() {
        var sourceIds = getFormValues("source_channel_ids").map(Number);
        var nodes = [];
        var edges = [];

        nodes.push({ id: "source_1", type: "source", name: "Источники", config: { channel_ids: sourceIds }, position: { x: 0, y: 0 } });
        nodes.push({ id: "fetch_1", type: "fetch_messages", name: "Загрузка сообщений", config: {}, position: { x: 110, y: 0 } });
        edges.push({ from: "source_1", to: "fetch_1" });
        var lastSourceId = "fetch_1";

        if (pipelineType === "forward") {
            var targets = parseTargetRefs();
            nodes.push({ id: "forward_1", type: "forward", name: "Пересылка", config: { targets: targets }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "forward_1" });

        } else if (pipelineType === "react") {
            var emojiRaw = document.querySelector('[name="react_emoji"]').value.trim();
            var emojiTokens = emojiRaw.split(/[,\s]+/).filter(Boolean);
            var reactConfig;
            if (emojiTokens.length > 1) {
                reactConfig = { emoji: emojiTokens[0], random_emojis: emojiTokens };
            } else {
                reactConfig = { emoji: emojiTokens[0] || "", random_emojis: [] };
            }
            var delayMin = parseFloat(document.querySelector('[name="delay_min"]').value) || 0;
            var delayMax = parseFloat(document.querySelector('[name="delay_max"]').value) || 0;
            var lastId = lastSourceId;
            if (delayMin > 0 || delayMax > 0) {
                nodes.push({ id: "delay_1", type: "delay", name: "Задержка", config: { min_seconds: delayMin, max_seconds: delayMax }, position: { x: 220, y: 0 } });
                edges.push({ from: lastSourceId, to: "delay_1" });
                lastId = "delay_1";
            }
            nodes.push({ id: "react_1", type: "react", name: "Реакция", config: reactConfig, position: { x: lastId === "delay_1" ? 440 : 220, y: 0 } });
            edges.push({ from: lastId, to: "react_1" });

        } else if (pipelineType === "filter_action") {
            var ft = document.querySelector('[name="filter_type"]').value;
            var filterConfig;
            if (ft === "keywords") {
                filterConfig = { type: "keywords", keywords: document.querySelector('[name="filter_keywords"]').value.split("\n").map(function(k) { return k.trim(); }).filter(Boolean) };
            } else if (ft === "regex") {
                filterConfig = { type: "regex", pattern: document.querySelector('[name="filter_pattern"]').value };
            } else if (ft === "service_message") {
                var messageKinds = [];
                if (document.querySelector('[name="filter_message_kind_service"]').checked) messageKinds.push("service");
                if (document.querySelector('[name="filter_message_kind_regular"]').checked) messageKinds.push("regular");
                var serviceActions = [];
                ["join", "leave", "pin", "title_changed", "photo_changed", "migrate", "created", "other"].forEach(function(value) {
                    var el = document.querySelector('[name="filter_service_action_' + value + '"]');
                    if (el && el.checked) serviceActions.push(value);
                });
                var senderKinds = [];
                ["user", "anonymous_admin", "channel", "unknown"].forEach(function(value) {
                    var el = document.querySelector('[name="filter_sender_kind_' + value + '"]');
                    if (el && el.checked) senderKinds.push(value);
                });
                var mediaTypes = [];
                ["service", "text", "photo", "video", "voice", "audio", "sticker", "document", "poll"].forEach(function(value) {
                    var el = document.querySelector('[name="filter_media_type_' + value + '"]');
                    if (el && el.checked) mediaTypes.push(value);
                });
                filterConfig = {
                    type: "message_filter",
                    message_kinds: messageKinds,
                    service_actions: serviceActions,
                    sender_kinds: senderKinds,
                    media_types: mediaTypes,
                    has_text: document.querySelector('[name="filter_has_text"]').checked ? true : null
                };
            } else {
                filterConfig = { type: "message_filter", sender_kinds: ["anonymous_admin"] };
            }
            nodes.push({ id: "filter_1", type: "filter", name: "Фильтр", config: filterConfig, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "filter_1" });

            var at = document.querySelector('[name="action_type"]').value;
            var actionConfig = {};
            var actionType = at;
            var actionName = "";
            if (at === "forward") {
                actionConfig = { targets: parseTargetRefs("filter_target_refs") };
                actionName = "Пересылка";
            } else if (at === "react") {
                actionConfig = { emoji: document.querySelector('[name="action_react_emoji"]').value || "" };
                actionName = "Реакция";
            } else {
                actionName = "Удаление";
            }
            nodes.push({ id: "action_1", type: actionType, name: actionName, config: actionConfig, position: { x: 440, y: 0 } });
            edges.push({ from: "filter_1", to: "action_1" });

        } else if (pipelineType === "cleanup") {
            nodes.push({ id: "filter_1", type: "filter", name: "Фильтр join/leave", config: { type: "message_filter", message_kinds: ["service"], service_actions: ["join", "leave"] }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "filter_1" });
            nodes.push({ id: "delete_1", type: "delete_message", name: "Удаление", config: {}, position: { x: 440, y: 0 } });
            edges.push({ from: "filter_1", to: "delete_1" });

        } else if (pipelineType === "rewrite") {
            var llmModel = (document.querySelector('[name="llm_model"]') || {}).value || "";
            nodes.push({ id: "refine_1", type: "llm_refine", name: "Рерайт", config: { prompt: "Перепиши следующий текст своими словами, сохранив смысл:\n\n{text}", model: llmModel }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "refine_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "refine_1", to: "publish_1" });

        } else if (pipelineType === "summarize") {
            var llmModelS = (document.querySelector('[name="llm_model_sum"]') || {}).value || "";
            nodes.push({ id: "context_1", type: "retrieve_context", name: "Контекст", config: {}, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "context_1" });
            nodes.push({ id: "llm_1", type: "llm_generate", name: "Суммаризация", config: { prompt_template: "Сделай краткое содержание следующих сообщений:\n\n{source_messages}", model: llmModelS }, position: { x: 330, y: 0 } });
            edges.push({ from: "context_1", to: "llm_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "llm_1", to: "publish_1" });

        } else if (pipelineType === "translate") {
            var llmModelT = (document.querySelector('[name="llm_model_tr"]') || {}).value || "";
            var targetLang = (document.querySelector('[name="target_language"]') || {}).value || "русский";
            nodes.push({ id: "llm_1", type: "llm_generate", name: "Перевод", config: { prompt_template: "Переведи следующий текст на " + targetLang + ":\n\n{source_messages}", model: llmModelT }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "llm_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "llm_1", to: "publish_1" });

        } else if (pipelineType === "content_gen") {
            var llmModelG = (document.querySelector('[name="llm_model_gen"]') || {}).value || "";
            var genPrompt = (document.querySelector('[name="gen_prompt"]') || {}).value || "Напиши пост на основе контекста";
            {% raw %}var safePrompt = genPrompt.replace(/\{/g, "{{").replace(/\}/g, "}}");{% endraw %}
            nodes.push({ id: "context_1", type: "retrieve_context", name: "Контекст", config: {}, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "context_1" });
            nodes.push({ id: "llm_1", type: "llm_generate", name: "Генерация", config: { prompt_template: safePrompt + "\n\n{source_messages}", model: llmModelG }, position: { x: 330, y: 0 } });
            edges.push({ from: "context_1", to: "llm_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "llm_1", to: "publish_1" });

        } else if (pipelineType === "smart_assistant") {
            var agentModel = (document.querySelector('[name="agent_model"]') || {}).value || "";
            var agentMaxSteps = parseInt((document.querySelector('[name="agent_max_steps"]') || {}).value) || 5;
            var agentPrompt = (document.querySelector('[name="agent_system_prompt"]') || {}).value || "Ты контент-ассистент. Анализируй сообщения и создавай полезный контент.";
            nodes.push({ id: "agent_1", type: "agent_loop", name: "Агент", config: { system_prompt: agentPrompt, max_steps: agentMaxSteps, model: agentModel }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "agent_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "agent_1", to: "publish_1" });

        } else if (pipelineType === "agent_moderation") {
            var agentModelM = (document.querySelector('[name="agent_model_mod"]') || {}).value || "";
            var agentMaxStepsM = parseInt((document.querySelector('[name="agent_max_steps_mod"]') || {}).value) || 5;
            var agentPromptM = (document.querySelector('[name="agent_system_prompt_mod"]') || {}).value || "Ты модератор чата. Проверяй сообщения на спам и нарушающие правила.";
            nodes.push({ id: "agent_1", type: "agent_loop", name: "Агент-модерация", config: { system_prompt: agentPromptM, max_steps: agentMaxStepsM, model: agentModelM }, position: { x: 220, y: 0 } });
            edges.push({ from: lastSourceId, to: "agent_1" });
            nodes.push({ id: "condition_1", type: "condition", name: "Условие", config: { field: "generated_text", operator: "not_empty" }, position: { x: 330, y: 0 } });
            edges.push({ from: "agent_1", to: "condition_1" });
            nodes.push({ id: "publish_1", type: "publish", name: "Публикация", config: { targets: [], mode: "moderated" }, position: { x: 440, y: 0 } });
            edges.push({ from: "condition_1", to: "publish_1" });
        }

        return { nodes: nodes, edges: edges };
    }

    function renderReview() {
        var graph = buildPipelineGraph();
        document.getElementById("pipeline_json_input").value = JSON.stringify(graph);
        var name = document.querySelector('[name="name"]').value || "Без названия";
        var interval = document.querySelector('[name="generate_interval_minutes"]').value;
        var sources = getFormValues("source_channel_ids");
        var flow = graph.nodes.map(function(n) { return n.name; }).join(" → ");

        var typeLabels = { forward: "Пересылка", react: "Авто-реакции", filter_action: "Фильтр + действие", cleanup: "Очистка чата", rewrite: "Рерайт через LLM", summarize: "Суммаризация", translate: "Перевод", content_gen: "Генерация контента", smart_assistant: "Умный ассистент", agent_moderation: "Агент-модерация" };
        var dl = document.createElement("dl");
        dl.className = "row mb-0";
        function addRow(dt, ddContent, isCode) {
            var dtEl = document.createElement("dt");
            dtEl.className = "col-sm-4";
            dtEl.textContent = dt;
            var ddEl = document.createElement("dd");
            ddEl.className = "col-sm-8";
            if (isCode) { var c = document.createElement("code"); c.textContent = ddContent; ddEl.appendChild(c); }
            else { ddEl.textContent = ddContent; }
            dl.appendChild(dtEl);
            dl.appendChild(ddEl);
        }
        addRow("Название", name);
        addRow("Тип", typeLabels[pipelineType] || pipelineType);
        addRow("Источники", sources.length + " каналов");
        addRow("Цепочка", flow, true);
        addRow("Интервал", interval + " мин");
        var reviewEl = document.getElementById("review-content");
        reviewEl.innerHTML = "";
        reviewEl.appendChild(dl);
    }

    // Live-update name row in review table as user types
    document.getElementById("wizard-name").addEventListener("input", function() {
        var nameEl = document.querySelector("#review-content dt");
        if (nameEl) {
            var dd = nameEl.nextElementSibling;
            if (dd) dd.textContent = this.value || "Без названия";
        }
    });

    // Form submit: validate name, copy target_refs for filter_action forward into main target_refs
    var form = document.getElementById("wizard-form");
    form.addEventListener("submit", function(e) {
        var n = document.getElementById("wizard-name").value.trim();
        if (!n) { e.preventDefault(); alert("Введите название пайплайна"); return; }
        // For filter_action with forward: copy filter_target_refs as target_refs
        if (pipelineType === "filter_action" && document.querySelector('[name="action_type"]').value === "forward") {
            getFormValues("filter_target_refs").forEach(function(val) {
                var inp = document.createElement("input");
                inp.type = "hidden";
                inp.name = "target_refs";
                inp.value = val;
                form.appendChild(inp);
            });
        }
    });
})();

window.runDryRunCount = function() {
    var sourceIds = Array.from(document.querySelectorAll('[name="source_channel_ids"]')).map(function(el) { return el.value; });
    var sv = document.getElementById("since_value").value;
    var su = document.getElementById("since_unit").value;
    var url = "/pipelines/dry-run-count?since_value=" + sv + "&since_unit=" + su
              + "&source_ids=" + sourceIds.join(",");
    fetch(url).then(function(r) { return r.json(); }).then(function(d) {
        showToast("Тест: " + d.total + " сообщений найдено, " + d.after_filter + " пройдут обработку");
    }).catch(function() { showToast("Ошибка при подсчёте"); });
};
</script>
{% endblock %}