<!-- views/inusers.ejs -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>In-House Users</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/user-creation.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

  
</head>

<body>

  <div id="sidebar">
    <img src="LOGO.PNG" alt="Custom Image">
    <div id="sidebarCollapse">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a href="#" id="userDataLink">User Data</a>
    <a href="#" id="addUserLink">Add User</a>
    <a href="#" id="deleteUserLink">Delete User</a>
    <a href="#" id="resetPasswordLink">Reset Password</a>
    <a href="/home" id="homeLink">Home</a>
  </div>

  <div id="content">
    <h2>Welcome to the In-House Users Page</h2>
    <div id="downloadButtonContainer">
      <button id="downloadButton">Download as Excel</button>
    </div>
    <div id="userDataContainer">
      <h3>All Users</h3>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Password</th>
            <th>Last Login</th>
            <th>Job Title</th>
          </tr>
        </thead>
        <tbody>
          <% if (allUsers && allUsers.length > 0) { %>
            <% allUsers.forEach(user => { %>
              <tr>
                <td><%= user.name %></td>
                <td><%= user.username %></td>
                <td><%= user.email %></td>
                <td><%= user.password %></td>
                <td><%= new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
                <td><%= user.jobTitle %></td>                
              </tr>
            <% }); %>
          <% } else { %>
            <tr>
              <td colspan="6">No users available.</td>
            </tr>
          <% } %>
        </tbody>
      </table>
    </div>
    <div id="createUserForm" class="user-creation-container" style="display: none;">
      <div class="title">Registration</div>
      <div class="content">
        <form action="/createUser" id="userForm" method="post">
          <div class="user-details">
            <div class="input-box">
              <span class="details">Full Name</span>
              <input type="text" name="name"  id="name" placeholder="Enter your name" required>
            </div>
            <div class="input-box">
              <span class="details">Username</span>
              <input type="text" name="username" id="username" placeholder="Enter your username" required>
            </div>
            <div class="input-box">
              <span class="details">Email</span>
              <input type="text" name="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-box">
              <span class="details">Password</span>
              <input type="password" name="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="input-box">
              <span class="details">Confirm Password</span>
              <input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password" required>
            </div>
            <div class="input-box">
              <span class="details">Job Title</span>
              <select name="jobTitle" id="jobTitle">
                <option value="admin">Admin</option>
                <option value="dataAnalyst">Data Analyst</option>
              </select>
            </div>
          </div>
          <div class="button">
            <input type="submit" value="Register">
          </div>
        </form>
      </div>
    </div>
    <div id="resetPasswordFormContainer" style="display: none;">
      <div id="resetPasswordForm" class="user-creation-container">
        <div class="title">Reset Password</div>
        <div class="content">
          <form id="resetPasswordForm">
            <div class="user-details">
              <div class="input-box">
                <span class="details">Username</span>
                <input type="text" name="username" id="resetUsername" placeholder="Enter username" required>
              </div>
              <div class="input-box">
                <span class="details">New Password</span>
                <input type="password" name="password" id="resetPassword" placeholder="Enter new password" required>
              </div>
              <div class="input-box">
                <span class="details">Confirm Password</span>
                <input type="password" name="confirmPassword" id="resetConfirmPassword" placeholder="Confirm new password" required>
              </div>
            </div>
            <div class="button">
              <input type="submit" value="Reset Password">
            </div>
          </form>
        </div>
      </div>
    </div>
    

  <!-- Your existing script tags -->
  
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
   const allUsers = <%- JSON.stringify(allUsers) %>;

$(document).ready(function () {
  $('#resetPasswordLink').on('click', function () {
    $('#resetPasswordFormContainer').show();
    $('#createUserForm').hide();
    $('#userDataContainer').hide();
    $('#downloadButtonContainer').hide();
  });

  $('#addUserLink').on('click', function () {
    $('#resetPasswordFormContainer').hide();
    $('#createUserForm').show();
    $('#userDataContainer').hide();
    $('#downloadButtonContainer').hide();
  });

  $('#userDataLink').on('click', function () {
    $('#resetPasswordFormContainer').hide();
    $('#createUserForm').hide();
    $('#userDataContainer').show();
    $('#downloadButtonContainer').show();
  });
});

$('#downloadButton').on('click', function () {
  // Call the downloadExcel function with the allUsers data
  downloadExcel(allUsers);
});

function downloadExcel(allUsers) {
  if (allUsers && allUsers.length > 0) {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('All Users');
    const headers = ['Name', 'Username', 'Email', 'Password', 'Last Login', 'Job Title'];
    worksheet.addRow(headers);
    allUsers.forEach(user => {
      const rowData = [
        user.name || '',
        user.username || '',
        user.email || '',
        user.password || '',
        user.lastLogin ? new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) : '',
        user.jobTitle || ''
      ];
      worksheet.addRow(rowData);
    });
    workbook.xlsx.writeBuffer().then(buffer => {
      const currentDate = new Date();
      const formattedDate = currentDate.toISOString().split('T')[0];
      const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
      const fileName = `user_data_${formattedDate}_${formattedTime}.xlsx`;
      const blob = new Blob([buffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      saveAs(blob, fileName);
    });
  } else {
    console.error('No data available for download.');
  }
}

function isStrongPassword(password) {
  // Password must be at least 10 characters long
  if (password.length < 10) {
    return false;
  }

  // Password must contain at least one uppercase letter
  if (!/[A-Z]/.test(password)) {
    return false;
  }

  // Password must contain at least one lowercase letter
  if (!/[a-z]/.test(password)) {
    return false;
  }

  // Password must contain at least one digit
  if (!/\d/.test(password)) {
    return false;
  }

  // Password must contain at least one symbol
  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
    return false;
  }

  return true;
}



function resetFormFields() {
        $('#name').val('');
        $('#username').val('');
        $('#email').val('');
        $('#password').val('');
        $('#confirmPassword').val('');
        $('#jobTitle').val('');
      }


      $('#userForm').on('submit', function (e) {
      e.preventDefault();

      const name = $('#name').val();
      const username = $('#username').val();
      const email = $('#email').val();
      const password = $('#password').val();
      const confirmPassword = $('#confirmPassword').val();
      const jobTitle = $('#jobTitle').val();

      if (password !== confirmPassword) {
        alert('Passwords do not match. Please enter the same password in both fields.');
        return;
      }

      if (!isStrongPassword(password)) {
        alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
        return;
      }

      fetch('/createUser', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: name,
          username: username,
          email: email,
          password: password,
          jobTitle: jobTitle,
        }),
      })
        .then(response => {
          if (response.status === 201) {
            // Status 201 indicates successful creation
            return response.json();
          } else {
            return response.json().then(data => {
              throw new Error(data.error || `HTTP error! Status: ${response.status}`);
            });
          }
        })
        .then(data => {
          console.log('User registration success:', data);
          alert('User registered successfully!');
          resetFormFields();
        })
        .catch(error => {
          console.error('User registration error:', error);
          handleRegistrationError(error);
        });
    });

function handleRegistrationError(error) {
  console.error('Registration error:', error); // Log the full error object for debugging

  let errorMessage;

  if (typeof error === 'string') {
    errorMessage = error;
  } else if (error instanceof Error) {
    errorMessage = error.message;
  } else if (error.response && error.response.data && error.response.data.error) {
    errorMessage = error.response.data.error;
  } else {
    errorMessage = 'Unknown error';
  }

  if (errorMessage.includes('Username is already taken')) {
    alert('Username is already taken. Please choose a different username.');
  } else if (errorMessage.includes('Email is already in use')) {
    alert('Email is already in use. Please choose a different email.');
  } else if (errorMessage.includes('Password does not meet complexity requirements')) {
    alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
  } else if (errorMessage.includes('User registration failed')) {
    alert('User registration failed. Please try again.');
  } else {
    alert(`Unknown error: ${errorMessage}`);
  }
}



$('#resetPasswordForm').on('submit', function (e) {
  e.preventDefault();

  // Get values from the form
  const username = $('#resetUsername').val();
  const password = $('#resetPassword').val();
  const confirmPassword = $('#resetConfirmPassword').val();

  console.log('Username:', username);
  console.log('New Password:', password);

  // Validate passwords
  if (password !== confirmPassword) {
    alert('Error: Passwords do not match. Please enter the same password in both fields.');
    return;
  }

  // Check if the new password meets complexity requirements
  if (!isStrongPassword(password)) {
    alert('Error: Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
    return;
  }

  // Make a fetch request
  fetch('/reset-password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: username,
        password: password,
        confirmPassword: confirmPassword,
      }),
    })
    .then(response => {
      if (!response.ok) {
        return response.text().then(errorText => {
          throw new Error(`HTTP error! Status: ${response.status}, Error: ${errorText}`);
        });
      }
      return response.json();
    })
    .then(data => {
      console.log('Success:', data);

      // Show an alert with the received data
      alert(data.success || data.error || 'Password change status unknown');

      // Optionally, you can clear the form or take other actions after the password change
      $('#resetUsername').val('');
      $('#resetPassword').val('');
      $('#resetConfirmPassword').val('');

      // You might want to hide the reset password form after submission
      $('#resetPasswordFormContainer').hide();
    })
    .catch(error => {
      // Handle 404 error separately to show an alert
      if (error.message.includes('HTTP error! Status: 404')) {
        alert('Error: User not found. Please enter a valid username.');
      } else {
        console.error('Fetch Error:', error);
      }
    });
});

  </script>

  </div>

</body>

</html>
