<%
  const userList =
    Array.isArray(users)
      ? users
      : [];

  const safeCurrentUser =
    typeof currentUser !== "undefined" &&
    currentUser
      ? currentUser
      : null;

  const successMessage =
    typeof success !== "undefined"
      ? success
      : null;

  const errorMessage =
    typeof error !== "undefined"
      ? error
      : null;
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Users | Company Management System
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 25px 15px;

      background-color: #f1f5f9;

      font-family:
        Arial,
        Helvetica,
        sans-serif;
    }

    button,
    input,
    select {
      font-family: inherit;
    }

    .users-page {
      width: 100%;
      max-width: 1350px;
      margin: 0 auto;
    }

    /* ==========================================
       PAGE HEADER
    ========================================== */

    .users-header {
      margin-bottom: 25px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .users-header h1 {
      margin: 15px 0 0;

      color: #0f172a;
    }

    .back-button,
    .add-user-button {
      min-height: 42px;
      padding: 0 17px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      color: #ffffff;

      border-radius: 7px;

      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .back-button {
      background-color: #64748b;
    }

    .back-button:hover {
      background-color: #475569;
    }

    .add-user-button {
      background-color: #2563eb;
    }

    .add-user-button:hover {
      background-color: #1d4ed8;
    }

    /* ==========================================
       MESSAGES
    ========================================== */

    .message {
      margin-bottom: 20px;
      padding: 14px 16px;

      border-radius: 7px;

      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
    }

    .success-message {
      background-color: #dcfce7;
      color: #15803d;

      border: 1px solid #bbf7d0;
    }

    .error-message {
      background-color: #fee2e2;
      color: #b91c1c;

      border: 1px solid #fecaca;
    }

    /* ==========================================
       USERS TABLE
    ========================================== */

    .users-table-container {
      width: 100%;
      overflow-x: auto;

      background-color: #ffffff;

      border-radius: 10px;

      box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.09);
    }

    .users-table {
      width: 100%;
      min-width: 1050px;

      border-collapse: collapse;
    }

    .users-table th,
    .users-table td {
      padding: 14px 15px;

      border-bottom:
        1px solid #e2e8f0;

      text-align: left;
      vertical-align: middle;
    }

    .users-table th {
      background-color: #1f2937;
      color: #ffffff;

      font-size: 14px;
      white-space: nowrap;
    }

    .users-table tbody tr:hover {
      background-color: #f8fafc;
    }

    .users-table tbody tr:last-child td {
      border-bottom: none;
    }

    .user-name {
      color: #0f172a;

      font-weight: 700;
    }

    .username {
      color: #475569;
    }

    /* ==========================================
       ROLE AND STATUS BADGES
    ========================================== */

    .role-badge,
    .status-badge {
      padding: 6px 11px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border-radius: 20px;

      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .role-admin {
      background-color: #fee2e2;
      color: #b91c1c;
    }

    .role-manager {
      background-color: #fef3c7;
      color: #b45309;
    }

    .role-viewer {
      background-color: #dbeafe;
      color: #1d4ed8;
    }

    .status-active {
      background-color: #dcfce7;
      color: #15803d;
    }

    .status-inactive {
      background-color: #e2e8f0;
      color: #475569;
    }

    .current-user-label {
      margin-left: 7px;
      padding: 3px 7px;

      display: inline-block;

      background-color: #ede9fe;
      color: #6d28d9;

      border-radius: 10px;

      font-size: 11px;
      font-weight: 700;
    }

    /* ==========================================
       USER ACTIONS
    ========================================== */

    .user-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      white-space: nowrap;
    }

    .edit-user-button {
      min-height: 38px;
      padding: 0 14px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      background-color: #64748b;
      color: #ffffff;

      border-radius: 6px;

      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .edit-user-button:hover {
      background-color: #475569;
    }

    .current-account-text {
      color: #64748b;

      font-size: 12px;
      font-weight: 700;
    }


.status-toggle-form {
  width: auto;
  margin: 0;
  padding: 0;

  display: inline-flex;

  background: transparent;

  border: none;
  box-shadow: none;
}

.status-toggle-button {
  min-height: 38px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 6px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.deactivate-user-button {
  background-color: #dc2626;
}

.deactivate-user-button:hover {
  background-color: #b91c1c;
}

.activate-user-button {
  background-color: #16a34a;
}

.activate-user-button:hover {
  background-color: #15803d;
}

    /* ==========================================
       EMPTY MESSAGE
    ========================================== */

    .empty-message {
      padding: 45px;

      color: #64748b;

      text-align: center;
    }

    /* ==========================================
       RESPONSIVE DESIGN
    ========================================== */

    @media (max-width: 650px) {
      .users-header {
        align-items: stretch;
        flex-direction: column;
      }

      .add-user-button {
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <main class="users-page">

    <!-- ==========================================
         PAGE HEADER
    =========================================== -->

    <div class="users-header">

      <div>

        <a
          href="/"
          class="back-button"
        >
          ← Back to Dashboard
        </a>

        <h1>
          Users Management
        </h1>

      </div>

      <a
        href="/users/create"
        class="add-user-button"
      >
        + Add User
      </a>

    </div>


    <!-- ==========================================
         SUCCESS AND ERROR MESSAGES
    =========================================== -->

    <% if (successMessage) { %>

      <div
        class="message success-message"
        role="alert"
      >
        <%= successMessage %>
      </div>

    <% } %>

    <% if (errorMessage) { %>

      <div
        class="message error-message"
        role="alert"
      >
        <%= errorMessage %>
      </div>

    <% } %>


    <!-- ==========================================
         USERS TABLE
    =========================================== -->

    <div class="users-table-container">

      <% if (userList.length === 0) { %>

        <div class="empty-message">
          No user accounts were found.
        </div>

      <% } else { %>

        <table class="users-table">

          <thead>

            <tr>
              <th>ID</th>
              <th>Full Name</th>
              <th>Username</th>
              <th>Role</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>

          </thead>

          <tbody>

            <% userList.forEach((user) => { %>

              <%
                const isCurrentAccount =
                  safeCurrentUser &&
                  Number(safeCurrentUser.id) ===
                  Number(user.id);
              %>

              <tr>

                <!-- User ID -->
                <td>
                  <%= user.id %>
                </td>

                <!-- Full Name -->
                <td class="user-name">

                  <%= user.full_name %>

                  <% if (isCurrentAccount) { %>

                    <span class="current-user-label">
                      You
                    </span>

                  <% } %>

                </td>

                <!-- Username -->
                <td class="username">
                  <%= user.username %>
                </td>

                <!-- User Role -->
                <td>

                  <span
                    class="
                      role-badge

                      <%= user.role === "Admin"
                        ? "role-admin"
                        : user.role === "Manager"
                          ? "role-manager"
                          : "role-viewer"
                      %>
                    "
                  >
                    <%= user.role %>
                  </span>

                </td>

                <!-- Account Status -->
                <td>

                  <span
                    class="
                      status-badge

                      <%= Number(user.is_active) === 1
                        ? "status-active"
                        : "status-inactive"
                      %>
                    "
                  >
                    <%= Number(user.is_active) === 1
                      ? "Active"
                      : "Inactive"
                    %>
                  </span>

                </td>

                <!-- Created Date -->
                <td>
                  <%= user.created_at
                    ? new Date(
                        user.created_at
                      ).toLocaleDateString(
                        "en-US"
                      )
                    : "—"
                  %>
                </td>

                <!-- User Actions -->
                <td>
<div class="user-actions">

  <a
    href="/users/<%= user.id %>/edit"
    class="edit-user-button"
  >
    Edit
  </a>
  <a
  href="/users/<%= user.id %>/reset-password"
  class="reset-password-button"
>
  Reset Password
</a>

  <% if (isCurrentAccount) { %>

    <span class="current-account-text">
      Current account
    </span>

  <% } else { %>

    <form
      action="/users/<%= user.id %>/toggle-status"
      method="POST"
      class="status-toggle-form"
      onsubmit="
        return confirm(
          '<%= Number(user.is_active) === 1
            ? "Are you sure you want to deactivate this user?"
            : "Are you sure you want to activate this user?"
          %>'
        );
      "
    >

      <button
        type="submit"
        class="
          status-toggle-button

          <%= Number(user.is_active) === 1
            ? 'deactivate-user-button'
            : 'activate-user-button'
          %>
        "
      >
        <%= Number(user.is_active) === 1
          ? "Deactivate"
          : "Activate"
        %>
      </button>

    </form>

  <% } %>

</div>

                </td>

              </tr>

            <% }); %>

          </tbody>

        </table>

      <% } %>

    </div>

  </main>

</body>

</html>