<%- include('partials-header.ejs', { title: 'Quản lý tài khoản', user: user }) %>
<%
  const roleLabel = function(role) {
    if (role === 'admin') return 'Quản trị';
    if (role === 'mod') return 'Điều phối';
    if (role === 'pg') return 'PG';
    return role;
  };
%>

<section class="section">
  <div class="page-shell">
    <h1 class="h3 mb-3">Quản lý tài khoản</h1>

    <div class="panel mb-3">
      <h2 class="h5 mb-3">Tạo tài khoản</h2>
      <form action="/admin/users" method="post" class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Tên đăng nhập</label>
          <input class="form-control" name="username" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Mật khẩu</label>
          <input class="form-control" name="password" type="password" required>
        </div>
        <div class="col-md-2">
          <label class="form-label">Vai trò</label>
          <select class="form-select" name="role">
            <% roles.forEach(function(role) { %>
              <option value="<%= role %>"><%= roleLabel(role) %></option>
            <% }); %>
          </select>
        </div>
        <div class="col-md-2 d-flex align-items-end">
          <button class="btn btn-brand w-100" type="submit">Tạo</button>
        </div>
      </form>
    </div>

    <div class="panel">
      <div class="table-responsive">
        <table class="table mb-0">
          <thead>
            <tr>
              <th>ID</th>
              <th>Tên đăng nhập</th>
              <th>Vai trò</th>
              <th>Trạng thái</th>
              <th>Ngày tạo</th>
              <th class="text-end">Thao tác</th>
            </tr>
          </thead>
          <tbody>
            <% users.forEach(function(item) { %>
              <tr>
                <td><%= item.id %></td>
                <td><%= item.username %></td>
                <td><%= roleLabel(item.role) %></td>
                <td><%= item.isActive ? 'Đang hoạt động' : 'Không hoạt động' %></td>
                <td><%= new Date(item.createdAt).toLocaleString('vi-VN') %></td>
                <td class="text-end">
                  <div class="d-inline-flex gap-2 flex-wrap justify-content-end">
                    <button
                      class="btn btn-sm btn-outline-secondary"
                      type="button"
                      data-bs-toggle="modal"
                      data-bs-target="#changePasswordModal"
                      data-user-id="<%= item.id %>"
                      data-username="<%= item.username %>"
                    >
                      Đổi mật khẩu
                    </button>
                    <button
                      class="btn btn-sm btn-outline-danger"
                      type="button"
                      data-bs-toggle="modal"
                      data-bs-target="#deleteUserModal"
                      data-user-id="<%= item.id %>"
                      data-username="<%= item.username %>"
                    >
                      Xóa
                    </button>
                  </div>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="changePasswordForm" method="post">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="changePasswordModalTitle">Đổi mật khẩu</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
      </div>
      <div class="modal-body">
        <p class="muted mb-3">Nhập mật khẩu mới cho <strong id="changePasswordUsername"></strong>.</p>
        <label class="form-label" for="newPasswordInput">Mật khẩu mới</label>
        <input class="form-control" id="newPasswordInput" name="password" type="password" minlength="8" autocomplete="new-password" required>
        <div class="form-text">Mật khẩu tối thiểu 8 ký tự.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Hủy</button>
        <button type="submit" class="btn btn-brand">Lưu mật khẩu</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="deleteUserForm" method="post">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="deleteUserModalTitle">Xóa tài khoản</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
      </div>
      <div class="modal-body">
        Bạn có chắc muốn xóa tài khoản <strong id="deleteUsername"></strong> không?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Hủy</button>
        <button type="submit" class="btn btn-outline-danger">Xóa tài khoản</button>
      </div>
    </form>
  </div>
</div>

<script>
  const changePasswordModal = document.getElementById('changePasswordModal');
  changePasswordModal.addEventListener('show.bs.modal', (event) => {
    const button = event.relatedTarget;
    const userId = button.getAttribute('data-user-id');
    const username = button.getAttribute('data-username');
    document.getElementById('changePasswordUsername').textContent = username;
    document.getElementById('changePasswordForm').action = `/admin/users/${userId}/password`;
    document.getElementById('newPasswordInput').value = '';
  });

  const deleteUserModal = document.getElementById('deleteUserModal');
  deleteUserModal.addEventListener('show.bs.modal', (event) => {
    const button = event.relatedTarget;
    const userId = button.getAttribute('data-user-id');
    const username = button.getAttribute('data-username');
    document.getElementById('deleteUsername').textContent = username;
    document.getElementById('deleteUserForm').action = `/admin/users/${userId}/delete`;
  });
</script>

<%- include('partials-footer.ejs') %>
