"use client"

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import { ChevronDown, Ellipsis, Menu } from "lucide-react";
import Link from "next/link";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Button } from "../ui/button";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";

const links = [
  { type: "link" as const, href: "/", label: "Home" },
  { type: "link" as const, href: "/artworks", label: "Portfolio" },
  {
    type: "dropdown" as const,
    label: "Categories",
    items: [
      { href: "/artworks/animalstudies", label: "Animal Studies" },
      // { href: "/artworks/artfight", label: "Artfight" }
    ],
  },
  // { type: "link" as const, href: "/miniatures", label: "Miniatures" },
  { type: "link" as const, href: "/commissions", label: "Commissions" },
  { type: "link" as const, href: "/commissions/status", label: "Commission Status" },
  { type: "link" as const, href: "/tos", label: "Terms of Service" },
  { type: "link" as const, href: "/about", label: "About Me" },
]

export default function TopNav() {
  const [open, setOpen] = useState(false)
  const requiredLinks = [
    links[0], // Home
    links[1], // Portfolio
    links[4], // Commissions
  ];
  const flexibleLinks = links.filter((link) => !requiredLinks.includes(link));
  const [visibleCount, setVisibleCount] = useState(flexibleLinks.length);
  const listRef = useRef<HTMLUListElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const measureListRef = useRef<HTMLUListElement | null>(null);
  const [containerWidth, setContainerWidth] = useState(0);

  const visibleLinks = [...requiredLinks, ...flexibleLinks.slice(0, visibleCount)];
  const overflowLinks = flexibleLinks.slice(visibleCount);
  const showMore = overflowLinks.length > 0;

  useEffect(() => {
    const containerEl = containerRef.current;
    if (!containerEl) return;
    const update = () => {
      setContainerWidth(containerEl.getBoundingClientRect().width);
    };
    const ro = new ResizeObserver(update);
    ro.observe(containerEl);
    window.addEventListener("resize", update);
    update();
    return () => {
      ro.disconnect();
      window.removeEventListener("resize", update);
    };
  }, []);

  useLayoutEffect(() => {
    const measureEl = measureListRef.current;
    if (!measureEl || !containerWidth) return;
    const items = Array.from(measureEl.children) as HTMLElement[];
    if (!items.length) return;

    const moreItem = items[items.length - 1];
    const moreWidth = moreItem.getBoundingClientRect().width;
    const itemWidths = items.slice(0, -1).map((el) => el.getBoundingClientRect().width);

    const requiredIndexes = new Set([0, 1, 4]);
    let requiredWidth = 0;
    const flexibleWidths: number[] = [];
    itemWidths.forEach((w, idx) => {
      if (requiredIndexes.has(idx)) {
        requiredWidth += w;
      } else {
        flexibleWidths.push(w);
      }
    });

    const totalFlexibleWidth = flexibleWidths.reduce((a, b) => a + b, 0);
    let nextVisibleCount = flexibleLinks.length;
    const safetyPadding = 24;

    if (requiredWidth + totalFlexibleWidth + safetyPadding > containerWidth) {
      let available = containerWidth - requiredWidth - moreWidth - safetyPadding;
      if (available < 0) available = 0;
      let fit = 0;
      let used = 0;
      for (const w of flexibleWidths) {
        if (used + w > available) break;
        used += w;
        fit += 1;
      }
      nextVisibleCount = fit;
    }

    if (nextVisibleCount !== visibleCount) {
      setVisibleCount(nextVisibleCount);
    }

  }, [containerWidth, flexibleLinks.length, visibleCount]);

  return (
    <div className="w-full flex items-center justify-between">
      {/* Desktop Nav */}
      <div className="hidden md:flex flex-1 min-w-0">
        <NavigationMenu
          viewport={false}
          delayDuration={0}
          skipDelayDuration={0}
          className="w-full min-w-0 max-w-none"
        >
          <div ref={containerRef} className="w-full max-w-full min-w-0">
            <NavigationMenuList
              ref={listRef}
              className="w-full flex-nowrap justify-start min-w-0"
            >
              {visibleLinks.map((item) => {
                if (item.type === "dropdown") {
                  return (
                    <NavigationMenuItem key={item.label}>
                      <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
                        {item.label}
                      </NavigationMenuTrigger>
                      <NavigationMenuContent className="z-50">
                        <ul className="min-w-48">
                          {item.items.map(({ href, label }) => (
                            <li key={href}>
                              <NavigationMenuLink asChild className="w-full hover:bg-hover">
                                <Link href={href}>{label}</Link>
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  );
                }

                return (
                  <NavigationMenuItem key={item.href}>
                    <NavigationMenuLink
                      asChild
                      className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
                    >
                      <Link href={item.href}>{item.label}</Link>
                    </NavigationMenuLink>
                  </NavigationMenuItem>
                );
              })}
              {showMore ? (
                <NavigationMenuItem>
                  <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
                    <Ellipsis className="h-4 w-4" />
                  </NavigationMenuTrigger>
                  <NavigationMenuContent className="z-50">
                    <ul className="min-w-48">
                      {overflowLinks.map((item) => {
                        if (item.type === "dropdown") {
                          return (
                            <li key={item.label}>
                              <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
                                {item.label}
                              </div>
                              <ul className="pl-2">
                                {item.items.map(({ href, label }) => (
                                  <li key={href}>
                                    <NavigationMenuLink asChild className="w-full hover:bg-hover">
                                      <Link href={href}>{label}</Link>
                                    </NavigationMenuLink>
                                  </li>
                                ))}
                              </ul>
                            </li>
                          );
                        }

                        return (
                          <li key={item.href}>
                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
                              <Link href={item.href}>{item.label}</Link>
                            </NavigationMenuLink>
                          </li>
                        );
                      })}
                    </ul>
                  </NavigationMenuContent>
                </NavigationMenuItem>
              ) : null}
            </NavigationMenuList>
          </div>
        </NavigationMenu>
      </div>

      <div className="absolute left-0 top-0 -z-10 opacity-0 pointer-events-none">
        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
          <NavigationMenuList ref={measureListRef} className="flex-nowrap">
            {links.map((item) => (
              <NavigationMenuItem key={`measure-${item.type === "dropdown" ? item.label : item.href}`}>
                <div className={navigationMenuTriggerStyle()}>
                  {item.type === "dropdown" ? (
                    <span className="inline-flex items-center gap-1">
                      {item.label}
                      <ChevronDown className="h-3 w-3" />
                    </span>
                  ) : (
                    item.label
                  )}
                </div>
              </NavigationMenuItem>
            ))}
            <NavigationMenuItem>
              <div className={navigationMenuTriggerStyle()}>
                <Ellipsis className="h-4 w-4" />
              </div>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>

      <div className="md:hidden">
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon">
              <Menu className="w-6 h-6" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle className="text-lg">Navigation</SheetTitle>
            </SheetHeader>
            <nav className="mt-4 flex flex-col gap-2">
              {links.map((item) => {
                if (item.type === "dropdown") {
                  return (
                    <div key={item.label} className="px-2">
                      <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
                        {item.label}
                      </div>
                      <div className="flex flex-col">
                        {item.items.map(({ href, label }) => (
                          <Link
                            key={href}
                            href={href}
                            onClick={() => setOpen(false)}
                            className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
                            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                          >
                            {label}
                          </Link>
                        ))}
                      </div>
                    </div>
                  );
                }

                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={() => setOpen(false)}
                    className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  >
                    {item.label}
                  </Link>
                );
              })}
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </div>
  );
}