{% extends "base.html" %}
{% block title %}کتابخانه{% endblock %}
{% block page_title %}<i class="bi bi-collection"></i> کتابخانه شخصیت‌ها، نقش‌ها و سناریوها{% endblock %}

{% block content %}
{% include "interactions/_nav.html" %}

<ul class="nav nav-tabs mb-4">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#personas"><i class="bi bi-mask me-1"></i>Persona ({{ personas|length }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#roles"><i class="bi bi-person-gear me-1"></i>Role ({{ roles|length }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#scenarios"><i class="bi bi-diagram-2 me-1"></i>Scenario ({{ scenarios|length }})</a></li>
</ul>

<div class="tab-content">
  {# ── Personas ── #}
  <div class="tab-pane fade show active" id="personas">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-mask me-2"></i>شخصیت‌ها</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPersona"><i class="bi bi-plus-lg me-1"></i>افزودن Persona</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>لحن</th><th>سطح دانش</th><th>علایق</th><th></th></tr></thead>
          <tbody>
            {% for p in personas %}
            <tr>
              <td class="text-xs text-muted">{{ p.id }}</td>
              <td class="fw-semibold">{{ p.display_name or p.name }}<div class="text-muted text-xs">{{ p.personality or '' }}</div></td>
              <td class="text-xs">{{ p.tone or '—' }}</td>
              <td class="text-xs">{{ p.knowledge_level or '—' }}</td>
              <td class="text-xs text-muted">{{ p.interests or '—' }}</td>
              <td class="d-flex gap-1">
                <button type="button" class="btn btn-xs btn-outline-secondary" title="ویرایش"
                        data-bs-toggle="modal" data-bs-target="#editPersona"
                        data-pid="{{ p.id }}" data-name="{{ p.name or '' }}" data-display-name="{{ p.display_name or '' }}"
                        data-personality="{{ p.personality or '' }}" data-age="{{ p.age if p.age is not none else '' }}"
                        data-job="{{ p.job or '' }}" data-knowledge-level="{{ p.knowledge_level or '' }}"
                        data-tone="{{ p.tone or '' }}" data-formality="{{ p.formality or '' }}"
                        data-emoji-usage="{{ p.emoji_usage or '' }}" data-avg-message-length="{{ p.avg_message_length or '' }}"
                        data-writing-style="{{ p.writing_style or '' }}" data-interests="{{ p.interests or '' }}"
                        data-forbidden-topics="{{ p.forbidden_topics or '' }}"
                        data-ai-temperature="{{ p.ai_temperature if p.ai_temperature is not none else '' }}"
                        data-ai-repetition="{{ p.ai_repetition if p.ai_repetition is not none else '' }}"
                        onclick="fillEditPersona(this)">
                  <i class="bi bi-pencil"></i>
                </button>
                <form method="POST" action="{{ url_for('library.persona_delete', pid=p.id) }}" onsubmit="return confirm('حذف؟')"><button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button></form>
              </td>
            </tr>
            {% else %}<tr><td colspan="6"><div class="empty-state"><i class="bi bi-mask"></i><p>هنوز Personaیی وجود ندارد</p></div></td></tr>{% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Roles ── #}
  <div class="tab-pane fade" id="roles">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-person-gear me-2"></i>نقش‌ها</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addRole"><i class="bi bi-plus-lg me-1"></i>افزودن Role</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>توضیح</th><th>نوع</th><th></th></tr></thead>
          <tbody>
            {% for r in roles %}
            <tr>
              <td class="text-xs text-muted">{{ r.id }}</td>
              <td class="fw-semibold">{{ r.name }}</td>
              <td class="text-xs text-muted">{{ r.description or '—' }}</td>
              <td>{% if r.is_builtin %}<span class="chip chip-telegram">پیش‌فرض</span>{% else %}<span class="chip chip-group">سفارشی</span>{% endif %}</td>
              <td>{% if not r.is_builtin %}<form method="POST" action="{{ url_for('library.role_delete', rid=r.id) }}" onsubmit="return confirm('حذف؟')"><button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button></form>{% endif %}</td>
            </tr>
            {% else %}<tr><td colspan="5"><div class="empty-state"><i class="bi bi-person-gear"></i><p>نقشی وجود ندارد</p></div></td></tr>{% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Scenarios ── #}
  <div class="tab-pane fade" id="scenarios">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-diagram-2 me-2"></i>سناریوها</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addScenario"><i class="bi bi-plus-lg me-1"></i>افزودن Scenario</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>توضیح</th><th></th></tr></thead>
          <tbody>
            {% for s in scenarios %}
            <tr>
              <td class="text-xs text-muted">{{ s.id }}</td>
              <td class="fw-semibold">{{ s.name }}</td>
              <td class="text-xs text-muted">{{ s.description or '—' }}</td>
              <td><form method="POST" action="{{ url_for('library.scenario_delete', sid=s.id) }}" onsubmit="return confirm('حذف؟')"><button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button></form></td>
            </tr>
            {% else %}<tr><td colspan="4"><div class="empty-state"><i class="bi bi-diagram-2"></i><p>سناریویی وجود ندارد</p></div></td></tr>{% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{# ── Modals ── #}
<div class="modal fade" id="addPersona" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('library.persona_add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">افزودن Persona</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body"><div class="row g-3">
      <div class="col-md-6"><label class="form-label">نام *</label><input name="name" class="form-control" required></div>
      <div class="col-md-6"><label class="form-label">نام نمایشی</label><input name="display_name" class="form-control"></div>
      <div class="col-12"><label class="form-label">شخصیت</label><input name="personality" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">سن</label><input name="age" type="number" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">شغل</label><input name="job" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">سطح دانش</label><input name="knowledge_level" class="form-control" placeholder="مبتدی/متوسط/..."></div>
      <div class="col-md-3"><label class="form-label">لحن</label><input name="tone" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">رسمیت</label><input name="formality" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">ایموجی</label><input name="emoji_usage" class="form-control" placeholder="هیچ/کم/..."></div>
      <div class="col-md-3"><label class="form-label">طول پیام</label><input name="avg_message_length" class="form-control" placeholder="کوتاه/متوسط/بلند"></div>
      <div class="col-md-3"><label class="form-label">سبک نگارش</label><input name="writing_style" class="form-control"></div>
      <div class="col-md-6"><label class="form-label">علایق</label><input name="interests" class="form-control"></div>
      <div class="col-md-6"><label class="form-label">موضوعات ممنوع</label><input name="forbidden_topics" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">Temperature هوش مصنوعی (اختیاری)</label>
        <input name="ai_temperature" type="number" step="0.1" min="0" max="2" class="form-control" placeholder="پیش‌فرض Provider"></div>
      <div class="col-md-3"><label class="form-label">Repetition Penalty (اختیاری)</label>
        <input name="ai_repetition" type="number" step="0.1" min="-2" max="2" class="form-control" placeholder="پیش‌فرض Provider"></div>
    </div></div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">افزودن</button></div>
  </form>
</div></div>

<div class="modal fade" id="editPersona" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" id="editPersonaForm" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">ویرایش Persona</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body"><div class="row g-3">
      <div class="col-md-6"><label class="form-label">نام *</label><input name="name" id="ep_name" class="form-control" required></div>
      <div class="col-md-6"><label class="form-label">نام نمایشی</label><input name="display_name" id="ep_display_name" class="form-control"></div>
      <div class="col-12"><label class="form-label">شخصیت</label><input name="personality" id="ep_personality" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">سن</label><input name="age" id="ep_age" type="number" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">شغل</label><input name="job" id="ep_job" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">سطح دانش</label><input name="knowledge_level" id="ep_knowledge_level" class="form-control" placeholder="مبتدی/متوسط/..."></div>
      <div class="col-md-3"><label class="form-label">لحن</label><input name="tone" id="ep_tone" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">رسمیت</label><input name="formality" id="ep_formality" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">ایموجی</label><input name="emoji_usage" id="ep_emoji_usage" class="form-control" placeholder="هیچ/کم/..."></div>
      <div class="col-md-3"><label class="form-label">طول پیام</label><input name="avg_message_length" id="ep_avg_message_length" class="form-control" placeholder="کوتاه/متوسط/بلند"></div>
      <div class="col-md-3"><label class="form-label">سبک نگارش</label><input name="writing_style" id="ep_writing_style" class="form-control"></div>
      <div class="col-md-6"><label class="form-label">علایق</label><input name="interests" id="ep_interests" class="form-control"></div>
      <div class="col-md-6"><label class="form-label">موضوعات ممنوع</label><input name="forbidden_topics" id="ep_forbidden_topics" class="form-control"></div>
      <div class="col-md-3"><label class="form-label">Temperature هوش مصنوعی (اختیاری)</label>
        <input name="ai_temperature" id="ep_ai_temperature" type="number" step="0.1" min="0" max="2" class="form-control" placeholder="پیش‌فرض Provider"></div>
      <div class="col-md-3"><label class="form-label">Repetition Penalty (اختیاری)</label>
        <input name="ai_repetition" id="ep_ai_repetition" type="number" step="0.1" min="-2" max="2" class="form-control" placeholder="پیش‌فرض Provider"></div>
    </div></div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">ذخیره تغییرات</button></div>
  </form>
</div></div>

<div class="modal fade" id="addRole" tabindex="-1"><div class="modal-dialog modal-dialog-centered">
  <form method="POST" action="{{ url_for('library.role_add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">افزودن Role</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body"><div class="row g-3">
      <div class="col-12"><label class="form-label">نام *</label><input name="name" class="form-control" required></div>
      <div class="col-12"><label class="form-label">توضیح</label><input name="description" class="form-control"></div>
      <div class="col-12"><label class="form-label">دستور رفتاری (Behavior Prompt)</label><textarea name="behavior_prompt" class="form-control" rows="3"></textarea></div>
    </div></div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">افزودن</button></div>
  </form>
</div></div>

<div class="modal fade" id="addScenario" tabindex="-1"><div class="modal-dialog modal-dialog-centered">
  <form method="POST" action="{{ url_for('library.scenario_add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">افزودن Scenario</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body"><div class="row g-3">
      <div class="col-12"><label class="form-label">نام *</label><input name="name" class="form-control" required></div>
      <div class="col-12"><label class="form-label">توضیح</label><input name="description" class="form-control"></div>
      <div class="col-12"><label class="form-label">اهداف (هر خط: «برچسب: هدف»)</label>
        <textarea name="goals" class="form-control font-mono" rows="4" placeholder="تحلیل‌گر: بازار را تحلیل کند&#10;منتقد: نقاط ضعف را مطرح کند"></textarea></div>
    </div></div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">افزودن</button></div>
  </form>
</div></div>

{% endblock %}
{% block scripts %}
<script>
// Re-open the correct tab after a redirect with #hash.
if (location.hash) {
  const link = document.querySelector(`.nav-tabs a[href="${location.hash}"]`);
  if (link) new bootstrap.Tab(link).show();
}

function fillEditPersona(btn) {
  // Reads from data-* attributes rather than taking values as inline onclick
  // arguments — persona text is free-form (can contain quotes), and even
  // JSON-encoding it (tojson) isn't safe to splice into a double-quoted
  // onclick attribute, since the JSON string's own embedded quotes end the
  // HTML attribute early. data-* attributes go through Jinja's normal
  // autoescaping instead, which handles this correctly.
  const d = btn.dataset;
  document.getElementById('editPersonaForm').action = '/interactions/library/persona/' + d.pid + '/edit';
  document.getElementById('ep_name').value = d.name || '';
  document.getElementById('ep_display_name').value = d.displayName || '';
  document.getElementById('ep_personality').value = d.personality || '';
  document.getElementById('ep_age').value = d.age || '';
  document.getElementById('ep_job').value = d.job || '';
  document.getElementById('ep_knowledge_level').value = d.knowledgeLevel || '';
  document.getElementById('ep_tone').value = d.tone || '';
  document.getElementById('ep_formality').value = d.formality || '';
  document.getElementById('ep_emoji_usage').value = d.emojiUsage || '';
  document.getElementById('ep_avg_message_length').value = d.avgMessageLength || '';
  document.getElementById('ep_writing_style').value = d.writingStyle || '';
  document.getElementById('ep_interests').value = d.interests || '';
  document.getElementById('ep_forbidden_topics').value = d.forbiddenTopics || '';
  document.getElementById('ep_ai_temperature').value = d.aiTemperature || '';
  document.getElementById('ep_ai_repetition').value = d.aiRepetition || '';
}
</script>
{% endblock %}