script.js

// Define the base URL for the backend
const BASE_URL = 'http://eco-passport.qatar.cmu.edu:8080'; // Change this to your backend URL

let currentTab = 'users';

// Set the token in localStorage
function setToken() {
  const token = document.getElementById('auth-token').value;
  if (token) {
    localStorage.setItem('authToken', token);
    alert('Token set successfully!');
  } else {
    alert('Please enter a valid token.');
  }
}

// Get the token from localStorage
function getToken() {
  return localStorage.getItem('authToken');
}

// Helper function to make authenticated fetch requests
async function fetchWithAuth(url, options = {}) {
  const token = getToken();
  if (!token) {
    alert('No token found. Please set the token first.');
    return;
  }

  const headers = {
    ...options.headers,
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json',
  };

  const response = await fetch(url, { ...options, headers });
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
}

// Fetch and display users
async function fetchUsers() {
  try {
    const users = await fetchWithAuth(`${BASE_URL}/users/`);
    const table = document.getElementById('users-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    users.forEach(user => {
      const row = table.insertRow();
      row.innerHTML = `
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
        <td>${user.role}</td>
        <td>
          <button onclick="openUserModal(${user.id})">Edit</button>
          <button onclick="deleteUser(${user.id})">Delete</button>
        </td>
      `;
    });
  } catch (error) {
    console.error('Failed to fetch users:', error);
    alert('Failed to fetch users. Please check your token and try again.');
  }
}

// Fetch and display events
async function fetchEvents() {
  try {
    const events = await fetchWithAuth(`${BASE_URL}/events/`);
    const table = document.getElementById('events-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    events.forEach(event => {
      const row = table.insertRow();
      row.innerHTML = `
        <td>${event.id}</td>
        <td>${event.name}</td>
        <td>${event.location}</td>
        <td>${event.start_time}</td>
        <td>
          <button onclick="openEventModal(${event.id})">Edit</button>
          <button onclick="deleteEvent(${event.id})">Delete</button>
        </td>
      `;
    });
  } catch (error) {
    console.error('Failed to fetch events:', error);
    alert('Failed to fetch events. Please check your token and try again.');
  }
}

// Show the selected tab
function showTab(tabName) {
  currentTab = tabName;
  document.querySelectorAll('.tab-content').forEach(tab => {
    tab.style.display = 'none';
  });
  document.getElementById(tabName).style.display = 'block';
  if (tabName === 'users') fetchUsers();
  else if (tabName === 'events') fetchEvents();
}

// Open user modal for editing or adding
async function openUserModal(userId) {
  try {
    const modal = document.getElementById('user-modal');
    const form = document.getElementById('user-form');
    if (userId) {
      const user = await fetchWithAuth(`${BASE_URL}/users/${userId}`);
      document.getElementById('user-id').value = user.id;
      document.getElementById('name').value = user.name;
      document.getElementById('email').value = user.email;
      document.getElementById('role').value = user.role;
      document.getElementById('user-modal-title').innerText = 'Edit User';
    } else {
      form.reset();
      document.getElementById('user-modal-title').innerText = 'Add User';
    }
    modal.style.display = 'block';
  } catch (error) {
    console.error('Failed to fetch user:', error);
    alert('Failed to fetch user details. Please check your token and try again.');
  }
}

// Close user modal
function closeUserModal() {
  document.getElementById('user-modal').style.display = 'none';
}

// Save user (add or update)
document.getElementById('user-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  try {
    const userId = document.getElementById('user-id').value;
    const user = {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value,
      role: document.getElementById('role').value,
    };
    const method = userId ? 'PUT' : 'POST';
    const url = userId ? `${BASE_URL}/users/${userId}` : `${BASE_URL}/users/`;
    await fetchWithAuth(url, {
      method,
      body: JSON.stringify(user),
    });
    closeUserModal();
    fetchUsers();
  } catch (error) {
    console.error('Failed to save user:', error);
    alert('Failed to save user. Please check your token and try again.');
  }
});

// Delete user
async function deleteUser(userId) {
  try {
    await fetchWithAuth(`${BASE_URL}/users/${userId}`, { method: 'DELETE' });
    fetchUsers();
  } catch (error) {
    console.error('Failed to delete user:', error);
    alert('Failed to delete user. Please check your token and try again.');
  }
}

// Open event modal for editing or adding
// Open event modal for editing or adding
async function openEventModal(eventId) {
  try {
    const modal = document.getElementById('event-modal');
    const form = document.getElementById('event-form');
    if (eventId) {
      const event = await fetchWithAuth(`${BASE_URL}/events/${eventId}`);
      document.getElementById('event-id').value = event.id;
      document.getElementById('event-name').value = event.name;
      document.getElementById('location').value = event.location;
      document.getElementById('start-time').value = event.start_time ? event.start_time.slice(0, 16) : ''; // Convert to datetime-local format
      document.getElementById('end-time').value = event.end_time ? event.end_time.slice(0, 16) : ''; // Convert to datetime-local format
      document.getElementById('event-modal-title').innerText = 'Edit Event';
    } else {
      form.reset();
      document.getElementById('event-modal-title').innerText = 'Add Event';
    }
    modal.style.display = 'block';
  } catch (error) {
    console.error('Failed to fetch event:', error);
    alert('Failed to fetch event details. Please check your token and try again.');
  }
}

// Close event modal
function closeEventModal() {
  document.getElementById('event-modal').style.display = 'none';
}

// Save event (add or update)
document.getElementById('event-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  try {
    const eventId = document.getElementById('event-id').value;
    const startTime = document.getElementById('start-time').value;
    const endTime = document.getElementById('end-time').value;

    // Validate start and end times
    if ((startTime && !endTime) || (!startTime && endTime)) {
      alert('Both start time and end time must be provided or left empty.');
      return;
    }

    if (startTime && endTime && new Date(startTime) >= new Date(endTime)) {
      alert('Start time must be before end time.');
      return;
    }

    const event = {
      name: document.getElementById('event-name').value,
      location: document.getElementById('location').value,
      start_time: startTime ? new Date(startTime).toISOString() : null, // Convert to RFC3339 format
      end_time: endTime ? new Date(endTime).toISOString() : null, // Convert to RFC3339 format
    };

    const method = eventId ? 'PATCH' : 'POST';
    const url = eventId ? `${BASE_URL}/events/${eventId}` : `${BASE_URL}/events/`;
    await fetchWithAuth(url, {
      method,
      body: JSON.stringify(event),
    });
    closeEventModal();
    fetchEvents();
  } catch (error) {
    console.error('Failed to save event:', error);
    alert('Failed to save event. Please check your token and try again.');
  }
});
// Delete event
async function deleteEvent(eventId) {
  try {
    await fetchWithAuth(`${BASE_URL}/events/${eventId}`, { method: 'DELETE' });
    fetchEvents();
  } catch (error) {
    console.error('Failed to delete event:', error);
    alert('Failed to delete event. Please check your token and try again.');
  }
}

// Initialize
showTab(currentTab);