import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  MdGridView,
  MdDescription,
  MdAdd,
  MdLogout,
  MdOutlineKeyboardArrowLeft,
  MdOutlineKeyboardArrowRight,
  MdReportProblem,
  MdSwapVert,
} from "react-icons/md";
import {
  FiPackage,
  FiBox,
  FiGrid,
  FiLogOut,
  FiPlusSquare,
  FiTruck,
} from "react-icons/fi";
import { useAuth } from "@/contexts/AuthContext";

interface SidebarProps {
  onLogout: () => void;
  isCollapsed: boolean;
  onToggle: () => void;
}

export default function Sidebar({
  onLogout,
  isCollapsed,
  onToggle,
}: SidebarProps) {
  const pathname = usePathname();
  const { isAdmin, isSupplier } = useAuth();

  const isActive = (path: string) => {
    if (path === "/dashboard" && pathname === "/dashboard") {
      return true;
    }
    if (path !== "/dashboard" && pathname?.startsWith(path)) {
      return true;
    }
    return false;
  };

  const activeStyle = {
    background: "linear-gradient(to right, #3792DE, #4EC7F2)",
    color: "#ECF6FF",
  };

  return (
    <div
      className={`${
        isCollapsed ? "w-16" : "w-64"
      } h-screen border-r border-[#E6EAED] flex flex-col transition-all duration-300 ease-in-out`}
      style={{
        background: "linear-gradient(270deg, #FFFFFF 0%, #DFF9FF 50%)",
      }}
    >
      {/* Logo and Toggle Button */}
      <div className="p-4 border-b border-[#E6EAED] flex justify-between items-center h-[65px]">
        {/* Logo */}
        <div className="flex items-center">
          {!isCollapsed && (
            <img
              src="/sa-logo.png"
              alt="Spring Aqua Logo"
              className="w-[110px] h-auto"
            />
          )}
        </div>

        {/* Toggle Button */}
        <button
          onClick={onToggle}
          className="text-gray-500 hover:text-gray-700 p-1 rounded-lg hover:bg-gray-100 transition-colors"
          title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
        >
          {isCollapsed ? (
            <MdOutlineKeyboardArrowRight size={20} />
          ) : (
            <MdOutlineKeyboardArrowLeft size={20} />
          )}
        </button>
      </div>

      {/* Navigation */}
      <div
        className={`flex-1 overflow-y-auto ${
          isCollapsed ? "px-2" : "px-6"
        } py-6 hide-scrollbar`}
      >
        {/* Main */}
        {!isCollapsed && (
          <h6 className="text-xs font-bold text-[#092C4C] mb-4">Main</h6>
        )}
        <ul
          className={`space-y-1 mb-6 ${
            !isCollapsed ? "border-b border-[#E6EAED]" : ""
          } pb-6`}
        >
          <li>
            <Link
              href="/dashboard"
              className={`flex items-center p-2 text-sm rounded-lg ${
                isCollapsed ? "justify-center" : ""
              } ${
                isActive("/dashboard")
                  ? "" // Active style applied via style prop
                  : "text-[#212B36] hover:bg-[#cdf0fa]"
              }`}
              style={isActive("/dashboard") ? activeStyle : {}}
              title={isCollapsed ? "Dashboard" : ""}
            >
              <FiGrid size={20} className={isCollapsed ? "" : "mr-3"} />
              {!isCollapsed && <span className="font-medium">Dashboard</span>}
            </Link>
          </li>
        </ul>

        {/* Admin-only sections */}
        {isAdmin() && (
          <>
            {/* Purchase Order */}
            {!isCollapsed && (
              <h6 className="text-xs font-bold text-[#092C4C] mb-4">
                Purchase Order
              </h6>
            )}
            <ul
              className={`space-y-1 mb-6 ${
                !isCollapsed ? "border-b border-[#E6EAED]" : ""
              } pb-6`}
            >
              <li>
                <Link
                  href="/purchase-orders"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/purchase-orders") &&
                    !pathname?.includes("/create")
                      ? "" // Active style applied via style prop
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/purchase-orders") &&
                    !pathname?.includes("/create")
                      ? activeStyle
                      : {}
                  }
                  title={isCollapsed ? "Manage Purchases" : ""}
                >
                  <FiPackage size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && (
                    <span className="font-medium">Manage Purchases</span>
                  )}
                </Link>
              </li>
              <li>
                <Link
                  href="/purchase-orders/create"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    pathname?.includes("/purchase-orders/create")
                      ? "" // Active style applied via style prop
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    pathname?.includes("/purchase-orders/create")
                      ? activeStyle
                      : {}
                  }
                  title={isCollapsed ? "Create Purchase" : ""}
                >
                  <FiPlusSquare
                    size={20}
                    className={isCollapsed ? "" : "mr-3"}
                  />
                  {!isCollapsed && (
                    <span className="font-medium">Create Purchase</span>
                  )}
                </Link>
              </li>
            </ul>

            {/* Warehouse */}
            {!isCollapsed && (
              <h6 className="text-xs font-bold text-[#092C4C] mb-4">
                Warehouse
              </h6>
            )}
            <ul
              className={`space-y-1 mb-6 ${
                !isCollapsed ? "border-b border-[#E6EAED]" : ""
              } pb-6`}
            >
              <li>
                <Link
                  href="/warehouses/shipments"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/warehouses/shipments")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={isActive("/warehouses/shipments") ? activeStyle : {}}
                  title={isCollapsed ? "Manage Shipments" : ""}
                >
                  <FiTruck size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && (
                    <span className="font-medium">Manage Shipments</span>
                  )}
                </Link>
              </li>
              <li>
                <Link
                  href="/warehouses/stocks"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/warehouses/stocks")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={isActive("/warehouses/stocks") ? activeStyle : {}}
                  title={isCollapsed ? "Stocks" : ""}
                >
                  <FiBox size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && <span className="font-medium">Stocks</span>}
                </Link>
              </li>
              <li>
                <Link
                  href="/warehouses/stock-adjustments"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/warehouses/stock-adjustments")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/warehouses/stock-adjustments") ? activeStyle : {}
                  }
                  title={isCollapsed ? "Stock Adjustments" : ""}
                >
                  <MdSwapVert size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && (
                    <span className="font-medium">Stock Adjustments</span>
                  )}
                </Link>
              </li>
            </ul>
          </>
        )}

        {/* Supplier-only sections */}
        {isSupplier() && (
          <>
            {/* Manufacturer */}
            {!isCollapsed && (
              <h6 className="text-xs font-bold text-[#092C4C] mb-4">
                Manufacturer
              </h6>
            )}
            <ul
              className={`space-y-1 mb-6 ${
                !isCollapsed ? "border-b border-[#E6EAED]" : ""
              } pb-6`}
            >
              <li>
                <Link
                  href="/manufacturer/manage-orders"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/manufacturer/manage-orders")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/manufacturer/manage-orders") ? activeStyle : {}
                  }
                  title={isCollapsed ? "Manage Orders" : ""}
                >
                  <FiPackage size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && (
                    <span className="font-medium">Manage Orders</span>
                  )}
                </Link>
              </li>
              <li>
                <Link
                  href="/manufacturer/shipments"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/manufacturer/shipments") &&
                    !pathname?.includes("/create")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/manufacturer/shipments") &&
                    !pathname?.includes("/create")
                      ? activeStyle
                      : {}
                  }
                  title={isCollapsed ? "Manage Shipments" : ""}
                >
                  <FiPackage size={20} className={isCollapsed ? "" : "mr-3"} />
                  {!isCollapsed && (
                    <span className="font-medium">Manage Shipments</span>
                  )}
                </Link>
              </li>
            </ul>
          </>
        )}

        {/* Discrepancies — unified URLs for both roles */}
        {(isAdmin() || isSupplier()) && (
          <>
            {!isCollapsed && (
              <h6 className="text-xs font-bold text-[#092C4C] mb-4">
                Discrepancies
              </h6>
            )}
            <ul
              className={`space-y-1 mb-6 ${
                !isCollapsed ? "border-b border-[#E6EAED]" : ""
              } pb-6`}
            >
              <li>
                <Link
                  href="/discrepancies/pallets"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/discrepancies/pallets")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/discrepancies/pallets") ? activeStyle : {}
                  }
                  title={isCollapsed ? "Pallet Discrepancies" : ""}
                >
                  <MdReportProblem
                    size={20}
                    className={isCollapsed ? "" : "mr-3"}
                  />
                  {!isCollapsed && (
                    <span className="font-medium">Pallet Discrepancies</span>
                  )}
                </Link>
              </li>
              <li>
                <Link
                  href="/discrepancies/items"
                  className={`flex items-center p-2 text-sm rounded-lg ${
                    isCollapsed ? "justify-center" : ""
                  } ${
                    isActive("/discrepancies/items")
                      ? ""
                      : "text-[#212B36] hover:bg-[#cdf0fa]"
                  }`}
                  style={
                    isActive("/discrepancies/items") ? activeStyle : {}
                  }
                  title={isCollapsed ? "Item Discrepancies" : ""}
                >
                  <MdReportProblem
                    size={20}
                    className={isCollapsed ? "" : "mr-3"}
                  />
                  {!isCollapsed && (
                    <span className="font-medium">Item Discrepancies</span>
                  )}
                </Link>
              </li>
            </ul>
          </>
        )}

      </div>

      {/* Logout option at the bottom */}
      <div
        className={`${
          isCollapsed ? "px-2" : "px-6"
        } py-4 border-t border-[#E6EAED]`}
      >
        <button
          onClick={onLogout}
          className={`flex items-center w-full p-2 text-sm text-[#FF494C] rounded-lg hover:bg-[#FF494C]/10 ${
            isCollapsed ? "justify-center" : ""
          }`}
          title={isCollapsed ? "Logout" : ""}
        >
          <FiLogOut
            size={20}
            className={isCollapsed ? "" : "mr-3"}
            color="#FF494C"
          />
          {!isCollapsed && <span className="font-medium">Logout</span>}
        </button>
      </div>
    </div>
  );
}