"use client";

import Link from "next/link";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  RiExpandRightFill,
  RiContractLeftFill,
} from "react-icons/ri";
import { Cuboid, House, ListChecks, Menu, UsersRound } from "lucide-react";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";
import { useMediaQuery } from "react-responsive";

interface LinkItem {
  label: string;
  path: string;
  icon: React.ComponentType<{ className?: string }>;
}

const LINKS: LinkItem[] = [
  {
    label: "Inicio",
    path: "/",
    icon: House,
  },
  {
    label: "Equipo",
    path: "/team",
    icon: UsersRound,
  },
  {
    label: "Mis tareas",
    path: "/tasks",
    icon: ListChecks,
  },
  {
    label: "Inventario",
    path: "/inventory",
    icon: Cuboid,
  },
];

const Sidebar = () => {
  const [open, setOpen] = useState<boolean>(false);
  const pathname = usePathname();
  const isTablet = useMediaQuery({ query: "(max-width: 900px)" });

  if (isTablet) {
    return null;
  }

  return (
    <div>
      <aside
        className={`bg-gray-200/25 transition-all duration-300 ease-in-out h-full sticky inset-0 border-r border-gray-400`}
        style={{ minWidth: open ? "14rem" : "6.5rem" }}
      >
        <header className="px-7 py-10 flex items-end pt-5 absolute right-0 left-0">
          <h2
            className={`text-2xl font-semibold h-7 transition-all ease-in-out ${
              open
                ? "opacity-100 visible delay-300"
                : "absolute opacity-0 invisible left-100"
            }`}
          >
            App
          </h2>
          <button
            onClick={() => setOpen(!open)}
            className="text-white flex w-full justify-center"
          >
            {open ? (
              <RiContractLeftFill className="text-2xl text-black ml-[9rem]" />
            ) : (
              <RiExpandRightFill className="text-2xl text-black" />
            )}
          </button>
        </header>
        <nav className="pt-2 absolute mt-[10rem] px-6 w-full ">
          <ul className="space-y-5">
            {LINKS.map((link) => (
              <li key={link.label}>
                <Link
                  href={link.path}
                  className={cn(
                    "flex gap-2 items-end text-gray-600 px-4 py-2.5 rounded-2xl",
                    link.path === "/"
                      ? pathname === "/" &&
                          "bg-primary-foreground text-primary"
                      : pathname.startsWith(link.path) &&
                      "bg-primary-foreground text-primary"
                    )}
                >
                  <link.icon className="text-2xl text-inherit" />
                  {open && (
                    <span className="text-sm font-inherit">{link.label}</span>
                  )}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
    </div>
  );
};

export function SidebarUserMobile() {
  const [open, setOpen] = useState<boolean>(true);
  const pathname = usePathname();
  const isTablet = useMediaQuery({ query: "(max-width: 900px)" });

  if (!isTablet) {
    return null;
  }

  return (
    <Sheet key={"top"} open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <div>
          <Menu size="30" />
        </div>
      </SheetTrigger>
      <SheetContent side={"left"}>
        <SheetHeader>Menu</SheetHeader>
        <nav className="pt-2 mt-24 px-6 w-full">
          <ul className="space-y-5">
            {LINKS.map((link) => (
              <li key={link.label}>
                <Link
                  href={link.path}
                  onClick={() => setOpen(!open)}
                  className={cn(
                    "flex gap-2 text-gray-600 px-4 py-2.5 rounded-2xl",
                    link.path === "/"
                    ? pathname === "/" && "font-semibold text-white bg-primary"
                    : pathname.startsWith(link.path) &&
                      "font-semibold text-white bg-primary"
                  )}
                >
                  <link.icon className="text-2xl text-inherit" />
                  <span className="text-sm font-inherit">{link.label}</span>
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </SheetContent>
    </Sheet>
  );
}

export default Sidebar;