{# backend/templates/admin.html #}
{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="card-title mb-0">Admin Page</h3>
        <a href="{{ url_for('admin.settings') }}" class="btn btn-outline-primary">
          <i class="bi bi-gear-fill me-1"></i>시스템 설정
        </a>
      </div>

      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <div class="mt-2">
        {% for cat, msg in messages %}
        <div class="alert alert-{{ cat }} alert-dismissible fade show" role="alert">
          {{ msg }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      {% endwith %}

      <div class="table-responsive">
        <table class="table table-striped align-middle">
          <thead>
            <tr>
              <th style="width:60px">ID</th>
              <th>Username</th>
              <th>Email</th>
              <th style="width:80px">Active</th>
              <th style="width:260px">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for user in users %}
            <tr>
              <td>{{ user.id }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>
                {% if user.is_active %}
                <span class="badge bg-success">Yes</span>
                {% else %}
                <span class="badge bg-secondary">No</span>
                {% endif %}
              </td>
              <td>
                {% if not user.is_active %}
                <a href="{{ url_for('admin.approve_user', user_id=user.id) }}"
                  class="btn btn-success btn-sm me-1">Approve</a>
                {% endif %}
                <a href="{{ url_for('admin.delete_user', user_id=user.id) }}" class="btn btn-danger btn-sm me-1"
                  onclick="return confirm('사용자 {{ user.username }} (ID={{ user.id }}) 를 삭제하시겠습니까?');">
                  Delete
                </a>

                <!-- Change Password 버튼: 모달 오픈 -->
                <button type="button" class="btn btn-primary btn-sm" data-user-id="{{ user.id }}"
                  data-username="{{ user.username | e }}" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                  Change Password
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{# ========== Change Password Modal ========== #}
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="changePasswordForm" method="post" action="">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h5 class="modal-title" id="changePasswordModalLabel">Change Password</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-2">
            <small class="text-muted">User:</small>
            <div id="modalUserInfo" class="fw-bold"></div>
          </div>

          <div class="mb-3">
            <label for="newPasswordInput" class="form-label">New password</label>
            <input id="newPasswordInput" name="new_password" type="password" class="form-control" required minlength="8"
              placeholder="Enter new password">
            <div class="form-text">최소 8자 이상을 권장합니다.</div>
          </div>

          <div class="mb-3">
            <label for="confirmPasswordInput" class="form-label">Confirm password</label>
            <input id="confirmPasswordInput" name="confirm_password" type="password" class="form-control" required
              minlength="8" placeholder="Confirm new password">
            <div id="pwMismatch" class="invalid-feedback">비밀번호가 일치하지 않습니다.</div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="modalSubmitBtn" type="submit" class="btn btn-primary">Change Password</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
{% endblock %}
{% endblock %}