"use client";

import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";

interface AdminNavbarProps {
  collapsed: boolean;
  setCollapsed: (val: boolean) => void;
  role: "admin" | "student";
  name?: string;
}

export default function AdminNavbar({
  collapsed,
  setCollapsed,
  role,
  name,
}: AdminNavbarProps) {
  const router = useRouter();

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setDropdownOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const handleLogout = async () => {
    try {
      const logoutUrl =
        role === "admin"
          ? "/api/admin/logout"
          : "/api/student/logout";

      const loginUrl =
        role === "admin"
          ? "/admin/login"
          : "/student/login";

      await fetch(logoutUrl, {
        method: "POST",
      });

      router.push(loginUrl);
    } catch (error) {
      console.log(error);
    }
  };

  const displayName =
    name || (role === "admin" ? "Administrator" : "Student");

  const avatarLetter = displayName.charAt(0).toUpperCase();

  return (
    <nav className="admin-navbar">
      <div className="flex-grow-1">
        <button
          className="admin-collapse-btn"
          onClick={() => setCollapsed(!collapsed)}
        >
          <i className={`bi ${collapsed ? "bi-list" : "bi-list"}`} />
        </button>
      </div>

      <div className="d-flex align-items-center gap-3">
        <button className="btn admin-nav-icon" type="button">
          <i className="bi bi-bell-fill"></i>
        </button>

        <div className="position-relative" ref={dropdownRef}>
          <button
            type="button"
            className="btn admin-profile-btn"
            onClick={() => setDropdownOpen(!dropdownOpen)}
          >
            <span className="d-none d-md-inline">{displayName}</span>

            <div className="admin-avatar">{avatarLetter}</div>
          </button>

          {dropdownOpen && (
            <div className="admin-dropdown-menu shadow">
              <button className="dropdown-item">
                <i className="bi bi-person"></i>
                <span>Profile</span>
              </button>

              <button className="dropdown-item">
                <i className="bi bi-gear"></i>
                <span>Settings</span>
              </button>

              <hr className="my-1" />

              <button
                onClick={handleLogout}
                className="dropdown-item text-danger"
              >
                <i className="bi bi-box-arrow-right"></i>
                <span>Logout</span>
              </button>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}