import type { ReactNode } from "react";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import Link, { type LinkProps } from "next/link";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "~/components/ui/sheet";
import { AlignLeft, Home } from "lucide-react";
import { useRouter } from "next/navigation";
import { useSession } from "~/providers/SessionProvider";
import { IconMatrix } from "~/components/IconComponents";
import { useTranslation } from "~/providers/I18nProvider";
import { Separator } from "~/components/ui/separator";
import { UserHeaderSection } from "~/components/navbar/login-button";
import { ASvg, LogoSvg } from "~/components/svgs";
import { useMediaQuery } from "~/hooks/use-media-query";
import { LangToggle } from "~/components/navbar/lang-toggle";

type MobileNavProps = {
  pathname: string;
  open: boolean;
  setOpen: (status: boolean) => void;
  userOpen: boolean;
  setUserOpen: (status: boolean) => void;
};

export function MobileNav({
  pathname,
  open,
  setOpen,
  userOpen,
  setUserOpen,
}: MobileNavProps) {
  const session = useSession();
  const { t } = useTranslation();
  const verySmallScreen = useMediaQuery("(max-width: 320px)");
  return (
    <>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
          <Button
            aria-label="Toggle Mobile Menu"
            variant="ghost"
            className="mr-2 size-8 p-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden [&_svg]:size-6"
          >
            <AlignLeft />

            <span className="sr-only">Toggle Menu</span>
          </Button>
        </SheetTrigger>
        <SheetContent side="left" className="z-500 p-0">
          <SheetHeader>
            <SheetTitle className="sr-only">Mobile Menu</SheetTitle>
            <SheetDescription className="sr-only">
              This is the mobile menu
            </SheetDescription>
          </SheetHeader>
          <div className="flex h-full flex-col space-y-2 overflow-y-auto px-3 pb-4">
            <MobileLink
              href="/"
              aria-label="mainNavLinkHome"
              className="ml-2 flex items-center gap-3"
              onOpenChange={setOpen}
            >
              <Home className="size-6" />{" "}
              <span className="text-xl font-medium">Home</span>
            </MobileLink>

            <div className="flex h-full flex-col space-y-2 pt-4">
              {pathname.startsWith("/area-riservata") && (
                <>
                  {session && session.user && (
                    <AreaRiservataLinks
                      isAdmin={session.user.isAdmin}
                      pathname={pathname}
                      setOpen={setOpen}
                    />
                  )}
                  <Separator />
                </>
              )}

              <div className="text-primary flex h-full grow flex-col gap-3">
                {t.nav.mainNav.map((item) => (
                  <MobileLink
                    key={item.href}
                    href={item.href}
                    onOpenChange={setOpen}
                    className={cn(
                      "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                      item.href === pathname && "bg-muted",
                    )}
                  >
                    <IconMatrix
                      key={item.title}
                      type={item.icon}
                      className="size-5"
                    />{" "}
                    {item.title}
                  </MobileLink>
                ))}
                <Separator />
              </div>

              <div className="flex h-fit flex-col gap-4 pb-2">
                <UserHeaderSection
                  open={userOpen}
                  setOpen={setUserOpen}
                  setSidebar={setOpen}
                  inSidebar
                />

                <div className="flex items-center justify-center gap-6">
                  <LangToggle />
                  {/* <ThemeSwitch /> */}
                </div>
              </div>
            </div>
          </div>
        </SheetContent>
      </Sheet>
      <Link
        href="/"
        className="ml-3 flex shrink-0 items-center md:hidden"
        aria-label="mainNavLink"
      >
        {verySmallScreen ? (
          <ASvg className="h-8 w-auto" />
        ) : (
          <LogoSvg className="xs:h-8 [&>text]:fill-primary [&>text]:stroke-primary h-6 w-auto text-neutral-700 sm:h-10 [&>g]:fill-red-500 dark:[&>g]:fill-neutral-100 dark:[&>text]:fill-neutral-100 dark:[&>text]:stroke-neutral-100" />
        )}
      </Link>
    </>
  );
}

interface MobileLinkProps extends LinkProps {
  onOpenChange?: (open: boolean) => void;
  children: ReactNode;
  className?: string;
  disabled?: boolean;
}

function MobileLink({
  href,
  onOpenChange,
  className,
  children,
  disabled,
  ...props
}: MobileLinkProps) {
  const router = useRouter();
  return (
    <Link
      aria-label="mobileLink"
      href={href}
      onClick={(e) => {
        if (disabled) {
          e.preventDefault();
          e.stopPropagation();
          onOpenChange?.(false);
        } else {
          router.push(
            // eslint-disable-next-line @typescript-eslint/no-base-to-string
            href.toString(),
          );
          onOpenChange?.(false);
        }
      }}
      className={cn(className)}
      {...props}
    >
      {children}
    </Link>
  );
}

type AreaRiservataLinksProps = {
  isAdmin: boolean;
  setOpen?: (status: boolean) => void;
  pathname: string;
};
const AreaRiservataLinks = ({
  isAdmin,
  setOpen,
  pathname,
}: AreaRiservataLinksProps) => {
  const { t } = useTranslation();
  return (
    <div className="text-primary flex flex-col space-y-4 text-base">
      {isAdmin
        ? t.nav.areaRiservataAdminNav.map((item) => {
            if (item.items !== undefined) {
              return (
                <div key={item.title}>
                  <div
                    className={cn(
                      "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                      item.href === pathname && "bg-muted",
                    )}
                  >
                    <IconMatrix type={item.icon} className="size-5" />

                    {item.title}
                  </div>
                  <div>
                    <ul>
                      {item.items.map((item) => {
                        return (
                          <MobileLink
                            key={item.title}
                            href={item.href}
                            onOpenChange={setOpen}
                            className={cn(
                              `hover:text-accent-foreground mx-4 block w-full border-l px-6 py-2 duration-150 hover:border-neutral-800`,
                              item.href === pathname &&
                                "border-neutral-900 text-neutral-900",
                            )}
                          >
                            {item.title}
                          </MobileLink>
                        );
                      })}
                    </ul>
                  </div>
                </div>
              );
            }
            return (
              <MobileLink
                key={item.title}
                href={item.href}
                onOpenChange={setOpen}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                  item.href === pathname && "bg-muted",
                )}
              >
                <IconMatrix type={item.icon} className="size-5" />
                {item.title}
              </MobileLink>
            );
          })
        : t.nav.areaRiservataUserNav.map((item) => (
            <MobileLink
              key={item.title}
              href={item.href}
              onOpenChange={setOpen}
              className={cn(
                "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                item.href === pathname && "bg-muted",
              )}
            >
              <IconMatrix type={item.icon} className="size-5" />
              {item.title}
            </MobileLink>
          ))}
    </div>
  );
};

export const ARMinimizableLinks = ({
  isAdmin,
  setOpen,
  pathname,
  minimized,
}: {
  isAdmin: boolean;
  setOpen?: (status: boolean) => void;
  pathname: string;
  minimized: boolean;
}) => {
  const { t } = useTranslation();
  return (
    <div
      className={cn(
        "text-primary flex w-full flex-col space-y-4 text-base",
        minimized && "justify-center",
      )}
    >
      {isAdmin
        ? t.nav.areaRiservataAdminNav.map((item) => {
            if (item.items !== undefined) {
              return (
                <div key={item.title}>
                  <div
                    className={cn(
                      "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                      item.href === pathname && "bg-muted",
                      minimized && "justify-center",
                    )}
                  >
                    <IconMatrix type={item.icon} className="size-5" />

                    {!minimized && item.title}
                  </div>
                  <div>
                    <ul className="truncate">
                      {item.items.map((item) => {
                        return (
                          <MobileLink
                            key={item.title}
                            href={item.href}
                            onOpenChange={setOpen}
                            className={cn(
                              `hover:text-accent-foreground mx-4 block w-full border-l px-6 py-2 duration-150 hover:border-neutral-800`,
                              item.href === pathname &&
                                "border-neutral-900 text-neutral-900",
                              minimized && "hidden",
                            )}
                            disabled={minimized}
                          >
                            {item.title}
                          </MobileLink>
                        );
                      })}
                    </ul>
                  </div>
                </div>
              );
            }
            return (
              <MobileLink
                key={item.title}
                href={item.href}
                onOpenChange={setOpen}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                  item.href === pathname && "bg-muted",
                  minimized && "justify-center",
                )}
                disabled={minimized}
              >
                <IconMatrix type={item.icon} className="size-5" />
                {!minimized && item.title}
              </MobileLink>
            );
          })
        : t.nav.areaRiservataUserNav.map((item) => (
            <MobileLink
              key={item.title}
              href={item.href}
              onOpenChange={setOpen}
              className={cn(
                "flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
                item.href === pathname && "bg-muted",
                minimized && "justify-center",
              )}
              disabled={minimized}
            >
              <IconMatrix type={item.icon} className="size-5" />
              {!minimized && item.title}
            </MobileLink>
          ))}
    </div>
  );
};
