{% extends "base.html" %}
{% block body %}
<div class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
  <div>
    <h1 class="text-3xl font-bold">Тест промпта райтера</h1>
    <div class="text-base-content/60 mt-1">Песочница для свободной части <span class="font-mono bg-base-200 px-1 rounded text-xs">ai_writer_prompt</span>. Посты и статусы в БД не меняются.</div>
  </div>
  <a class="btn btn-outline" href="/workers">Настройки AI</a>
</div>

<div class="collapse collapse-arrow bg-base-100 shadow-sm border border-base-200 mb-8" open>
  <input type="checkbox" checked /> 
  <div class="collapse-title text-lg font-bold">Как пользоваться</div>
  <div class="collapse-content border-t border-base-200 pt-4 grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
    <div>
      <div class="font-bold uppercase tracking-widest text-xs text-base-content/60 mb-1">Что тестируем</div>
      <p class="text-base-content/80">Отправляется только текст из поля ниже как system prompt. <span class="font-mono bg-base-200 px-1 rounded text-xs">ai_writer_contract</span> специально не добавляется, чтобы проверять стиль и структуру.</p>
    </div>
    <div>
      <div class="font-bold uppercase tracking-widest text-xs text-base-content/60 mb-1">Что уйдёт в модель</div>
      <p class="text-base-content/80">Один выбранный raw-пост в формате: categories, producer, ссылка, оценка, медиа и обрезанный исходный текст.</p>
    </div>
    <div>
      <div class="font-bold uppercase tracking-widest text-xs text-base-content/60 mb-1">Что безопасно менять</div>
      <p class="text-base-content/80">Голос канала, структуру текста, длину, правила про эмоджи, запрет выдумок, примеры формулировок.</p>
    </div>
    <div>
      <div class="font-bold uppercase tracking-widest text-xs text-base-content/60 mb-1">Что не происходит</div>
      <p class="text-base-content/80">Рерайт не сохраняется, batch не создаётся. Тест только тратит токены текущей модели райтера.</p>
    </div>
  </div>
</div>

<form method="post" action="/prompt-test" class="flex flex-col lg:flex-row gap-8">
  <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
  
  <section class="flex-1 flex flex-col gap-6">
    <div class="card bg-base-100 shadow-sm border border-base-200">
      <div class="card-body p-4 flex flex-col gap-4">
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="form-control">
            <label class="label"><span class="label-text font-bold">Фильтр постов</span></label>
            <select name="q_status" data-status-select class="select select-bordered select-sm w-full">
              {% for item in status_options %}
              <option value="{{ item.value }}" {% if q_status == item.value %}selected{% endif %}>{{ item.label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text font-bold">Пост для теста</span></label>
            <select name="post_id" data-post-select class="select select-bordered select-sm w-full">
              {% for post in posts %}
              <option value="{{ post.id }}" {% if selected and post.id == selected.id %}selected{% endif %}>{{ post.label }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="flex items-center gap-2 mt-2">
          <span class="text-sm text-base-content/60">Модель:</span>
          <span class="badge badge-primary">{{ provider }}</span>
          <span class="badge badge-neutral font-mono">{{ model or "не выбрана" }}</span>
        </div>
      </div>
    </div>

    {% if selected %}
    <div class="card bg-base-200 border border-base-300">
      <div class="card-body p-4 text-sm flex flex-col gap-2">
        <div class="flex justify-between items-start">
          <strong class="text-base">#{{ selected.id }} · {{ selected.source_name }}</strong>
          <a href="{{ selected.original_url }}" target="_blank" rel="noopener" class="btn btn-xs btn-outline">Оригинал</a>
        </div>
        <div class="text-base-content/60">
          {{ selected.posted_at_fmt or selected.created_at_fmt }} · {{ selected.media_count }} медиа · оценка {{ selected.qualification_score or "—" }}
        </div>
        <pre class="whitespace-pre-wrap font-mono text-xs max-h-48 overflow-y-auto mt-2">{{ selected.raw_text }}</pre>
      </div>
    </div>
    {% endif %}

    <div class="card bg-base-100 shadow-sm border border-base-200">
      <div class="card-body p-4">
        <div class="form-control">
          <label class="label"><span class="label-text font-bold">ai_writer_prompt для теста</span></label>
          <textarea name="prompt" rows="18" spellcheck="false" class="textarea textarea-bordered font-mono text-sm leading-relaxed w-full">{{ prompt }}</textarea>
        </div>
        <div class="mt-4 flex justify-end">
          <button class="btn btn-primary" type="submit">Отправить тест</button>
        </div>
      </div>
    </div>
  </section>

  <aside class="w-full lg:w-1/3 flex flex-col gap-6">
    <div class="card bg-base-100 shadow-sm border border-base-200">
      <div class="card-body p-4">
        <h2 class="card-title text-base">Payload (Входные данные)</h2>
        <p class="text-xs text-base-content/60 mb-2">Именно это отправится user-сообщением. Текст обрезан по настройке ai_writer_max_text_chars={{ max_text_chars }}.</p>
        <pre class="bg-base-200 p-2 rounded text-xs font-mono overflow-auto max-h-64">{{ payload_json }}</pre>
      </div>
    </div>

    <div class="card bg-base-100 shadow-sm border border-base-200">
      <div class="card-body p-4 flex flex-col gap-4">
        <h2 class="card-title text-base">Ответ модели</h2>
        
        {% if error %}
        <div class="alert alert-error text-sm">{{ error }}</div>
        
        {% elif result %}
        <div class="grid grid-cols-2 gap-2 text-xs bg-base-200 p-3 rounded">
          <div class="font-bold text-base-content/60">Модель</div><div class="font-mono text-right truncate" title="{{ result.model }}">{{ result.model }}</div>
          <div class="font-bold text-base-content/60">Токены</div><div class="text-right">{{ result.usage.total_tokens or "—" }}</div>
          <div class="font-bold text-base-content/60">Стоимость</div><div class="text-right text-success">{{ result.usage.estimated_cost_usd or "—" }}</div>
        </div>

        {% if result.preview_text %}
        <div>
          <h3 class="font-bold text-sm mb-2">Как будет выглядеть</h3>
          <div class="prose prose-sm max-w-none text-base-content whitespace-pre-wrap leading-snug bg-base-200 p-3 rounded">{{ result.preview_text }}</div>
          <div class="grid grid-cols-2 gap-2 text-xs mt-2">
            <div class="font-bold text-base-content/60">Категория</div><div class="text-right">{{ result.preview_category or "—" }}</div>
            <div class="font-bold text-base-content/60">Заметка</div><div class="text-right">{{ result.preview_notes or "—" }}</div>
          </div>
        </div>
        {% endif %}

        {% if result.parsed_json %}
        <div>
          <h3 class="font-bold text-sm mb-2">JSON разобран</h3>
          <pre class="bg-base-200 p-2 rounded text-xs font-mono overflow-auto max-h-48">{{ result.parsed_json }}</pre>
        </div>
        {% endif %}

        <div>
          <h3 class="font-bold text-sm mb-2">Сырой ответ</h3>
          <pre class="bg-base-200 p-2 rounded text-xs font-mono overflow-auto max-h-48">{{ result.content }}</pre>
        </div>
        
        {% else %}
        <div class="text-sm text-base-content/50 italic text-center py-8 border border-dashed border-base-300 rounded">
          После отправки здесь появится ответ модели.
        </div>
        {% endif %}
      </div>
    </div>
  </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 %}