{% extends "base.html" %}
{% block title %}پرامپت هوش مصنوعی{% endblock %}
{% block page_title %}<i class="bi bi-chat-square-text"></i> پرامپت هوش مصنوعی{% endblock %}

{% block content %}
<div class="row g-4">

  <!-- ── Editor column ──────────────────────────────────── -->
  <div class="col-lg-7">

    <!-- Active prompt preview -->
    {% if active %}
    <div class="card mb-3" style="border-right:4px solid #22c55e !important">
      <div class="card-header d-flex align-items-center gap-2">
        <span class="status-dot connected"></span>
        <h6 class="mb-0 text-success">پرامپت فعال فعلی</h6>
        <span class="badge ms-auto" style="background:#dcfce7;color:#15803d">نسخه #{{ active.id }}</span>
      </div>
      <div class="card-body">
        <div class="mb-2">
          <div class="text-xs text-muted fw-bold mb-1 text-uppercase">System Prompt</div>
          <pre class="p-2 rounded mb-0 small"
               style="background:#f8fafc;border:1px solid #e2e8f0;white-space:pre-wrap;max-height:80px;overflow:auto">{{ active.system_prompt }}</pre>
        </div>
        {% if active.user_prompt_template %}
        <div class="mt-2">
          <div class="text-xs text-muted fw-bold mb-1 text-uppercase">User Template</div>
          <pre class="p-2 rounded mb-0 small"
               style="background:#f8fafc;border:1px solid #e2e8f0;white-space:pre-wrap;max-height:100px;overflow:auto">{{ active.user_prompt_template }}</pre>
        </div>
        {% endif %}
        <div class="mt-2 d-flex gap-3 text-xs text-muted">
          <span><i class="bi bi-clock me-1"></i>{{ active.created_at|jalali }}</span>
          <span><i class="bi bi-person me-1"></i>{{ active.created_by or 'سیستم' }}</span>
          {% if active.note %}<span><i class="bi bi-chat me-1"></i>{{ active.note }}</span>{% endif %}
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Editor form -->
    <div class="card">
      <div class="card-header">
        <h6 class="mb-0"><i class="bi bi-pencil-square me-2 text-primary"></i>ویرایش و ذخیره پرامپت جدید</h6>
      </div>
      <div class="card-body">
        <form method="POST" action="{{ url_for('prompts.save') }}">
          <div class="mb-3">
            <label class="form-label" for="sys_prompt">
              پرامپت سیستم (System Prompt)
              <span class="badge bg-light text-muted ms-1" style="font-size:.65rem">role: system</span>
            </label>
            <textarea name="system_prompt" id="sys_prompt" class="form-control font-mono" rows="4"
                      placeholder="You are a professional Persian content rewriter."
                      required>{{ active.system_prompt if active else 'You are a professional Persian content rewriter.' }}</textarea>
            <div class="form-text">
              <i class="bi bi-info-circle me-1"></i>
              این دستورالعمل به عنوان <code>system</code> message به هوش مصنوعی ارسال می‌شود.
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label" for="user_tmpl">
              قالب پرامپت کاربر (User Template)
              <span class="badge bg-light text-muted ms-1" style="font-size:.65rem">role: user</span>
            </label>
            <textarea name="user_prompt_template" id="user_tmpl" class="form-control font-mono" rows="9"
                      placeholder="متن زیر را به فارسی روان و حرفه‌ای بازنویسی کن.&#10;- معنا حفظ شود.&#10;- جمله‌بندی تازه باشد.&#10;- فقط متن نهایی را بده.&#10;&#10;متن:&#10;{text}">{{ active.user_prompt_template if active else '' }}</textarea>
            <div class="form-text">
              <i class="bi bi-braces me-1"></i>
              از <code>{text}</code> برای جایگذاری متن پیام دریافتی استفاده کنید.
            </div>
          </div>

          <div class="mb-4">
            <label class="form-label" for="note">یادداشت (اختیاری)</label>
            <input type="text" name="note" id="note" class="form-control"
                   placeholder="توضیح کوتاه درباره این نسخه از پرامپت...">
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-floppy me-1"></i>ذخیره و فعال‌سازی
            </button>
            <button type="reset" class="btn btn-outline-secondary">
              <i class="bi bi-arrow-counterclockwise me-1"></i>بازنشانی
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>

  <!-- ── History column ─────────────────────────────────── -->
  <div class="col-lg-5">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0"><i class="bi bi-clock-history me-2 text-muted"></i>تاریخچه نسخه‌ها</h6>
        <span class="badge text-bg-light text-muted">{{ history|length }} نسخه</span>
      </div>
      <div style="max-height:620px;overflow-y:auto">
        {% for p in history %}
        <div class="border-bottom p-3 {{ 'bg-success bg-opacity-10' if p.is_active else '' }}"
             style="transition:background .2s">
          <div class="d-flex align-items-start justify-content-between gap-2">
            <div class="flex-grow-1 min-width-0">
              <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                {% if p.is_active %}
                <span class="chip chip-active"><i class="bi bi-check-circle"></i>فعال</span>
                {% endif %}
                <span class="fw-bold small">نسخه #{{ p.id }}</span>
                <span class="text-muted text-xs">{{ p.created_at|jalali }}</span>
                {% if p.created_by %}
                <span class="text-xs text-muted">توسط {{ p.created_by }}</span>
                {% endif %}
              </div>
              {% if p.note %}
              <div class="text-muted small mb-1">
                <i class="bi bi-chat-left-text me-1"></i>{{ p.note }}
              </div>
              {% endif %}
              <div class="font-mono text-secondary text-truncate small"
                   style="max-width:280px;font-size:.72rem">
                {{ p.system_prompt[:90] }}{% if p.system_prompt|length > 90 %}…{% endif %}
              </div>
            </div>
            {% if not p.is_active %}
            <form method="POST" action="{{ url_for('prompts.activate', pid=p.id) }}" class="flex-shrink-0">
              <button type="submit" class="btn btn-sm btn-outline-success" title="فعال‌سازی این نسخه">
                <i class="bi bi-check2-circle me-1"></i>فعال‌سازی
              </button>
            </form>
            {% endif %}
          </div>
        </div>
        {% else %}
        <div class="p-4 text-center text-muted">
          <i class="bi bi-clock-history d-block fs-2 mb-2 opacity-30"></i>
          تاریخچه‌ای وجود ندارد
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

</div>
{% endblock %}