//frontend/src/components/InstituteSidebar/index.jsx
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Link, useLocation } from "react-router-dom";
import {
  isPathActive,
  roleMainNavClass,
  roleSubNavClass,
  deriveInstituteSubmenu,
} from "../../utils/sidebarNavActive";
import { Button } from "@mui/material";
import { MdSpaceDashboard } from "react-icons/md";
import { FaAngleDown } from "react-icons/fa6";
import { Collapse } from "react-collapse";
import { MdClass } from "react-icons/md";
import { MdCollectionsBookmark } from "react-icons/md";
import { TbMessageFilled } from "react-icons/tb";
import { IoLibrary } from "react-icons/io5";
import { MdPayments } from "react-icons/md";
import { BiSolidReport } from "react-icons/bi";
import { BiSupport } from "react-icons/bi";
import { SiQuizlet } from "react-icons/si";
import { TfiAnnouncement } from "react-icons/tfi";
import { FaChalkboardTeacher } from "react-icons/fa";

const AdminSidebar = ({ isCollapsed}) => {
  const { pathname } = useLocation();
  const [submenuIndex, setSubmenuIndex] = useState(null);

  useEffect(() => {
    const next = deriveInstituteSubmenu(pathname);
    if (next != null) setSubmenuIndex(next);
  }, [pathname]);

  const toggleSubmenu = (index) => {
    if (isCollapsed) return; // Prevent submenu toggle when sidebar is collapsed
    setSubmenuIndex(submenuIndex === index ? null : index);
  };

  return (
    <div
      className={`sidebar fixed top-0 left-0 bg-[#fff] h-full border-r border-[rgba(0,0,0,0.1)] transition-all duration-300 z-50 ${
        isCollapsed ? "w-[60px]" : "w-[18%] md:w-[250px]"
      }`}
    >
      {/* Logo Section - Hidden when collapsed */}
      {!isCollapsed && (
        <div className="py-2 w-full flex justify-center">
          <Link to="/institute/dashboard">
            <img
              src="../../src/assets/educonnetlogo.png"
              alt="Logo"
              className="w-[120px] transition-all duration-300"
            />
          </Link>
        </div>
      )}

      {/* Menu Items */}
      <ul className="space-y-1">
        {/* Dashboard */}
        <li>
          <Button
            component={Link}
            to="/institute/dashboard"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/institute/dashboard"))}
          >
            <MdSpaceDashboard
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Dashboard</span>}
          </Button>
        </li>

        {/* Add Teacher */}
        <li>
          <Button
            component={Link}
            to="/institute/add-teacher"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/institute/add-teacher", { prefix: true }))}
          >
            <FaChalkboardTeacher 
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Add Teachers</span>}
          </Button>
        </li>
        
        

        {/* Payment */}
        <li>
          <Button
            component={Link}
            to="/institute/payment-history"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/institute/payment-history"))}
          >
            <MdPayments 
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Payment History</span>}
          </Button>
        </li>


        {/* Reports*/}
        <li>
          <Button
            component={Link}
            to="/logout"
            className={`${
              isCollapsed
                ? "!w-[40px] !h-[40px] !min-w-[40px] !p-0 !flex !justify-center"
                : "w-full !justify-start !px-3"
            } !capitalize flex gap-3 !text-[16px] !text-[rgba(0,0,0,0.8)] font-[500] items-center !py-2 hover:!bg-[#fafafa]`}
          >
            <BiSolidReport
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Reports</span>}
          </Button>
        </li>

        {/* Notices*/}
        <li>
          <Button
            component={Link}
            to="/institute/notices"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/institute/notices"))}
          >
            <TfiAnnouncement
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>View Notices</span>}
          </Button>
        </li>

        
         {/* Support */}
        {/* Users with Submenu */}
        <li>
          <Button
            className={roleMainNavClass(
              isCollapsed,
              pathname.startsWith("/institute/support-form") || pathname.startsWith("/institute/support-ticket")
            )}
            onClick={() => toggleSubmenu(5)}
          >
            <BiSupport
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Support</span>}
            {!isCollapsed && (
              <span className="ml-auto">
                <FaAngleDown
                  className={`transition-transform duration-300 ${
                    submenuIndex === 5 ? "rotate-180" : ""
                  }`}
                />
              </span>
            )}
          </Button>

          {/* Submenu with Smooth Collapse */}
          {!isCollapsed && (
            <Collapse
              isOpened={submenuIndex === 5}
              theme={{
                collapse: "ReactCollapse--collapse transition-all duration-300 ease-in-out",
              }}
            >
              <ul className="w-full space-y-1 mt-1">
                <li>
                  <Button
                    component={Link}
                    to="/institute/support-form"
                    className={roleSubNavClass(isPathActive(pathname, "/institute/support-form"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/institute/support-form") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Submit Ticket
                  </Button>
                </li>
                <li>
                  <Button
                    component={Link}
                    to="/institute/support-ticket"
                    className={roleSubNavClass(pathname.startsWith("/institute/support-ticket"))}
                  >
                    <span
                      className={`block w-[5px] h-[5px] rounded-full shrink-0 ${
                        pathname.startsWith("/institute/support-ticket") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"
                      }`}
                    />
                    View Support Tickets
                  </Button>
                </li>
              </ul>
            </Collapse>
          )}
        </li>
       

        


      








        
      </ul>
    </div>
  );
};

// PropTypes Validation
AdminSidebar.propTypes = {
  isCollapsed: PropTypes.bool.isRequired,
  toggleSidebar: PropTypes.func.isRequired,
};

export default AdminSidebar;