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

import { useState, useEffect, useRef } from "react";
import { HiMenuAlt3 } from "react-icons/hi";
// import { IoNotificationsOutline } from "react-icons/io5";
import { BiLogOutCircle } from "react-icons/bi";
import { MdCancel } from "react-icons/md";
import { Link, router, usePage } from "@inertiajs/react";

import MobileSidebar from "../mobile-sidebar";
import avatar from "../../../../images/avatar.svg";
import styles from "./nav.module.scss";

const DashboardNavbar = () => {
  const { auth } = usePage().props as any;

  const [showMobileNav, setShowMobileNav] = useState(false);
  const [showDropdown, setShowDropdown] = useState(false);

  const dropdownRef = useRef<HTMLDivElement>(null);

  /* ===============================
     MOBILE SIDEBAR CONTROLS
  ================================ */
  const openMobileSidebar = () => setShowMobileNav(true);
  const closeMobileSidebar = () => setShowMobileNav(false);

  /* ===============================
     DROPDOWN OUTSIDE CLICK
  ================================ */
  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setShowDropdown(false);
      }
    };

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

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

  return (
    <>
      {/* ===============================
          BACKDROP (MOBILE ONLY)
      ================================ */}
      {showMobileNav && (
        <div
          className={`${styles.backdrop} ${styles.show}`}
          onClick={closeMobileSidebar}
        />
      )}

      {/* ===============================
          MOBILE SIDEBAR
      ================================ */}
      <MobileSidebar show={showMobileNav} closeBar={closeMobileSidebar} />

      {/* ===============================
          NAVBAR
      ================================ */}
      <nav className={styles.nav}>
        {/* LEFT */}
        <div className={styles.left}>
          <div className={styles.contextPills}>
            <div className={styles.roleInfo}>
              <span>The Censers Church</span>
              <h6>- Workers Portal</h6>
            </div>
          </div>
        </div>

        {/* RIGHT */}
        <div className={styles.right}>
          {/* EMAIL */}
          <p className={styles.email}>
            {auth?.user?.email}
          </p>

          {/* NOTIFICATIONS */}
          {/* <Link href="/dashboard/notifications" className={styles.iconBtn}>
            <IoNotificationsOutline size={22} />
            <span className={styles.badge}>3</span>
          </Link> */}

          {/* AVATAR */}
          <div
            className={styles.avatarSection}
            onClick={() => setShowDropdown((prev) => !prev)}
          >
            <img src={avatar} alt="avatar" className={styles.avatar} />
            {/* <span className={styles.username}>
              Worker
            </span> */}
          </div>

          {/* DROPDOWN */}
          {showDropdown && (
            <div className={styles.dropdown} ref={dropdownRef}>
              <div className={styles.dropdownHeader}>
                <img src={avatar} className={styles.dropdownAvatar} />
                <div className={styles.userInfo}>
                  <span className={styles.name}>
                    {auth?.user?.name}
                  </span><br />
                  <span className={styles.email}>
                    {auth?.user?.email}
                  </span>
                </div>
              </div>

              <div className={styles.dropdownLinks}>
                <Link
                  href="/dashboard/my-profile"
                  className={styles.dropdownLink}
                >
                  Manage Your Profile
                </Link>

                <button
                  onClick={handleLogout}
                  className={styles.logoutBtn}
                >
                  <BiLogOutCircle size={16} />
                  Logout
                </button>
              </div>
            </div>
          )}

          {/* HAMBURGER */}
          <span className={styles.menuIcon} onClick={openMobileSidebar}>
            {showMobileNav ? (
              <MdCancel size={24} />
            ) : (
              <HiMenuAlt3 size={24} />
            )}
          </span>
        </div>
      </nav>
    </>
  );
};

export default DashboardNavbar;