{% from "_macros.html" import icon, pipeline_actions %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="mb-0"><i class="bi bi-diagram-3"></i> Пайплайны контента</h1>
    <div class="d-flex gap-2">
        <a class="btn btn-success btn-sm" href="/pipelines/create"><i class="bi bi-plus-lg"></i> Мастер</a>
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal"><i class="bi bi-upload"></i> Импорт</button>
        <a class="btn btn-outline-primary btn-sm" href="/pipelines/templates"><i class="bi bi-collection"></i> Шаблоны</a>
    </div>
</div>

<!-- Import modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Импорт pipeline из JSON</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="/pipelines/import" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Название (необязательно — перезаписывает имя из JSON)</label>
                        <input class="form-control" type="text" name="name_override" placeholder="Оставьте пустым для имени из JSON">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">JSON файл</label>
                        <input class="form-control" type="file" name="json_file" accept=".json">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Или вставьте JSON текст</label>
                        <textarea class="form-control font-monospace" name="json_text" rows="8" placeholder='{"name": "...", "nodes": [...], ...}'></textarea>
                    </div>
                </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-upload"></i> Импортировать</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% if not llm_configured %}
<div class="alert alert-warning d-flex align-items-start gap-2" role="alert">
    <i class="bi bi-exclamation-triangle-fill fs-5"></i>
    <div>
        <strong>LLM-провайдер не настроен</strong> — пайплайны с LLM-шагами работать не будут. Пайплайны без LLM (forward/publish) доступны. Добавьте провайдера в <a href="/settings">Настройках</a> или задайте переменную окружения с ключом API (например, <code>OPENAI_API_KEY</code>, <code>COHERE_API_KEY</code>).
        {% if llm_provider_statuses %}
        <ul class="mb-0 mt-2">
            {% for ps in llm_provider_statuses %}
            <li><strong>{{ ps.provider }}</strong>: {{ ps.reason }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
</div>
{% endif %}

{# === Collapsible Add Form === #}
<div class="card mb-4">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center"
         data-bs-toggle="collapse" data-bs-target="#add-pipeline-form" style="cursor:pointer">
        <span><i class="bi bi-plus-circle"></i> Новый пайплайн</span>
        <i class="bi bi-chevron-down"></i>
    </div>
    <div class="collapse" id="add-pipeline-form">
        <div class="card-body">
            <form method="post" action="/pipelines/add{% if selected_phone %}?phone={{ selected_phone|urlencode }}{% endif %}" data-busy>
                <div class="row g-3 mb-3">
                    <div class="col-12 col-lg-6">
                        <label class="form-label">Название</label>
                        <input class="form-control" type="text" name="name" required placeholder="Daily digest">
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <label class="form-label">Бэкенд</label>
                        <select class="form-select" name="generation_backend">
                            {% for backend in generation_backends %}
                            <option value="{{ backend.value }}">{{ backend.value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <label class="form-label">Режим публикации</label>
                        <select class="form-select" name="publish_mode">
                            {% for mode in publish_modes %}
                            <option value="{{ mode.value }}">{{ mode.value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row g-3 mb-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 class="col-6 col-md-4">
                        <label class="form-label">LLM модель</label>
                        <input class="form-control" type="text" name="llm_model" placeholder="claude-sonnet-4.5">
                    </div>
                    <div class="col-12 col-md-5">
                        <label class="form-label">Image model</label>
                        <input class="form-control" type="text" name="image_model" placeholder="optional" list="image-model-list">
                        <datalist id="image-model-list">
                            <option value="together:black-forest-labs/FLUX.1-schnell">
                            <option value="together:black-forest-labs/FLUX.1-dev">
                            <option value="openai:dall-e-3">
                            <option value="huggingface:stabilityai/stable-diffusion-xl-base-1.0">
                            <option value="replicate:black-forest-labs/flux-schnell">
                        </datalist>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Шаблон промпта</label>
                    <textarea class="form-control" name="prompt_template" rows="5" required placeholder="Собери пост на основе {source_messages}"></textarea>
                    <div class="form-text">
                        Доступные переменные:
                        {% for variable in prompt_variables %}
                        <code>{{ "{" }}{{ variable }}{{ "}" }}</code>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# Source channels — AJAX searchable picker #}
                <div class="row g-3 mb-3">
                    <div class="col-12 col-lg-6">
                        <label class="form-label">Каналы-источники</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="Поиск каналов..." data-picker-search>
                            <div class="list-group picker-list"></div>
                            <small class="text-muted d-none" data-picker-empty>Ничего не найдено</small>
                        </div>
                    </div>

                    {# Target dialogs — searchable picker #}
                    <div class="col-12 col-lg-6">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Целевые диалоги</label>
                            {% if selected_phone %}
                            <a class="small" href="/pipelines?phone={{ selected_phone|urlencode }}&refresh=1">Обновить кэш</a>
                            {% endif %}
                        </div>
                        <div class="searchable-picker mt-1" 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>
                </div>

                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" name="is_active" value="true" id="pipeline-active" checked>
                    <label class="form-check-label" for="pipeline-active">Pipeline активен</label>
                </div>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Создать пайплайн</button>
            </form>
        </div>
    </div>
</div>

{# === Pipeline Card Grid (unified desktop + mobile) === #}
{% if items %}
<div class="row g-3">
    {% for item in items %}
    {% set pipeline = item.pipeline %}
    {% set pipeline_needs_llm_val = needs_llm_map.get(pipeline.id, true) %}
    <div class="col-12" id="pipeline-card-{{ pipeline.id }}">
        <div class="card{% if not pipeline.is_active %} opacity-50{% endif %}">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start gap-2">
                    <div class="min-w-0 flex-fill">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            {# Type badge: DAG vs Legacy #}
                            {% if pipeline.pipeline_json %}
                            <span class="badge bg-info text-dark"><i class="bi bi-diagram-3"></i> DAG</span>
                            {% else %}
                            <span class="badge bg-secondary"><i class="bi bi-list-task"></i> Legacy</span>
                            {% endif %}
                            {# Status indicator #}
                            {% if pipeline.is_active %}
                            <i class="bi bi-circle-fill text-success" title="Активен"></i>
                            {% else %}
                            <i class="bi bi-circle text-secondary" title="Неактивен"></i>
                            {% endif %}
                            <strong class="text-truncate">{{ pipeline.name }}</strong>
                            {% if pipeline.id is not none %}
                            <span class="badge bg-light text-dark border">ID: {{ pipeline.id }}</span>
                            {% endif %}
                        </div>
                        <div class="small text-muted">
                            {{ pipeline.generation_backend.value }} / {{ pipeline.publish_mode.value }}
                            &middot; {{ pipeline.generate_interval_minutes }} мин
                            {% set nr = next_runs.get(pipeline.id) %}
                            {% if nr %}
                            &middot; следующий: {{ nr|local_dt }}
                            {% endif %}
                        </div>
                        {# Sources & Targets #}
                        <div class="row g-2 mt-1">
                            {% if item.source_titles %}
                            <div class="col-auto">
                                <span class="badge bg-light text-dark border"><i class="bi bi-box-arrow-in-right"></i> {{ item.source_titles[:3]|join(", ") }}{% if item.source_titles|length > 3 %} +{{ item.source_titles|length - 3 }}{% endif %}</span>
                            </div>
                            {% endif %}
                            {% if item.targets %}
                            <div class="col-auto">
                                <span class="badge bg-light text-dark border"><i class="bi bi-box-arrow-right"></i> {% for target in item.targets[:3] %}{{ target.title or target.dialog_id }}{% if not loop.last %}, {% endif %}{% endfor %}{% if item.targets|length > 3 %} +{{ item.targets|length - 3 }}{% endif %}</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="text-nowrap">
                        {{ pipeline_actions(pipeline, needs_llm=pipeline_needs_llm_val, llm_configured=llm_configured) }}
                    </div>
                </div>
                {# AI edit row (DAG pipelines) #}
                {% if pipeline.pipeline_json %}
                <div id="pipeline-ai-edit-{{ pipeline.id }}" class="d-none mt-3">
                    <div class="p-3 border rounded bg-light">
                        <label class="form-label fw-semibold"><i class="bi bi-robot"></i> AI-редактирование pipeline</label>
                        <pre class="border rounded p-2 bg-white small" style="max-height:300px;overflow:auto" id="pipeline-json-preview-{{ pipeline.id }}">Загрузка...</pre>
                        <div class="input-group mb-2">
                            <input class="form-control" type="text" id="ai-instruction-{{ pipeline.id }}" placeholder="Инструкция для AI">
                            <button class="btn btn-primary" type="button" onclick="sendAiEdit({{ pipeline.id }})"><i class="bi bi-send"></i> Применить</button>
                        </div>
                        <div id="ai-edit-result-{{ pipeline.id }}" class="text-muted small"></div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-5">
    <i class="bi bi-diagram-3 fs-1 text-muted"></i>
    <p class="mt-2 mb-1">Нет созданных пайплайнов.</p>
    <a href="/pipelines/templates" class="btn btn-primary btn-sm"><i class="bi bi-collection"></i> Создайте из шаблона</a>
    или заполните форму выше.
</div>
{% endif %}

<script>
function toggleAiEdit(id) {
    const el = document.getElementById("pipeline-ai-edit-" + id);
    el.classList.toggle("d-none");
    if (!el.classList.contains("d-none")) {
        loadPipelineJson(id);
    }
}

async function loadPipelineJson(id) {
    const el = document.getElementById("pipeline-json-preview-" + id);
    if (!el) return;
    try {
        const resp = await fetch("/pipelines/" + id + "/export");
        const data = await resp.json();
        el.textContent = JSON.stringify(data.pipeline_json || data, null, 2);
    } catch(e) {
        el.textContent = "Ошибка загрузки JSON: " + e;
    }
}

async function sendAiEdit(id) {
    const instruction = document.getElementById("ai-instruction-" + id).value.trim();
    if (!instruction) return;
    const resultEl = document.getElementById("ai-edit-result-" + id);
    resultEl.textContent = "Отправка...";
    try {
        const resp = await fetch("/pipelines/" + id + "/ai-edit", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({instruction})
        });
        const data = await resp.json();
        if (data.ok) {
            document.getElementById("pipeline-json-preview-" + id).textContent = JSON.stringify(data.pipeline_json, null, 2);
            resultEl.textContent = "Обновлено успешно. Обновите страницу для применения.";
            resultEl.className = "text-success small";
        } else {
            resultEl.textContent = "Ошибка: " + (data.error || "неизвестная ошибка");
            resultEl.className = "text-danger small";
        }
    } catch(e) {
        resultEl.textContent = "Ошибка: " + e;
        resultEl.className = "text-danger small";
    }
}
</script>