"use client";

import {
  Cog6ToothIcon,
  ChartBarIcon,
  HomeModernIcon,
  BuildingOffice2Icon,
  ArrowPathIcon,
  AdjustmentsHorizontalIcon,
} from "@heroicons/react/24/outline";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuViewport,
} from "@/app/shadcn_components/ui/navigation-menu";
import YourProjectsDropdown from "./YourProjectsDropdown";
import { useState, useTransition } from "react";
import { useRouter, usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

interface ToolbarProps {
  portfolioId: string;
}

export function Toolbar({ portfolioId }: ToolbarProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [loadingHref, setLoadingHref] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const handleNav = (href: string) => {
    if (pathname === href) return;
    setLoadingHref(href);
    startTransition(() => {
      router.push(href);
    });
  };

  const navItems = [
    {
      label: "Portfolio",
      icon: BuildingOffice2Icon,
      match: (p: string) => p === `/portfolio/${portfolioId}`,
      href: `/portfolio/${portfolioId}`,
    },
    {
      label: "Reporting",
      icon: ChartBarIcon,
      match: (p: string) => p === `/portfolio/${portfolioId}/reporting`,
      href: `/portfolio/${portfolioId}/reporting`,
    },
    {
      label: "Scenarios",
      icon: AdjustmentsHorizontalIcon,
      match: (p: string) => p.startsWith(`/portfolio/${portfolioId}/scenarios`),
      href: `/portfolio/${portfolioId}/scenarios`,
    },
    {
      label: "Decent Homes",
      icon: HomeModernIcon,
      match: (p: string) =>
        p.startsWith(`/portfolio/${portfolioId}/decent-homes`),
      href: `/portfolio/${portfolioId}/decent-homes`,
    },
  ];

  const SettingsItems = [
    {
      label: "Settings",
      icon: Cog6ToothIcon,
      match: (p: string) => p.startsWith(`/portfolio/${portfolioId}/settings`),
      href: `/portfolio/${portfolioId}/settings`,
    },
  ];

  return (
    <>
      <NavigationMenu className="relative px-4">
        <NavigationMenuList className="flex-wrap">
          {navItems.map(({ label, icon: Icon, href, match }) => {
            const isActive = match(pathname);
            const isLoading = loadingHref === href && isPending;

            return (
              <NavigationMenuItem key={label}>
                <button
                  onClick={() => handleNav(href)}
                  className={cn(
                    "relative flex items-center rounded-md text-xs font-medium p-[3px]",
                    isActive &&
                      "bg-gradient-to-r from-brandblue via-brandbrown to-brandblue"
                  )}
                >
                  <div
                    className={cn(
                      "flex items-center rounded-md px-3 py-1.5",
                      isActive
                        ? "bg-white text-brandblue shadow-sm"
                        : "bg-gray-50 text-gray-800 hover:bg-midblue hover:text-gray-100"
                    )}
                  >
                    {isLoading ? (
                      <ArrowPathIcon className="h-4 w-4 mr-2 animate-spin" />
                    ) : (
                      <Icon className="h-4 w-4 mr-2" />
                    )}
                    {label}
                  </div>
                </button>
              </NavigationMenuItem>
            );
          })}
          <YourProjectsDropdown portfolioId={portfolioId} />
          {SettingsItems.map(({ label, icon: Icon, href, match }) => {
            const isActive = match(pathname);
            const isLoading = loadingHref === href && isPending;

            return (
              <NavigationMenuItem key={label}>
                <button
                  onClick={() => handleNav(href)}
                  className={cn(
                    "relative flex items-center rounded-md text-xs font-medium p-[3px]",
                    isActive &&
                      "bg-gradient-to-r from-brandblue via-brandbrown to-brandblue"
                  )}
                >
                  <div
                    className={cn(
                      "flex items-center rounded-md px-3 py-1.5",
                      isActive
                        ? "bg-white text-brandblue shadow-sm"
                        : "bg-gray-50 text-gray-800 hover:bg-midblue hover:text-gray-100"
                    )}
                  >
                    {isLoading ? (
                      <ArrowPathIcon className="h-4 w-4 mr-2 animate-spin" />
                    ) : (
                      <Icon className="h-4 w-4 mr-2" />
                    )}
                    {label}
                  </div>
                </button>
              </NavigationMenuItem>
            );
          })}
        </NavigationMenuList>

        <NavigationMenuViewport />
      </NavigationMenu>
    </>
  );
}
