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

import React, { useEffect, useRef, useState } from 'react'
import Link from 'next/link'
import Cookies from 'js-cookie'
import { UserTypes } from '@/Constant/enums'

interface CustomModalProps {
  onHide: () => void
  isPinned: boolean
  setIsPinned: React.Dispatch<React.SetStateAction<boolean>>
  togglePin: () => void
  toggleLogin: () => void
}

const menuItems = [
  { label: 'My Profile', href: '/my-profile', icon: 'fa-user', gradient: 'bg-purple' },
  { label: 'Staff', href: '/add-users', icon: 'fa-user-plus', gradient: 'bg-purple' },
  { label: 'Shipments', href: '/shipments', icon: 'fa-truck', gradient: 'bg-purple' },
  { label: 'Orders', href: '/my-orders', icon: 'fa-cube', gradient: 'bg-purple' },
  { label: 'Invoices', href: '/group-invoices', icon: 'fa-file-invoice', gradient: 'bg-purple' },
  { label: 'Bulk Orders', href: '/bulk-orders', icon: 'fa-boxes', gradient: 'bg-purple' },
  { label: 'Settlements', href: '/settlements', icon: 'fa-money-bill-transfer', gradient: 'bg-purple' },
  { label: 'Privacy Policy', href: '/privacy-policy', icon: 'fa-shield-halved', gradient: 'bg-purple' },
  { label: 'Terms & Conditions', href: '/terms-conditions', icon: 'fa-clipboard', gradient: 'bg-purple' },
]

const MenuModal: React.FC<CustomModalProps> = ({ onHide, isPinned, toggleLogin }) => {
  const modalRef = useRef<HTMLDivElement>(null)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [currentPath, setCurrentPath] = useState('')
  const [allData, setAllData] = useState<any>(null)

  useEffect(() => {
    if (typeof window === 'undefined') return

    const token = localStorage.getItem('AUTH_TOKEN')
    setIsLoggedIn(!!token)

    setCurrentPath(window.location.pathname)

    const storedUser = localStorage.getItem('ALL_DATA')
    if (storedUser) {
      setAllData(JSON.parse(storedUser)?.data ?? null)
    }
  }, [])

  const clearData = () => {
    localStorage.clear()
    Cookies.remove('AUTH_TOKEN')
  }

  const filteredMenu = menuItems.filter((item) => {
    const userType = allData?.userType?.id
    if (userType === UserTypes.NormalCustomer)
      return !['/add-users', '/settlements', '/shipments'].includes(item.href)
    if (userType !== UserTypes.InternationalCustomer)
      return item.href !== '/shipments'
    return true
  })

  const handleAuthAction = () => {
    onHide()
    if (isLoggedIn) {
      clearData()
      window.location.href = '/dashboard'
    } else {
      toggleLogin()
    }
  }

  return (
    <>
      <style>
        {`
          .mainMenuBg { height: 200px !important; }
          .custom-rounded-modal .modal-content { border-radius: 0 !important; }
        `}
      </style>

      <div ref={modalRef}>
        {/* Header */}
        <div className="card rounded-0 mainMenuBg mb-3" data-card-height={150}>
          <div className="card-top">
            <button
              onClick={(e) => {
                e.preventDefault()
                if (!isPinned) onHide()
              }}
              className="close-menu float-end me-2 text-center mt-3 icon-40 notch-clear bg-transparent border-0"
            >
              <i className="fa fa-times color-white" />
            </button>
          </div>

          <div className="card-bottom">
            <h1 className="color-white ps-3 mb-n1 font-28">
              {allData?.firstName} {allData?.lastName}
            </h1>
            <p className="mb-2 ps-3 font-12 color-white opacity-50">{allData?.email}</p>
          </div>

          <div className="card-overlay bg-gradient" />
        </div>

        {/* Menu List */}
        <div className="list-group list-custom-small list-menu mt-4">
          {filteredMenu.map((item, index) => {
            const isActive = currentPath === item.href
            return (
              <Link
                href={item.href}
                key={index}
                className={isActive ? 'active-nav' : ''}
                id="nav-pages"
                onClick={onHide}
              >
                <i className={`fa ${item.icon} ${item.gradient} color-white`} />
                <span>{item.label}</span>
                <i className="fa fa-angle-right" />
              </Link>
            )
          })}

          <button
            onClick={handleAuthAction}
            className="border-0 default-link btn btn-full gradient-highlight btn-m rounded-sm text-uppercase font-800 mt-2 text-white w-100"
          >
            {isLoggedIn ? 'Logout' : 'Login'}
          </button>
        </div>

        {/* Footer */}
        <h6 className="menu-divider font-10 mt-3 mb-4 text-center p-0 pe-2">
          <i className="fa fa-copyright" /> Copyright{' '}
          <span className="copyright-year">2025</span> by Delybell
        </h6>
      </div>
    </>
  )
}

export default MenuModal