{% extends "base.html" %}
{% block body %}
<div class="page-head">
  <div>
    <h1>Тест промпта райтера</h1>
    <p class="muted">Песочница для свободной части <span class="mono">ai_writer_prompt</span>. Посты, рерайт и статусы в БД не меняются.</p>
  </div>
  <a class="btn" href="/workers">Настройки AI</a>
</div>

<details class="panel prompt-test-help" open>
  <summary><strong>Как пользоваться</strong></summary>
  <div class="hint-grid">
    <div>
      <div class="hint-label">Что тестируем</div>
      <p>Отправляется только текст из поля ниже как system prompt. <span class="mono">ai_writer_contract</span> специально не добавляется, чтобы можно было быстро проверять стиль, структуру и редакторские правила.</p>
    </div>
    <div>
      <div class="hint-label">Что уйдёт в модель</div>
      <p>Один выбранный raw-пост в том же формате, что использует райтер: <span class="mono">categories</span>, <span class="mono">producer_name</span>, <span class="mono">producer_tag</span>, ссылка, AI-оценка, медиа и обрезанный исходный текст.</p>
    </div>
    <div>
      <div class="hint-label">Что безопасно менять</div>
      <p>Голос канала, структуру текста, длину, правила про эмоджи, запрет выдумок, примеры формулировок и логику упоминания производителя/магазина. JSON-контракт рабочего воркера живёт отдельно.</p>
    </div>
    <div>
      <div class="hint-label">Что не происходит</div>
      <p>Рерайт не сохраняется, batch не создаётся, категория и статус поста не меняются. Тест только тратит токены текущей модели райтера.</p>
    </div>
  </div>
</details>

<form class="prompt-test-layout" method="post" action="/prompt-test">
  <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
  <section class="panel prompt-test-main">
    <div class="prompt-test-controls">
      <label>
        <span>Фильтр</span>
        <select name="q_status" data-status-select>
          {% for item in status_options %}
          <option value="{{ item.value }}" {% if q_status == item.value %}selected{% endif %}>{{ item.label }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span>Пост для теста</span>
        <select name="post_id" data-post-select>
          {% for post in posts %}
          <option value="{{ post.id }}" {% if selected and post.id == selected.id %}selected{% endif %}>{{ post.label }}</option>
          {% endfor %}
        </select>
      </label>
      <div>
        <span class="muted">Модель</span>
        <div class="prompt-test-model"><span class="pill">{{ provider }}</span><span class="mono">{{ model or "не выбрана" }}</span></div>
      </div>
    </div>

    {% if selected %}
    <div class="prompt-test-post">
      <div class="prompt-test-post-head">
        <strong>#{{ selected.id }} · {{ selected.source_name }}</strong>
        <a href="{{ selected.original_url }}" target="_blank" rel="noopener">Оригинал</a>
      </div>
      <div class="muted">{{ selected.posted_at_fmt or selected.created_at_fmt }} · {{ selected.media_count }} медиа · {{ selected.media_types or [] }} · оценка {{ selected.qualification_score or "—" }}</div>
      <pre>{{ selected.raw_text }}</pre>
    </div>
    {% endif %}

    <label>
      <span>ai_writer_prompt для теста</span>
      <textarea name="prompt" rows="18" spellcheck="false">{{ prompt }}</textarea>
    </label>
    <div class="dialog-actions">
      <button class="btn primary" type="submit">Отправить тест</button>
    </div>
  </section>

  <aside class="prompt-test-side">
    <section class="panel">
      <h2>Payload</h2>
      <p class="muted">Именно это отправится user-сообщением. Текст обрезан по настройке <span class="mono">ai_writer_max_text_chars={{ max_text_chars }}</span>.</p>
      <pre class="json-box">{{ payload_json }}</pre>
    </section>

    <section class="panel">
      <h2>Ответ</h2>
      {% if error %}
      <div class="pill bad">{{ error }}</div>
      {% elif result %}
      <dl class="kv compact-kv">
        <dt>Модель</dt><dd class="mono">{{ result.model }}</dd>
        <dt>Токены</dt><dd>{{ result.usage.total_tokens or "—" }} total, {{ result.usage.prompt_tokens or "—" }} prompt, {{ result.usage.completion_tokens or "—" }} completion</dd>
        <dt>Стоимость</dt><dd>{{ result.usage.estimated_cost_usd or "—" }}</dd>
      </dl>
      {% if result.preview_text %}
      <h3>Как будет выглядеть</h3>
      <pre class="human-answer">{{ result.preview_text }}</pre>
      <dl class="kv compact-kv">
        <dt>Категория</dt><dd>{{ result.preview_category or "—" }}</dd>
        <dt>Заметка</dt><dd>{{ result.preview_notes or "—" }}</dd>
      </dl>
      {% endif %}
      {% if result.parsed_json %}
      <h3>JSON разобран</h3>
      <pre class="json-box">{{ result.parsed_json }}</pre>
      {% endif %}
      <h3>Сырой ответ</h3>
      <pre class="json-box">{{ result.content }}</pre>
      {% else %}
      <p class="muted">После отправки здесь появится ответ модели.</p>
      {% endif %}
    </section>
  </aside>
</form>
<script>
  const statusSelect = document.querySelector("[data-status-select]");
  document.querySelector("[data-post-select]")?.addEventListener("change", (event) => {
    const id = event.target.value;
    const status = statusSelect?.value || "all";
    if (id) window.location.href = `/prompt-test?post_id=${encodeURIComponent(id)}&q_status=${encodeURIComponent(status)}`;
  });
  statusSelect?.addEventListener("change", (event) => {
    window.location.href = `/prompt-test?q_status=${encodeURIComponent(event.target.value)}`;
  });
</script>
{% endblock %}