'use client';

import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import NexusAuthApi from "@lib/Nexus_Auth_API";

export default function Home() {
  const [username, setUsername] = useState(null);
  const [userID, setUserID] = useState(null);
  const [token, setToken] = useState(null);
  const [accessLevel, setAccessLevel] = useState(null);
  const router = useRouter();

  useEffect(() => {
    setUsername(localStorage.getItem('me'));
    setUserID(localStorage.getItem('u_id'));
    setToken(localStorage.getItem('s_tkn'));
    setAccessLevel(localStorage.getItem('a_l'));
  }, []);

  const clearLocalStorage = () => {
    localStorage.removeItem('me');
    localStorage.removeItem('s_tkn');
    localStorage.removeItem('u_id');
    localStorage.removeItem('a_l');
    setUsername(null);
  };

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

  return (
    <div className="page-content">
      {username && (
        <div className="max-w-sm mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
          <table className="min-w-full divide-y divide-gray-700">
            <tbody className="divide-y divide-gray-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">User ID:</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{userID}</strong></td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Username:</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{username}</strong></td>
              </tr>

              <tr>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Access Level:</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{accessLevel}</strong></td>
              </tr>
              <tr>
                <td colSpan="2" className="px-6 py-4 whitespace-nowrap text-sm 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>
        </div>
      )}
    </div>
  );
}