import { twMerge } from "tailwind-merge";
import {
  HelpCircleIcon,
  SendIcon,
  ChevronRightIcon,
  ConstructionIcon,
  PlusIcon,
  MinusIcon,
  ReceiptTextIcon,
  Grid2X2Icon,
  NotebookPenIcon,
  MessageCircleIcon,
  SquareKanban,
  Kanban,
} from "lucide-react";
import { Link as RouterLink, useLocation } from "react-router-dom";
import { Separator } from "react-aria-components";
import { Link } from "@ui/ui-library/link";
import { Icon } from "@ui/ui-library/icon";
import { Avatar, AvatarBadge } from "@ui/ui-library/avatar";
import { Dialog } from "@ui/ui-library/dialog";
import { Button } from "@ui/ui-library/button";
import {
  DisclosurePanel,
  DisclosureControl,
  Disclosure,
} from "@ui/ui-library/disclosure";
import { LinkProps } from "react-aria-components";
import { Popover } from "@ui/ui-library/popover";
import { AvailableIcon } from "@ui/ui-library/icons";
import { useState, useRef } from "react";
import logo from "../assets/icon.jpg";
import { ThemeSwitcher } from "./ThemeSwitcher";
import { Text } from "@ui/ui-library/text";
import { SignOutButton } from "./SignOutButton";
import { useUser } from "@ui/providers/UserStoreProvider";

type NavLinkItem = {
  isActive?: boolean;
} & LinkProps;

type NavLinkProps = NavLinkItem | { title: string; items: NavLinkItem[] };

function NavLink(props: NavLinkProps) {
  if ("items" in props) {
    return (
      <Disclosure defaultExpanded>
        <DisclosureControl className="group/control [&:not(:hover)]:text-white/50 mt-3 w-full ps-2.5 text-xs  /6 font-semibold">
          {props.title}{" "}
          <ChevronRightIcon className="ms-auto hidden size-4 transition-all group-hover/control:flex group-aria-expanded:rotate-90" />
        </DisclosureControl>
        <DisclosurePanel>
          <ul className="grid gap-y-1">
            {props.items.map((item) => (
              <li key={item.href}>
                <NavLink {...item} />
              </li>
            ))}
          </ul>
        </DisclosurePanel>
      </Disclosure>
    );
  }

  const { isActive, ...rest } = props;
  return (
    <Link
      {...rest}
      className={twMerge(
        "group w-full gap-x-3 overflow-hidden px-2.5 py-1.5 text-nowrap hover:bg-navbar-darker hover:no-underline focus-visible:outline-offset-0 [&>[data-ui=icon]:not([class*=size-])]:size-4.5",
        "[&>[data-ui=notification-badge]]:bg-navbar-darker",
        "[&>[data-ui=notification-badge]]:rounded-md",
        "[&>[data-ui=notification-badge]]:top-1/2",
        "[&>[data-ui=notification-badge]]:right-1",
        "[&>[data-ui=notification-badge]]:-translate-y-1/2",
        "[&>[data-ui=notification-badge]]:bg-navbar-darker",
        "[&>[data-ui=notification-badge]]:p-3",
        "[&>[data-ui=nxotification-badge]]:text-xs/6",
        "[&>[data-ui=notification-badge]]:font-semibold",
        isActive
          ? "bg-navbar-darker font-semibold text-white [&>[data-ui=notification-badge]]:bg-transparent"
          : [
              "font-medium",
              "text-gray-300/90 [&:not(:hover)>[data-ui=icon]]:bg-navbar-darker",
            ]
      )}
    >
      {props.children}
    </Link>
  );
}

export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
  const user = useUser();
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const ref = useRef(null);

  return (
    <>
      <Button
        aria-label="User menu"
        variant="plain"
        onPress={() => setIsPopoverOpen(!isPopoverOpen)}
        ref={ref}
        isIconOnly={isCollapsed}
        className={twMerge(
          "flex items-center justify-start hover:bg-navbar-darker w-full"
        )}
      >
        <Avatar
          className="rounded-full size-7"
          src={user.avatar_url ?? undefined}
          alt="Avatar"
        />
        <Text
          className={twMerge(
            "text-gray-300/90 transition-all duration-300",
            isCollapsed ? "opacity-0 w-0" : "opacity-100"
          )}
        >
          {user.name}
        </Text>
      </Button>
      <Popover
        className="min-w-56 rounded-xl bg-navbar-darker"
        isOpen={isPopoverOpen}
        onOpenChange={setIsPopoverOpen}
        triggerRef={ref}
      >
        <Dialog aria-label="Settings">
          <div className="flex flex-col gap-2 p-3">
            <div className="flex gap-4">
              <Avatar
                src={user.avatar_url ?? undefined}
                alt={user.name ?? "User avatar"}
              >
                <AvatarBadge badge={<AvailableIcon aria-label="Available" />} />
              </Avatar>
              <div className="flex flex-col">
                <Text className="font-bold text-gray-300/90">{user.name}</Text>
                <SignOutButton />
              </div>
            </div>

            <Separator className="border-gray-300/70" />

            <ThemeSwitcher />
          </div>
        </Dialog>
      </Popover>
    </>
  );
}

export const SideNavigation = ({
  isMobileMenuOpen,
}: {
  isMobileMenuOpen: boolean;
}) => {
  const isCollapsable = !isMobileMenuOpen;
  const [isCollapsed, setIsCollapsed] = useState(isCollapsable ? false : true);

  return (
    <nav
      aria-label="Main navigation"
      className={twMerge(
        "group isolate flex flex-col overflow-y-auto overflow-x-hidden bg-navbar-background transition-all duration-300",
        "fixed md:relative h-[calc(100vh-2rem)] md:h-screen z-50",
        isCollapsed ? "w-16" : "w-48",
        "md:flex",
        "transform md:transform-none",
        isMobileMenuOpen
          ? "translate-x-0"
          : "-translate-x-full md:translate-x-0"
      )}
    >
      <div className="relative flex flex-col items-center px-2 py-3 w-full">
        <RouterLink
          to="/"
          className={twMerge(
            "flex flex-col items-center gap-2 w-full",
            isCollapsed ? "justify-center" : ""
          )}
          aria-label="Home"
        >
          <img
            src={logo}
            alt="Logo XTablo"
            className={twMerge(
              isCollapsed ? "w-8 h-8" : "w-16 h-16",
              "rounded-lg"
            )}
          />
          <h1
            className={twMerge(
              "text-lg font-bold transition-all duration-300 text-white whitespace-nowrap",
              isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
            )}
          >
            XTablo
          </h1>
        </RouterLink>
        {isCollapsable && (
          <Button
            variant="plain"
            isIconOnly
            onPress={() => setIsCollapsed(!isCollapsed)}
            aria-label={
              isCollapsed ? "Expand navigation" : "Collapse navigation"
            }
            aria-expanded={!isCollapsed}
            className={twMerge(
              isCollapsed ? "relative" : "absolute top-2 right-2",
              "size-5 p-1",
              "text-gray-300 hover:text-white",
              "transition-all duration-300",
              "bg-navbar-background",
              "rounded-full shadow-md",
              "opacity-0 group-hover:opacity-100",
              "hover:scale-110"
            )}
          >
            <Icon aria-hidden="true">
              {isCollapsed ? <PlusIcon /> : <MinusIcon />}
            </Icon>
          </Button>
        )}
      </div>
      <MainNavigation isCollapsed={isCollapsed} />
      <div
        className={twMerge(
          "bg-navbar-background flex px-1 pb-1.5 w-full mt-auto",
          isCollapsed ? "pl-2.5 pr-3.5" : ""
        )}
      >
        <UserMenuPopover isCollapsed={isCollapsed} />
      </div>
    </nav>
  );
};

export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
  const location = useLocation();

  const navItems: {
    path: string;
    label: string;
    icon: React.ReactNode;
    isDisabled?: boolean;
  }[] = [
    {
      path: "/",
      label: "Tableaux",
      icon: <Grid2X2Icon className="w-5 h-5" />,
    },
    {
      path: "/devis",
      label: "Devis",
      icon: <NotebookPenIcon className="w-5 h-5" />,
      isDisabled: true,
    },
    {
      path: "/factures",
      label: "Factures",
      icon: <ReceiptTextIcon className="w-5 h-5" />,
      isDisabled: true,
    },
    {
      path: "/planning",
      label: "Planning",
      icon: <SquareKanban className="w-5 h-5" />,
    },
    {
      path: "/kanban",
      label: "Kanban",
      icon: <Kanban className="w-5 h-5" />,
      isDisabled: true,
    },
    {
      path: "/chantiers",
      label: "Chantiers",
      icon: <ConstructionIcon className="w-5 h-5" />,
      isDisabled: true,
    },
    {
      path: "/chat",
      label: "Discussions",
      icon: <MessageCircleIcon className="w-5 h-5" />,
    },
  ];
  return (
    <nav className="flex flex-1 flex-col" aria-label="Primary navigation">
      <ul
        role="list"
        className={twMerge("grid py-3", isCollapsed ? "pl-2.5 pr-3" : "")}
      >
        {navItems.map(({ path, label, icon, isDisabled }) =>
          !isDisabled ? (
            <li key={label}>
              <NavLink isActive={location.pathname === path}>
                <RouterLink
                  to={path}
                  className="w-full"
                  aria-label={isCollapsed ? label : undefined}
                >
                  <div
                    className={twMerge(
                      "flex items-center gap-x-2",
                      isCollapsed ? "" : "pl-2"
                    )}
                  >
                    <Icon aria-hidden="true">{icon}</Icon>
                    <span
                      className={twMerge(
                        "text-sm transition-all duration-300",
                        isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                      )}
                    >
                      {label}
                    </span>
                  </div>
                </RouterLink>
              </NavLink>
            </li>
          ) : null
        )}
      </ul>
      <ul
        role="list"
        className={twMerge(
          "mt-auto grid py-1",
          isCollapsed ? "pl-2.5 pr-3" : ""
        )}
      >
        <li>
          <NavLink isActive={location.pathname === "/support"}>
            <RouterLink
              to="/support"
              className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
              aria-label={isCollapsed ? "Support" : undefined}
            >
              <div className="flex items-center gap-x-2">
                <Icon aria-hidden="true">
                  <HelpCircleIcon className="w-5 h-5" />
                </Icon>
                <span
                  className={twMerge(
                    "text-sm transition-all duration-300",
                    isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                  )}
                >
                  Support
                </span>
              </div>
            </RouterLink>
          </NavLink>
        </li>
        <li>
          <NavLink isActive={location.pathname === "/feedback"}>
            <RouterLink
              to="/feedback"
              className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
              aria-label={isCollapsed ? "Feedback" : undefined}
            >
              <div className="flex items-center gap-x-2">
                <Icon aria-hidden="true">
                  <SendIcon className="w-5 h-5" />
                </Icon>
                <span
                  className={twMerge(
                    "text-sm transition-all duration-300",
                    isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                  )}
                >
                  Feedback
                </span>
              </div>
            </RouterLink>
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}