import { Link, useLocation } from "react-router";
import {
  LayoutDashboard,
  Users,
  User,
  Settings,
  LogOut,
  Menu,
  X,
} from "lucide-react";

type SidebarProps = {
  isOpen: boolean;
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const Sidebar = ({
  isOpen,
  setIsOpen,
}: SidebarProps) => {
  const location = useLocation();

  const menuClass = (path: string) =>
    `flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${
      location.pathname === path
        ? "bg-[#008b8b] text-white"
        : "text-gray-700 hover:bg-gray-100"
    }`;

  return (
    <>
      {!isOpen && (
        <button
          onClick={() => setIsOpen(true)}
          className="fixed top-5 left-5 z-50 bg-white shadow-lg p-2 rounded-xl"
        >
          <Menu className="w-6 h-6 text-[#008b8b]" />
        </button>
      )}

      <aside
        className={`
          fixed top-0 left-0 h-screen w-72 bg-white
          border-r border-gray-200 shadow-2xl
          p-6 flex flex-col z-50
          transition-all duration-300
          ${isOpen ? "translate-x-0" : "-translate-x-full"}
        `}
      >
        {/* HEADER */}
        <div className="flex items-center justify-between mb-10">
          <h1 className="text-2xl font-bold text-[#008b8b]">
            CoachPro
          </h1>

          <button
            onClick={() => setIsOpen(false)}
            className="p-2 rounded-lg hover:bg-gray-100"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* MENU */}
        <nav className="flex-1 space-y-3">
          <Link
            to="/dashboard"
            className={menuClass("/dashboard")}
          >
            <LayoutDashboard size={20} />
            <span>Dashboard</span>
          </Link>

          <Link
            to="/user"
            className={menuClass("/user")}
          >
            <Users size={20} />
            <span>Users</span>
          </Link>

          <Link
            to="/profile"
            className={menuClass("/profile")}
          >
            <User size={20} />
            <span>Profile</span>
          </Link>
        </nav>

        {/* BOTTOM */}
        <div className="border-t pt-5 space-y-3">
          <Link
            to="/settings"
            className={menuClass("/settings")}
          >
            <Settings size={20} />
            <span>Settings</span>
          </Link>

          <button
            className="
              w-full flex items-center gap-3
              px-4 py-3 rounded-xl
              text-gray-700 hover:bg-gray-100
            "
          >
            <LogOut size={20} />
            <span>Logout</span>
          </button>
        </div>
      </aside>

      {isOpen && (
        <div
          onClick={() => setIsOpen(false)}
          className="fixed inset-0 bg-black/20 z-40"
        />
      )}
    </>
  );
};

export default Sidebar;