frontend/app/su/[access_level]/page.js

'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import NexusAuthApi from '@lib/Nexus_Auth_API';
import { useToast } from '@lib/ToastContext';

export default function SuperUser() {
  const router = useRouter();
  const { access_level } = useParams();
  const toast = useToast();

  const [userDetails, setUserDetails] = useState({
    username: null,
    userID: null,
    token: null,
    accessLevel: null,
  });
  const [users, setUsers] = useState([]);

  // Fetch user details from local storage on mount
  useEffect(() => {
    setUserDetails({
      username: localStorage.getItem('me'),
      userID: localStorage.getItem('u_id'),
      token: localStorage.getItem('s_tkn'),
      accessLevel: localStorage.getItem('a_l'),
    });
  }, []);

  const clearLocalStorage = () => {
    localStorage.removeItem('me');
    localStorage.removeItem('s_tkn');
    localStorage.removeItem('u_id');
    localStorage.removeItem('a_l');
    setUserDetails({
      username: null,
      userID: null,
      token: null,
      accessLevel: null,
    });
  };

  const handleLogout = () => {
    const { userID, token } = userDetails;
    NexusAuthApi.logout(userID, token)
      .then(() => {
        clearLocalStorage();
        window.location.reload();
      })
      .catch((error) => {
        toast.error('Logout failed');
        console.error('Logout failed', error);
      });
  };

  const getAllUsers = () => {
    const { userID, token } = userDetails;
    NexusAuthApi.getAllUsers(userID, token)
      .then((response) => {
        if (response.status === 200) {
          setUsers(response.data);
        }
        else if (response.status === 401) {
          console.info('Insuffient permissions to get all users');
          toast.error('Insuffient permissions to get all users');
        }
      })
      .catch((error) => {
        console.error('Get all users failed', error);
        toast.error('Get all users failed');
      });
  };

  // Redirect if the access level doesn't match
  useEffect(() => {
    if (access_level && userDetails.accessLevel) {
      if (access_level !== userDetails.accessLevel) {
        router.push(`/su/${userDetails.accessLevel}`);
      }
    }
  }, [access_level, userDetails.accessLevel]);

  const { username, userID, accessLevel } = userDetails;

  return (
    <div className="page-content max-w-xl mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
      {username ? (
        <>
          <table className="min-w-full divide-y divide-gray-700">
            <tbody className="divide-y divide-gray-700">
              <tr>
                <td className="px-6 py-4 text-sm font-medium text-gray-300">Username:</td>
                <td className="px-6 py-4 text-sm text-gray-100"><strong>{username}</strong></td>
              </tr>
              <tr>
                <td className="px-6 py-4 text-sm font-medium text-gray-300">User ID:</td>
                <td className="px-6 py-4 text-sm text-gray-100"><strong>{userID}</strong></td>
              </tr>
              <tr>
                <td className="px-6 py-4 text-sm font-medium text-gray-300">Access Level:</td>
                <td className="px-6 py-4 text-sm text-gray-100"><strong>{accessLevel}</strong></td>
              </tr>
              <tr>
                <td colSpan="2" className="px-6 py-4 text-center">
                  <button
                    onClick={handleLogout}
                    className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition duration-300"
                  >
                    Logout
                  </button>
                </td>
              </tr>
            </tbody>
          </table>

          {(accessLevel === 'admin' || accessLevel === 'hush') && (
            <div>
              <button
                onClick={getAllUsers}
                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300 mt-4"
              >
                Get All Users
              </button>
              {users.length > 0 && (
                <div className="mt-4 max-h-64 overflow-y-auto">
                  <table className="min-w-full divide-y divide-gray-700">
                    <thead>
                      <tr>
                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                          Username
                        </th>
                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                          Email
                        </th>
                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                          Access Level
                        </th>
                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                          Date Joined
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-700">
                      {users.map((user, index) => (
                        <tr key={index}>
                          <td className="px-6 py-4 text-sm text-gray-100">{user.username}</td>
                          <td className="px-6 py-4 text-sm text-gray-100">{user.email || 'N/A'}</td>
                          <td className="px-6 py-4 text-sm text-gray-100">{user.access_level}</td>
                          <td className="px-6 py-4 text-sm text-gray-100">{new Date(user.date_joined).toLocaleDateString()}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          )}
        </>
      ) : (
        <div className="p-4 text-center">No user details available. Please log in.</div>
      )}
    </div>
  );
}