"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { RxDashboard } from "react-icons/rx";
import { useRouter } from 'next/navigation';
import { FiMenu, FiX, FiUsers } from "react-icons/fi";
import { PiHandCoinsFill, PiPiggyBankLight, PiCellSignalFullBold, } from "react-icons/pi";
import { IoSettingsOutline } from "react-icons/io5";
import { BiSupport } from "react-icons/bi";
import { useAuth } from "../context/AuthContext";
import LogoutModal from "./LogoutModal";

interface SidebarProps {
  isOpen: boolean;
  toggleSidebar: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
  const { logout } = useAuth();
  const router = useRouter();
  const [activeLink, setActiveLink] = useState("/dashboard");
  const [showLogoutModal, setShowLogoutModal] = useState(false);
  // Check if user is admin

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

  const handleLinkClick = (path: string) => {
    setActiveLink(path);
    toggleSidebar();
  };

  const navItems =
    [
      { href: "/dashboard", label: "Dashboard", icon: RxDashboard },
      { href: "/savings/dashboard", label: "Savings", icon: PiPiggyBankLight },
        { href: "/investments", label: "Investments", icon: PiCellSignalFullBold },
        { href: "/loan", label: "Loans", icon: PiHandCoinsFill },
        { href: "/referral", label: "Referrals", icon: FiUsers },
      ];

  return (
    <>
      {/* Mobile Toggle Button (fixed at top left) */}
      <button
        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-[#F5F5F5] shadow-md"
        onClick={toggleSidebar}
      >
        {isOpen ? <FiX size={24} /> : <FiMenu size={24} />}
      </button>

      {/* Overlay for mobile */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-40 z-40 lg:hidden"
          onClick={toggleSidebar}
        />
      )}

      {/* Sidebar */}
      <div
        className={`
          fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 
          transform transition-transform duration-300 ease-in-out
          ${isOpen ? "translate-x-0" : "-translate-x-full"}
          lg:translate-x-0 lg:static lg:flex lg:flex-col
        `}
      >
        {/* Logo */}
        <div className="flex items-center justify-center p-4 border-b">
          <Image
            src="/assets/SUBAlogo.png"
            alt="Logo"
            width={100}
            height={50}
          />
        </div>

        {/* Main Navigation */}
        <nav className="flex flex-col p-4 gap-2">
          {navItems.map(({ href, label, icon: Icon }) => (
            <Link
              key={href}
              href={href}
              onClick={() => handleLinkClick(href)}
              className={`group flex gap-2 items-center mb-2 p-2 rounded ${
                activeLink === href
                  ? "bg-[#9E5AE3] text-white"
                  : "text-black hover:bg-[#9E5AE3] hover:text-white"
              }`}
            >
              <Icon
                size={18}
                className={`${
                  activeLink === href
                    ? "text-white"
                    : "text-black group-hover:text-white"
                }`}
              />
              {label}
            </Link>
          ))}
        </nav>

        {/* Other Navigation */}
        <nav className="flex flex-col p-4 mt-auto gap-2">
          <div className="group flex gap-2 items-center hover:bg-[#9E5AE3] p-2 rounded hover:text-white text-black">
            <IoSettingsOutline size={18} className="group-hover:text-white" />
            <Link href="/settings">Settings</Link>
          </div>
        <div
          className="group flex gap-2 items-center hover:bg-[#9E5AE3] p-2 rounded hover:text-white text-red-600 cursor-pointer"
          onClick={() => setShowLogoutModal(true)}
        >
          <BiSupport size={18} className="group-hover:text-white" />
          <span>Logout</span>
        </div>
        </nav>
      </div>

      <LogoutModal
        isOpen={showLogoutModal}
        onCancel={() => setShowLogoutModal(false)}
        onConfirm={handleLogout}
      />
    </>
  );
};

export default Sidebar;