{% extends "base.html" %}
{% block title %}کاربران{% endblock %}
{% block page_title %}<i class="bi bi-people"></i> مدیریت کاربران{% endblock %}

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

  <!-- ── User table ──────────────────────────────────────── -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0">
          <i class="bi bi-person-badge me-2 text-muted"></i>کاربران سیستم
          <span class="badge text-bg-light text-muted ms-1">{{ users|length }}</span>
        </h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
          <i class="bi bi-person-plus me-1"></i>کاربر جدید
        </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 style="width:120px">عملیات</th>
            </tr>
          </thead>
          <tbody>
            {% for user in users %}
            <tr>
              <td>
                <div class="d-flex align-items-center gap-3">
                  <div class="rounded-circle text-white d-flex align-items-center justify-content-center fw-bold flex-shrink-0"
                       style="width:38px;height:38px;font-size:.85rem;
                              background:linear-gradient(135deg,#2563eb,#7c3aed)">
                    {{ user.username[0].upper() }}
                  </div>
                  <div>
                    <div class="fw-semibold">
                      {{ user.username }}
                      {% if user.id == current_user.id %}
                      <span class="badge text-bg-secondary ms-1" style="font-size:.6rem">شما</span>
                      {% endif %}
                    </div>
                    <div class="text-muted text-xs">ID: {{ user.id }}</div>
                  </div>
                </div>
              </td>
              <td>
                {% if user.is_admin %}
                <span class="chip" style="background:#fef3c7;color:#92400e">
                  <i class="bi bi-shield-fill-check"></i>مدیر ارشد
                </span>
                {% else %}
                <span class="chip" style="background:#f1f5f9;color:#475569">
                  <i class="bi bi-person"></i>کاربر
                </span>
                {% endif %}
              </td>
              <td>
                <span class="chip {{ 'chip-active' if user.is_active else 'chip-inactive' }}">
                  <i class="bi bi-{{ 'check-circle' if user.is_active else 'x-circle' }}"></i>
                  {{ 'فعال' if user.is_active else 'غیرفعال' }}
                </span>
              </td>
              <td class="text-muted small font-mono" style="font-size:.75rem">
                {{ user.last_login|jalali if user.last_login else '—' }}
              </td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-sm btn-outline-secondary" title="ویرایش"
                          data-bs-toggle="modal" data-bs-target="#editUserModal"
                          onclick="fillEditUser({{ user.id }}, '{{ user.username }}',
                                  {{ 'true' if user.is_active else 'false' }},
                                  {{ 'true' if user.is_admin else 'false' }})">
                    <i class="bi bi-pencil"></i>
                  </button>
                  {% if user.id != current_user.id %}
                  <form method="POST" action="{{ url_for('users.delete', uid=user.id) }}"
                        class="d-inline"
                        onsubmit="return confirm('حذف کاربر «{{ user.username }}»؟ این عملیات قابل بازگشت نیست.')">
                    <button class="btn btn-sm btn-outline-danger" title="حذف">
                      <i class="bi bi-trash3"></i>
                    </button>
                  </form>
                  {% else %}
                  <button class="btn btn-sm btn-outline-secondary" disabled title="نمی‌توانید حساب خود را حذف کنید">
                    <i class="bi bi-trash3"></i>
                  </button>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted py-5">
                <i class="bi bi-people d-block fs-2 mb-2 opacity-30"></i>
                هیچ کاربری یافت نشد
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ── Security info panel ────────────────────────────── -->
  <div class="col-lg-4">

    <div class="card mb-3">
      <div class="card-header">
        <h6 class="mb-0"><i class="bi bi-shield-lock me-2 text-primary"></i>امنیت دسترسی</h6>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-0">
          <li class="d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-check-circle-fill text-success mt-1 flex-shrink-0"></i>
            <span class="small">رمزهای عبور با الگوریتم <strong>bcrypt</strong> هش می‌شوند</span>
          </li>
          <li class="d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-check-circle-fill text-success mt-1 flex-shrink-0"></i>
            <span class="small">حداقل طول رمز عبور: <strong>۶ کاراکتر</strong></span>
          </li>
          <li class="d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-check-circle-fill text-success mt-1 flex-shrink-0"></i>
            <span class="small">نشست‌های کاربری با کوکی <strong>HttpOnly</strong> مدیریت می‌شوند</span>
          </li>
          <li class="d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-info-circle text-primary mt-1 flex-shrink-0"></i>
            <span class="small">نمی‌توانید حساب کاربری خودتان را حذف کنید</span>
          </li>
          <li class="d-flex align-items-start gap-2">
            <i class="bi bi-clock text-secondary mt-1 flex-shrink-0"></i>
            <span class="small">نشست‌ها پس از <strong>۸ ساعت</strong> به صورت خودکار منقضی می‌شوند</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="alert alert-warning">
      <div class="fw-bold small mb-1">
        <i class="bi bi-exclamation-triangle me-1"></i>اقدام ضروری
      </div>
      <div class="small">
        رمز پیش‌فرض <code>admin123</code> را فوری تغییر دهید.
        از رمز عبور قوی با ترکیب حروف، اعداد و نمادها استفاده کنید.
      </div>
    </div>

  </div>
</div>

<!-- ── Add User Modal ──────────────────────────────────── -->
<div class="modal fade" id="addUserModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form method="POST" action="{{ url_for('users.add') }}" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-person-plus me-2 text-primary"></i>ایجاد کاربر جدید
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label" for="new_username">نام کاربری</label>
          <input type="text" name="username" id="new_username" class="form-control"
                 placeholder="نام کاربری منحصربه‌فرد" required autocomplete="off">
        </div>
        <div class="mb-3">
          <label class="form-label" for="new_password">رمز عبور</label>
          <div class="input-group">
            <input type="password" name="password" id="new_password" class="form-control"
                   placeholder="حداقل ۶ کاراکتر" minlength="6" required autocomplete="new-password">
            <button type="button" class="btn btn-outline-secondary"
                    onclick="toggleVis('new_password')">
              <i class="bi bi-eye"></i>
            </button>
          </div>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" name="is_admin" value="1" id="new_is_admin">
          <label class="form-check-label" for="new_is_admin">دسترسی مدیر ارشد</label>
        </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">
          <i class="bi bi-person-plus me-1"></i>ایجاد کاربر
        </button>
      </div>
    </form>
  </div>
</div>

<!-- ── Edit User Modal ────────────────────────────────── -->
<div class="modal fade" id="editUserModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form method="POST" id="editUserForm" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-pencil me-2 text-warning"></i>ویرایش کاربر:
          <span id="editUserName" class="text-primary"></span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label" for="edit_password">رمز عبور جدید</label>
          <div class="input-group">
            <input type="password" name="password" id="edit_password" class="form-control"
                   placeholder="خالی بگذارید تا رمز تغییر نکند" minlength="6"
                   autocomplete="new-password">
            <button type="button" class="btn btn-outline-secondary"
                    onclick="toggleVis('edit_password')">
              <i class="bi bi-eye"></i>
            </button>
          </div>
        </div>
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" name="is_active" id="eu_active" value="1">
          <label class="form-check-label" for="eu_active">حساب فعال باشد</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" name="is_admin" id="eu_admin" value="1">
          <label class="form-check-label" for="eu_admin">دسترسی مدیر ارشد</label>
        </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">
          <i class="bi bi-check-lg me-1"></i>ذخیره تغییرات
        </button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function toggleVis(id) {
  var f = document.getElementById(id);
  f.type = f.type === 'password' ? 'text' : 'password';
}
function fillEditUser(id, username, isActive, isAdmin) {
  document.getElementById('editUserForm').action = '/users/' + id + '/edit';
  document.getElementById('editUserName').textContent = username;
  document.getElementById('eu_active').checked = isActive;
  document.getElementById('eu_admin').checked = isAdmin;
}
</script>
{% endblock %}