{% extends "base.html" %}
{% block title %}Генерация — {{ pipeline.name }}{% endblock %}
{% block content %}
<h1>Генерация: {{ pipeline.name }}</h1>

<form method="post" action="/pipelines/{{ pipeline.id }}/generate" data-busy>
    <div class="row g-3 mb-3">
        <div class="col-12 col-md-6">
            <label class="form-label">LLM model</label>
            <input class="form-control" name="model" value="{{ pipeline.llm_model or '' }}">
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Max tokens</label>
            <input class="form-control" type="number" name="max_tokens" value="256">
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Temperature</label>
            <input class="form-control" type="number" step="0.1" name="temperature" value="0.0">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Preview</button>
    <button type="button" id="stream-btn" class="btn btn-outline-secondary">Stream Preview</button>
</form>

<form method="post" action="/pipelines/{{ pipeline.id }}/run" data-busy class="mt-3">
    <button type="submit" class="btn btn-success">Run now</button>
</form>

<pre id="stream-output" style="white-space: pre-wrap; margin-top: 1rem;"></pre>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const btn = document.getElementById('stream-btn');
  if(!btn) return;
  btn.addEventListener('click', function(){
    const model = document.querySelector('input[name="model"]').value || '';
    const max_tokens = document.querySelector('input[name="max_tokens"]').value || '';
    const temperature = document.querySelector('input[name="temperature"]').value || '';
    const out = document.getElementById('stream-output');
    out.textContent = '';
    const url = `/pipelines/{{ pipeline.id }}/generate-stream?model=${encodeURIComponent(model)}&max_tokens=${encodeURIComponent(max_tokens)}&temperature=${encodeURIComponent(temperature)}`;
    const es = new EventSource(url);
    es.onmessage = function(e){
      try {
        const d = JSON.parse(e.data);
        out.textContent = d.text || '';
      } catch (err) {
        out.textContent += e.data;
      }
    };
    es.addEventListener('done', function(e){ es.close(); });
    es.addEventListener('error', function(e){ es.close(); });
  });
});
</script>

{% if error %}
<div class="alert alert-danger mt-3">Ошибка: {{ error }}</div>
{% endif %}

{% if run %}
<div class="card mt-4">
    <div class="card-header">Preview (run id={{ run.id }})</div>
    <div class="card-body">
        <pre style="white-space: pre-wrap">{{ run.generated_text }}</pre>
        <h5 class="mt-3">Citations</h5>
        <ul>
            {% for c in run.metadata.citations %}
            <li>{{ c.channel_title }} id={{ c.message_id }} date={{ c.date|local_dt(fmt="date") }}</li>
            {% endfor %}
        </ul>
        <form method="post" action="/pipelines/{{ pipeline.id }}/publish" data-busy>
            <input type="hidden" name="run_id" value="{{ run.id }}">
            <button type="submit" class="btn btn-success">Publish</button>
        </form>
    </div>
</div>
{% endif %}

{% endblock %}