{% 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>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">Импорт JSON</button>
        <a class="btn btn-outline-primary btn-sm" href="/pipelines/templates">Шаблоны</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">Импортировать</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% if not llm_configured %}
<div class="alert alert-warning" role="alert">
    LLM-провайдер не настроен — генерация контента недоступна. Установите переменную окружения с ключом API (например, <code>OPENAI_API_KEY</code>, <code>COHERE_API_KEY</code>) и перезапустите сервер.
</div>
{% endif %}

<div class="card mb-4">
    <div class="card-header fw-semibold">Новый pipeline</div>
    <div class="card-body">
    {% if llm_configured %}
        <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-12 col-md-4 col-lg-3">
                    <label class="form-label">Backend</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-12 col-md-4 col-lg-3">
                    <label class="form-label">Publish mode</label>
                    <select class="form-select" name="publish_mode">
                        {% for mode in publish_modes %}
                        <option value="{{ mode.value }}">{{ mode.value }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label">Интервал (мин)</label>
                    <input class="form-control" type="number" name="generate_interval_minutes" min="1" value="60">
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <label class="form-label">LLM model</label>
                    <input class="form-control" type="text" name="llm_model" placeholder="claude-sonnet-4.5">
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <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">Prompt template</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>
            <div class="row g-3 mb-3">
                <div class="col-12 col-lg-6">
                    <label class="form-label">Source channels</label>
                    <select class="form-select" name="source_channel_ids" multiple size="8" required>
                        {% for channel in channels %}
                        <option value="{{ channel.channel_id }}">
                            {{ channel.title or channel.channel_id }}
                            {% if channel.username %}(@{{ channel.username }}){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="d-flex justify-content-between align-items-center">
                        <label class="form-label mb-0">Target dialogs</label>
                        {% if selected_phone %}
                        <a class="small" href="/pipelines?phone={{ selected_phone|urlencode }}&refresh=1">Обновить кэш {{ selected_phone }}</a>
                        {% endif %}
                    </div>
                    <select class="form-select" name="target_refs" multiple size="8" required>
                        {% for account in accounts %}
                        {% set dialogs = cached_dialogs.get(account.phone, []) %}
                        <optgroup label="{{ account.phone }}">
                            {% for dialog in dialogs %}
                            <option value="{{ account.phone }}|{{ dialog.channel_id }}">
                                {{ dialog.title or dialog.channel_id }} [{{ dialog.channel_type }}]
                            </option>
                            {% endfor %}
                        </optgroup>
                        {% endfor %}
                    </select>
                    <div class="form-text">Список targets берётся из dialog cache аккаунтов.</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">Создать pipeline</button>
        </form>
    {% else %}
        <p class="text-muted mb-0">Настройте LLM провайдер для создания пайплайнов.</p>
    {% endif %}
    </div>
</div>

{% if items %}
<div class="table-responsive">
    <table class="table table-striped align-middle">
        <thead>
            <tr>
                <th>ID</th>
                <th>Название</th>
                <th>Sources</th>
                <th>Targets</th>
                <th>Backend</th>
                <th>Mode</th>
                <th>Интервал</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            {% set pipeline = item.pipeline %}
            <tr id="pipeline-row-{{ pipeline.id }}">
                <td>{{ pipeline.id }}</td>
                <td>
                    <div class="fw-semibold">{{ pipeline.name }}</div>
                    <small class="text-muted">{{ "active" if pipeline.is_active else "inactive" }}</small>
                </td>
                <td>
                    {% for source_title in item.source_titles %}
                    <div>{{ source_title }}</div>
                    {% endfor %}
                </td>
                <td>
                    {% for target in item.targets %}
                    <div>{{ target.phone }} → {{ target.title or target.dialog_id }}</div>
                    {% endfor %}
                </td>
                <td>{{ pipeline.generation_backend.value }}</td>
                <td>{{ pipeline.publish_mode.value }}</td>
                <td>
                    {{ pipeline.generate_interval_minutes }} мин
                    {% set nr = next_runs.get(pipeline.id) %}
                    {% if nr %}
                    <div class="small text-muted">Next: {{ nr|local_dt }}</div>
                    {% else %}
                    <div class="small text-muted">Не запланировано</div>
                    {% endif %}
                </td>
                <td class="text-nowrap">
                    {% if not pipeline.pipeline_json %}
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="togglePipelineEdit({{ pipeline.id }})">Редактировать</button>
                    {% endif %}
                    <a class="btn btn-outline-primary btn-sm{% if not llm_configured %} disabled{% endif %}" href="/pipelines/{{ pipeline.id }}/generate" {% if not llm_configured %}aria-disabled="true" title="Настройте LLM провайдер"{% endif %}>Generate</a>
                    <form method="post" action="/pipelines/{{ pipeline.id }}/run" class="d-inline" data-busy>
                        <button type="submit" class="btn btn-outline-success btn-sm" {% if not llm_configured %}disabled title="Настройте LLM провайдер"{% endif %}>Run now</button>
                    </form>
                    <form method="post" action="/pipelines/{{ pipeline.id }}/toggle" class="d-inline" data-busy>
                        <button type="submit" class="btn btn-outline-secondary btn-sm">{{ "Выключить" if pipeline.is_active else "Включить" }}</button>
                    </form>
                    <a class="btn btn-outline-dark btn-sm" href="/pipelines/{{ pipeline.id }}/export" title="Экспорт JSON">JSON</a>
                    {% if pipeline.pipeline_json %}
                    <button type="button" class="btn btn-outline-info btn-sm" {% if llm_configured %}onclick="toggleAiEdit({{ pipeline.id }})"{% else %}disabled{% endif %} title="{% if llm_configured %}Редактировать через AI{% else %}Настройте LLM провайдер{% endif %}">AI</button>
                    {% endif %}
                    <form method="post" action="/pipelines/{{ pipeline.id }}/delete{% if selected_phone %}?phone={{ selected_phone|urlencode }}{% endif %}" class="d-inline" data-busy onsubmit="return confirm('Удалить pipeline?')">
                        <button type="submit" class="btn btn-outline-danger btn-sm">Удалить</button>
                    </form>
                </td>
            </tr>
            <tr id="pipeline-ai-edit-{{ pipeline.id }}" class="d-none">
                <td colspan="8">
                    <div class="p-3 border rounded bg-light">
                        <label class="form-label fw-semibold">Редактировать pipeline через AI</label>
                        <div class="mb-2">
                            <pre class="border rounded p-2 bg-white small" style="max-height:300px;overflow:auto" id="pipeline-json-preview-{{ pipeline.id }}">Загрузка...</pre>
                        </div>
                        <div class="input-group mb-2">
                            <input class="form-control" type="text" id="ai-instruction-{{ pipeline.id }}" placeholder="Инструкция для AI (например: добавь шаг рефайна, смени модель на gpt-4o, добавь генерацию картинки)">
                            <button class="btn btn-primary" type="button" onclick="sendAiEdit({{ pipeline.id }})">Применить</button>
                        </div>
                        <div id="ai-edit-result-{{ pipeline.id }}" class="text-muted small"></div>
                    </div>
                </td>
            </tr>
            <tr id="pipeline-edit-{{ pipeline.id }}" class="d-none">
                <td colspan="8">
                    <form method="post" action="/pipelines/{{ pipeline.id }}/edit{% 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" value="{{ pipeline.name }}" required>
                            </div>
                            <div class="col-12 col-md-4 col-lg-2">
                                <label class="form-label">Backend</label>
                                <select class="form-select" name="generation_backend">
                                    {% for backend in generation_backends %}
                                    <option value="{{ backend.value }}" {{ "selected" if backend == pipeline.generation_backend else "" }}>{{ backend.value }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-md-4 col-lg-2">
                                <label class="form-label">Mode</label>
                                <select class="form-select" name="publish_mode">
                                    {% for mode in publish_modes %}
                                    <option value="{{ mode.value }}" {{ "selected" if mode == pipeline.publish_mode else "" }}>{{ mode.value }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-md-4 col-lg-2">
                                <label class="form-label">Интервал</label>
                                <input class="form-control" type="number" name="generate_interval_minutes" min="1" value="{{ pipeline.generate_interval_minutes }}">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label">LLM model</label>
                                <input class="form-control" type="text" name="llm_model" value="{{ pipeline.llm_model or '' }}">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label">Image model</label>
                                <input class="form-control" type="text" name="image_model" value="{{ pipeline.image_model or '' }}" list="image-model-list">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Prompt template</label>
                            <textarea class="form-control" name="prompt_template" rows="5" required>{{ pipeline.prompt_template }}</textarea>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-lg-6">
                                <label class="form-label">Source channels</label>
                                <select class="form-select" name="source_channel_ids" multiple size="8" required>
                                    {% for channel in channels %}
                                    <option value="{{ channel.channel_id }}" {{ "selected" if channel.channel_id in item.source_ids else "" }}>
                                        {{ channel.title or channel.channel_id }}
                                        {% if channel.username %}(@{{ channel.username }}){% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-lg-6">
                                <label class="form-label">Target dialogs</label>
                                <select class="form-select" name="target_refs" multiple size="8" required>
                                    {% for account in accounts %}
                                    {% set dialogs = cached_dialogs.get(account.phone, []) %}
                                    <optgroup label="{{ account.phone }}">
                                        {% for dialog in dialogs %}
                                        {% set ref = account.phone ~ "|" ~ dialog.channel_id %}
                                        <option value="{{ ref }}" {{ "selected" if ref in item.target_refs else "" }}>
                                            {{ dialog.title or dialog.channel_id }} [{{ dialog.channel_type }}]
                                        </option>
                                        {% endfor %}
                                    </optgroup>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_active" value="true" id="pipeline-edit-active-{{ pipeline.id }}" {{ "checked" if pipeline.is_active else "" }}>
                            <label class="form-check-label" for="pipeline-edit-active-{{ pipeline.id }}">Pipeline активен</label>
                        </div>
                        <button type="submit" class="btn btn-primary me-2">Сохранить</button>
                        <button type="button" class="btn btn-secondary" onclick="togglePipelineEdit({{ pipeline.id }})">Отмена</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p>Пайплайнов пока нет.</p>
{% endif %}

<script>
function togglePipelineEdit(id) {
    document.getElementById("pipeline-row-" + id).classList.toggle("d-none");
    document.getElementById("pipeline-edit-" + id).classList.toggle("d-none");
}

function toggleAiEdit(id) {
    const row = document.getElementById("pipeline-ai-edit-" + id);
    row.classList.toggle("d-none");
    if (!row.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>
{% endblock %}