{% extends "base.html" %}
{% block title %}لاگ‌ها{% endblock %}
{% block page_title %}<i class="bi bi-terminal"></i> لاگ‌های سیستم{% endblock %}

{% block content %}

<!-- Filter bar -->
<div class="card mb-4">
  <div class="card-body py-3">
    <form method="GET" id="filterForm" class="row g-2 align-items-end">
      <div class="col-6 col-md-2">
        <label class="form-label">سطح</label>
        <select name="level" class="form-select form-select-sm" onchange="this.form.submit()">
          <option value="">همه سطوح</option>
          {% for lv in levels %}
          <option value="{{ lv }}" {{ 'selected' if current_level==lv }}>{{ lv }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">نوع رویداد</label>
        <select name="event_type" class="form-select form-select-sm" onchange="this.form.submit()">
          <option value="">همه رویدادها</option>
          {% for et in event_types %}
          <option value="{{ et }}" {{ 'selected' if current_event_type==et }}>{{ et }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">از تاریخ</label>
        <input type="date" name="date_from" class="form-control form-control-sm"
               value="{{ current_date_from }}">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">تا تاریخ</label>
        <input type="date" name="date_to" class="form-control form-control-sm"
               value="{{ current_date_to }}">
      </div>
      <div class="col-10 col-md-3">
        <label class="form-label">جستجو در پیام‌ها</label>
        <input type="text" name="search" class="form-control form-control-sm"
               placeholder="عبارت جستجو..." value="{{ current_search }}">
      </div>
      <div class="col-2 col-md-1">
        <button type="submit" class="btn btn-primary btn-sm w-100" title="اعمال فیلتر">
          <i class="bi bi-search"></i>
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Results card -->
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2">
      <span class="fw-semibold small">{{ total }} رکورد</span>
      {% if current_level or current_event_type or current_search or current_date_from or current_date_to %}
      <span class="badge text-bg-warning rounded-pill">فیلتر فعال</span>
      {% endif %}
    </div>
    <div class="d-flex gap-2">
      {% if current_level or current_event_type or current_search or current_date_from or current_date_to %}
      <a href="{{ url_for('logs.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-x-circle me-1"></i>پاک کردن فیلتر
      </a>
      {% endif %}
      <button type="button" id="liveToggleBtn" class="btn btn-sm btn-outline-success">
        <i class="bi bi-broadcast me-1"></i>لاگ زنده
      </button>
    </div>
  </div>

  <div id="liveLogPanel" class="border-bottom" style="display:none">
    <div class="d-flex align-items-center justify-content-between px-3 py-2" style="background:#0f172a">
      <span class="small text-light"><i class="bi bi-record-circle text-danger me-1"></i>در حال دریافت زنده…</span>
      <button type="button" id="liveClearBtn" class="btn btn-sm btn-outline-light py-0 px-2">پاک کردن</button>
    </div>
    <pre id="liveLogBox" class="m-0 p-3"
         style="background:#0f172a;color:#e2e8f0;font-size:.76rem;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word"></pre>
  </div>

  <div class="table-responsive">
    <table class="table table-sm table-hover align-middle mb-0">
      <thead>
        <tr>
          <th style="width:150px">زمان</th>
          <th style="width:100px">سطح</th>
          <th style="width:130px">نوع رویداد</th>
          <th>پیام</th>
          <th style="width:60px">جزئیات</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs %}
        <tr class="log-row" data-id="{{ log.id }}">
          <td class="font-mono text-muted" style="font-size:.72rem;white-space:nowrap">
            {{ log.timestamp|jalali('%Y/%m/%d %H:%M:%S') }}
          </td>
          <td>
            <span class="badge badge-level-{{ log.level }} rounded-pill" style="font-size:.72rem">
              {{ log.level }}
            </span>
          </td>
          <td class="text-muted" style="font-size:.78rem">{{ log.event_type or '—' }}</td>
          <td style="font-size:.82rem">
            <span class="log-msg-short">{{ log.message[:120] }}{% if log.message|length > 120 %}…{% endif %}</span>
          </td>
          <td>
            {% if log.exception_detail %}
            <button class="btn btn-sm btn-outline-danger exc-btn"
                    data-exc="{{ log.exception_detail | e }}"
                    title="مشاهده جزئیات خطا">
              <i class="bi bi-bug"></i>
            </button>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="5" class="text-center text-muted py-5">
            <i class="bi bi-inbox d-block fs-2 mb-2 opacity-30"></i>
            هیچ لاگی با فیلترهای انتخاب‌شده یافت نشد
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if total_pages > 1 %}
  <div class="card-footer d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span class="text-muted small">صفحه {{ page }} از {{ total_pages }}</span>
    <nav>
      <ul class="pagination pagination-sm mb-0 gap-1">
        {% if page > 1 %}
        <li class="page-item">
          <a class="page-link rounded" href="?page={{ page-1 }}&level={{ current_level }}&event_type={{ current_event_type }}&search={{ current_search }}&date_from={{ current_date_from }}&date_to={{ current_date_to }}">
            <i class="bi bi-chevron-right"></i>
          </a>
        </li>
        {% endif %}
        {% for p in range([1, page-2]|max, [total_pages+1, page+3]|min) %}
        <li class="page-item {{ 'active' if p==page }}">
          <a class="page-link rounded"
             href="?page={{ p }}&level={{ current_level }}&event_type={{ current_event_type }}&search={{ current_search }}&date_from={{ current_date_from }}&date_to={{ current_date_to }}">
            {{ p }}
          </a>
        </li>
        {% endfor %}
        {% if page < total_pages %}
        <li class="page-item">
          <a class="page-link rounded" href="?page={{ page+1 }}&level={{ current_level }}&event_type={{ current_event_type }}&search={{ current_search }}&date_from={{ current_date_from }}&date_to={{ current_date_to }}">
            <i class="bi bi-chevron-left"></i>
          </a>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>

<!-- Exception detail modal (text set safely via JS, never innerHTML) -->
<div class="modal fade" id="excModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title text-danger">
          <i class="bi bi-bug me-2"></i>جزئیات خطا
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <pre id="excText"
             class="m-0 p-3 rounded-bottom"
             style="background:#0f172a;color:#e2e8f0;font-size:.78rem;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word"></pre>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// Safe: use textContent, never innerHTML
document.querySelectorAll('.exc-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    document.getElementById('excText').textContent = btn.dataset.exc;
    new bootstrap.Modal(document.getElementById('excModal')).show();
  });
});

// ── Live log tail ────────────────────────────────────────────────────────
(function () {
  var panel = document.getElementById('liveLogPanel');
  var box = document.getElementById('liveLogBox');
  var toggleBtn = document.getElementById('liveToggleBtn');
  var clearBtn = document.getElementById('liveClearBtn');
  var offset = 0;
  var timer = null;

  function poll() {
    fetch("{{ url_for('logs.live_tail') }}?after=" + offset)
      .then(function (r) { return r.json(); })
      .then(function (data) {
        offset = data.offset;
        if (data.content) {
          var atBottom = box.scrollTop + box.clientHeight >= box.scrollHeight - 20;
          box.textContent += data.content;
          if (atBottom) box.scrollTop = box.scrollHeight;
        }
      })
      .catch(function () { /* transient network error — next tick retries */ });
  }

  function start() {
    panel.style.display = '';
    toggleBtn.classList.replace('btn-outline-success', 'btn-success');
    offset = 0;
    box.textContent = '';
    poll();
    timer = setInterval(poll, 1500);
  }

  function stop() {
    panel.style.display = 'none';
    toggleBtn.classList.replace('btn-success', 'btn-outline-success');
    if (timer) { clearInterval(timer); timer = null; }
  }

  toggleBtn.addEventListener('click', function () {
    if (timer) stop(); else start();
  });
  clearBtn.addEventListener('click', function () { box.textContent = ''; });
})();
</script>
{% endblock %}