//frontend/src/components/TeacherSidebar/index.js
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Link, useLocation } from "react-router-dom";
import {
  isPathActive,
  roleMainNavClass,
  roleSubNavClass,
  deriveTeacherSubmenu,
} 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 { SiGoogleclassroom } from "react-icons/si";
import { SiQuizlet } from "react-icons/si";
import { TfiAnnouncement } from "react-icons/tfi";
import { RiFileReduceFill } from "react-icons/ri";


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

  useEffect(() => {
    const next = deriveTeacherSubmenu(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="/teacher/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="/teacher/dashboard"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/dashboard"))}
          >
            <MdSpaceDashboard
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Dashboard</span>}
          </Button>
        </li>

        {/* Users with Submenu */}
        <li>
          <Button
            className={roleMainNavClass(
              isCollapsed,
              pathname.startsWith("/teacher/classes/add") ||
                pathname.startsWith("/teacher/classses") ||
                pathname === "/teacher/classes" ||
                (pathname.startsWith("/teacher/classes/") && pathname.includes("/update"))
            )}
            onClick={() => toggleSubmenu(1)}
          >
            <MdClass
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Class</span>}
            {!isCollapsed && (
              <span className="ml-auto">
                <FaAngleDown
                  className={`transition-transform duration-300 ${
                    submenuIndex === 1 ? "rotate-180" : ""
                  }`}
                />
              </span>
            )}
          </Button>

          {/* Submenu with Smooth Collapse */}
          {!isCollapsed && (
            <Collapse
              isOpened={submenuIndex === 1}
              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="/teacher/classes/add"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/classes/add"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/classes/add") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Create Class
                  </Button>
                </li>
                <li>
                  
                  <Button
                    component={Link}
                    to="/teacher/classses/view-all"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/classses/view-all"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/classses/view-all") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    View Classes
                  </Button>
                </li>
              </ul>
            </Collapse>
          )}
        </li>

        {/* Users with Submenu */}
        <li>
          <Button
            className={roleMainNavClass(
              isCollapsed,
              pathname.startsWith("/teacher/upload-studypack") || pathname.startsWith("/teacher/manage-studypacks")
            )}
            onClick={() => toggleSubmenu(2)}
          >
            <SiGoogleclassroom
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Study Pack</span>}
            {!isCollapsed && (
              <span className="ml-auto">
                <FaAngleDown
                  className={`transition-transform duration-300 ${
                    submenuIndex === 2 ? "rotate-180" : ""
                  }`}
                />
              </span>
            )}
          </Button>

          {/* Material with Smooth Collapse */}
          {!isCollapsed && (
            <Collapse
              isOpened={submenuIndex === 2}
              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="/teacher/upload-studypack"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/upload-studypack"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/upload-studypack") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Create Study Pack
                  </Button>
                </li>
                <li>
                  
                  <Button
                    component={Link}
                    to="/teacher/manage-studypacks"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/manage-studypacks"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/manage-studypacks") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Manage Study Pack
                  </Button>
                </li>
              </ul>
            </Collapse>
          )}
        </li>

        {/* Materials */}
        <li>
          <Button
            className={roleMainNavClass(
              isCollapsed,
              pathname.startsWith("/teacher/classes/uploadmaterials") ||
                pathname.startsWith("/teacher/classes/select") ||
                pathname.startsWith("/teacher/extension-requests") ||
                /^\/[^/]+\/materials$/.test(pathname)
            )}
            onClick={() => toggleSubmenu(3)}
          >
            <MdCollectionsBookmark 
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Materials</span>}
            {!isCollapsed && (
              <span className="ml-auto">
                <FaAngleDown
                  className={`transition-transform duration-300 ${
                    submenuIndex === 3 ? "rotate-180" : ""
                  }`}
                />
              </span>
            )}
          </Button>

          {/* Material with Smooth Collapse */}
          {!isCollapsed && (
            <Collapse
              isOpened={submenuIndex === 3}
              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="/teacher/classes/uploadmaterials"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/classes/uploadmaterials"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/classes/uploadmaterials") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Add Materials
                  </Button>
                </li>

                <li>
                  <Button
                    component={Link}
                    to="/teacher/classes/select"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/classes/select"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/classes/select") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Manage Materials
                  </Button>
                </li>


                <li>
                  
                  <Button
                    component={Link}
                    to="/teacher/extension-requests"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/extension-requests"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/extension-requests") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Extension Request
                  </Button>
                </li>
              </ul>
            </Collapse>
          )}
        </li>

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

         {/* Quiz Generator*/}
         <li>
          <Button
            component={Link}
            to="/teacher/quiz-generator"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/quiz-generator"))}
          >
            <SiQuizlet
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>AI Quiz Generator</span>}
          </Button>
        </li>

        {/* Fee Waiver*/}
        <li>
          <Button
            component={Link}
            to="/teacher/fee-waiver-requests"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/fee-waiver-requests"))}
          >
            <RiFileReduceFill
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Fee Waiver Requests</span>}
          </Button>
        </li>

        {/* Institutes */}
        <li>
          <Button
            component={Link}
            to="/teacher/library"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/library"))}
          >
            <IoLibrary 
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Library</span>}
          </Button>
        </li>

        {/* Payment */}
        <li>
          <Button
            component={Link}
            to="/teacher/payment-history"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/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="/teacher/report"
            className={roleMainNavClass(isCollapsed, isPathActive(pathname, "/teacher/report"))}
          >
            <BiSolidReport
              className={`${isCollapsed ? "text-[20px]" : "text-[18px]"} flex-shrink-0`}
            />
            {!isCollapsed && <span>Reports</span>}
          </Button>
        </li>

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




         {/* Support */}
        {/* Users with Submenu */}
        <li>
          <Button
            className={roleMainNavClass(
              isCollapsed,
              pathname.startsWith("/teacher/support-form") ||
                pathname.startsWith("/teacher/support-ticket") ||
                pathname.startsWith("/teacher/support/")
            )}
            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="/teacher/support-form"
                    className={roleSubNavClass(isPathActive(pathname, "/teacher/support-form"))}
                  >
                    <span className={`block w-[5px] h-[5px] rounded-full shrink-0 ${isPathActive(pathname, "/teacher/support-form") ? "bg-amber-500" : "bg-[rgba(0,0,0,0.2)]"}`} />
                    Submit Ticket
                  </Button>
                </li>
                <li>
                  <Button
                    component={Link}
                    to="/teacher/support-ticket"
                    className={roleSubNavClass(
                      pathname.startsWith("/teacher/support-ticket") || pathname.startsWith("/teacher/support/")
                    )}
                  >
                    <span
                      className={`block w-[5px] h-[5px] rounded-full shrink-0 ${
                        pathname.startsWith("/teacher/support-ticket") || pathname.startsWith("/teacher/support/")
                          ? "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;