"use client";

import { userNavLinks } from "@/lib/constrants";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
async function getUserByUuid(params: string) {
  const res = await fetch(`http://localhost:3000/api/user/${params}`, {
    method: "GET",
  });
  return res.json();
}
type Profile = {
  full_name: string;
  mobile_number: string;
  picture: {
    file_url: string;
  };
};

type User = {
  email: string;
  profile: Profile;
};

const UserSideBar = () => {
  const { data: session } = useSession();
  const pathname = usePathname();
  const [user, setUser] = useState<User>();
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    async function data() {
      if (session) {
        const { User, UserAddresses } = await getUserByUuid(session?.user.uuid);
        setUser(User);
      }
    }
    data();
  }, [session]);

  return (
    <>
      {/* Desktop Sidebar - Visible on medium screens and up */}
      <div className="hidden md:block fixed left-0 top-0 h-full w-64 bg-white shadow-lg z-40">
        <div className="flex flex-col p-4">
          <nav className="mt-4">
            <ul className="space-y-2">
              {session && (
                <div>
                  {userNavLinks.map((link, i) => (
                    <li
                      key={link.key}
                      className={`pl-4 pr-3 py-2 mt-4 rounded-lg hover:bg-blue-300/30 ${
                        pathname.includes(link.key) ? "bg-blue-300/30" : ""
                      }`}
                    >
                      <Link
                        href={link.url}
                        className={`flex items-center text-black hover:text-secondary ${
                          pathname.includes(link.key) ? "text-secondary" : ""
                        }`}
                      >
                        {link.icon}{" "}
                        <span className="text-base font-medium ml-4 text-gray-800">
                          {link.title}
                        </span>
                      </Link>
                    </li>
                  ))}
                </div>
              )}
            </ul>
          </nav>
        </div>
      </div>
      {/* Mobile Hamburger Menu - Visible only on small screens */}
      <div className="md:hidden">
        {/* Hamburger Button */}
        {/* <button
          onClick={() => setIsOpen(!isOpen)}
          className="p-2 text-gray-600 hover:text-gray-900 focus:outline-none"
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button> */}
        <button
          data-drawer-target="drawer-navigation"
          data-drawer-toggle="drawer-navigation"
          aria-controls="drawer-navigation"
          onClick={() => setIsOpen(!isOpen)}
          className="p-2 mr-2 text-gray-600 rounded-lg cursor-pointer md:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        >
          <svg
            aria-hidden="true"
            className="w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <svg
            aria-hidden="true"
            className="hidden w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <span className="sr-only">Toggle sidebar</span>
        </button>
        {/* Overlay and Menu */}
        <div
          className={`fixed inset-0 z-50 transition-opacity duration-300 ${
            isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
          }`}
        >
          {/* Overlay */}
          <div
            className="absolute inset-0 bg-black bg-opacity-50"
            onClick={() => setIsOpen(false)}
          ></div>

          {/* Menu */}
          <div
            className={`absolute left-0 top-0 h-full w-64 bg-white shadow-lg transform transition-transform duration-300 ${
              isOpen ? "translate-x-0" : "-translate-x-full"
            }`}
          >
            <div className="flex flex-col p-4">
              {/* Close Button */}
              <button
                onClick={() => setIsOpen(false)}
                className="self-end p-2 text-gray-600 hover:text-gray-900"
              >
                <svg
                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>

              {/* Menu Items */}
              <aside
                className="fixed mt-14 left-0 z-40 w-64  pt-14 transition-transform -translate-x-full bg-red-500 border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
                aria-label="Sidenav"
                id="drawer-navigation"
              >
                <div className="overflow-y-auto py-5 px-3 h-full bg-white dark:bg-gray-800">
                  {session && (
                    <ul className="space-y-2">
                      {userNavLinks.map((link, i) => (
                        <li
                          key={link.key}
                          className={`pl-4 pr-3 py-2 mt-4 rounded-lg hover:bg-blue-300/30 ${
                            pathname.includes(link.key) ? "bg-blue-300/30" : ""
                          }`}
                        >
                          <Link
                            href={link.url}
                            className={`flex items-center text-black hover:text-secondary ${
                              pathname.includes(link.key)
                                ? "text-secondary"
                                : ""
                            }`}
                          >
                            {link.icon}{" "}
                            <span className="text-base font-medium ml-3 text-gray-800">
                              {link.title}
                            </span>
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                  {/* <ul className="space-y-2">
                    <li>
                      <a
                        href="#"
                        className="flex items-center p-2 text-base font-medium text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
                      >
                        <svg
                          aria-hidden="true"
                          className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                          fill="currentColor"
                          viewBox="0 0 20 20"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
                          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
                        </svg>
                        <span className="ml-3">Overview</span>
                      </a>
                    </li>
                  </ul> */}
                </div>
              </aside>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default UserSideBar;