/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState, useRef, useEffect } from "react";
import styles from "./admin-navbar.module.scss";
import { HiMenuAlt3 } from "react-icons/hi";
import { BiSolidCopyAlt, BiLogOutCircle } from "react-icons/bi";
import avatar from "../../../../images/avatar.svg";
import AdminMobileSidebar from "../AdminMobileSidebar";
import { Link, router, usePage } from "@inertiajs/react";

const AdminNavbar: React.FC = () => {
  const [showMobileNav, setShowMobileNav] = useState(false);
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const { auth } = usePage().props as any; // Get auth user from Inertia
  const user = auth?.user || {}; // fallback

  const toggleMobileSidebar = () => setShowMobileNav((prev) => !prev);

  const handleLogout = () => {
    router.post("/admin/logout");
    setShowDropdown(false);
  };

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setShowDropdown(false);
      }
    };

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

  return (
    <>
      {/* MOBILE SIDEBAR */}
      {showMobileNav && <AdminMobileSidebar closeBar={toggleMobileSidebar} />}

      {/* NAVBAR */}
      <div className={styles.nav}>
        <div className={styles.nav__left}>
          <h4>Welcome, {user.first_name || "Admin"}</h4>
        </div>

        <div className={styles.nav__right}>
          {/* ICON BEFORE AVATAR */}
          <div className={styles.iconSection}>
            <BiSolidCopyAlt size={20} />
          </div>

          <div className={styles.divider}></div>

          {/* AVATAR & DROPDOWN */}
          <div
            className={styles.avatarSection}
            onClick={() => setShowDropdown(!showDropdown)}
          >
            <img
              src={avatar}
              alt="Admin avatar"
              className={styles.nav__avatar}
            />
            <span className={styles.username}>{user.first_name || "Admin"}</span>
          </div>

          {showDropdown && (
            <div className={styles.dropdown} ref={dropdownRef}>
              {/* DROPDOWN HEADER */}
              <div className={styles.dropdownHeader}>
                <img
                  src={avatar}
                  alt="Admin avatar"
                  className={styles.dropdownAvatar}
                />
                <div className={styles.userInfo}>
                  <span className={styles.name}>
                    {user.first_name || "Admin"} {user.last_name || ""}
                  </span>
                  <span className={styles.email}>{user.email || "admin@example.com"}</span>
                </div>
              </div>

              {/* DROPDOWN LINKS */}
              <div className={styles.dropdownLinks}>
                <Link
                  href="/admin/kyc"
                  className={styles.dropdownLink}
                  onClick={() => setShowDropdown(false)}
                >
                  Manage KYC
                </Link>
                <Link
                  href="/admin/users"
                  className={styles.dropdownLink}
                  onClick={() => setShowDropdown(false)}
                >
                  Manage Users
                </Link>
                <button className={styles.logoutBtn} onClick={handleLogout}>
                  <BiLogOutCircle /> Logout
                </button>
              </div>
            </div>
          )}

          {/* MOBILE HAMBURGER */}
          <span
            onClick={toggleMobileSidebar}
            role="button"
            aria-label="Toggle mobile menu"
            className={styles.hamburger}
          >
            <HiMenuAlt3 size="1.5rem" color="#fff" />
          </span>
        </div>
      </div>
    </>
  );
};

export default AdminNavbar;