'use client';

import { usePathname, useRouter } from 'next/navigation';
import { CalendarCheck, Home, User } from 'lucide-react';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import { Spin } from 'antd';

export default function BottomMenuComponent() {
  const pathname = usePathname();
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const menus = [
    {
      label: 'Beranda',
      icon: (active) => <Home size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/beranda',
    },
    {
      label: 'Kehadiran',
      icon: (active) => <CalendarCheck size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/attendance',
    },
    {
      label: 'Profil',
      icon: (active) => <User size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/profile',
    },
  ];

  const handleNavigation = (path) => {
    if (pathname === path) return;
    setLoading(true);
    router.push(path);
  };

  // Matikan loading saat path berubah
  useEffect(() => {
    setLoading(false);
  }, [pathname]);

  return (
    <>
      {/* Loading Overlay */}
      {loading && (
        <div className="fixed inset-0 z-[9999] bg-white bg-opacity-80 flex items-center justify-center">
          <Spin size="large" />
        </div>
      )}

      {/* Bottom Menu */}
      <div className="fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-gray-200 shadow-md">
        <div className="flex justify-around items-center h-16">
          {menus.map((menu) => {
            const isActive = pathname === menu.path;

            return (
              <button
                key={menu.path}
                onClick={() => handleNavigation(menu.path)}
                className={classNames(
                  'flex flex-col items-center justify-center text-sm',
                  isActive ? 'text-blue-600 font-semibold' : 'text-gray-500'
                )}
              >
                {menu.icon(isActive)}
                <span className="text-xs mt-1">{menu.label}</span>
                {isActive && <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-1" />}
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
}