"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { links } from "@/data/navigation";
import { NavigationLink } from "@/components/ui";
import { Path } from "@/store/navigation-store";

type NavLinksProps = {
  direction?: "horizontal" | "vertical";
  onClick?: () => void;
  animate?: boolean;
};

const containerVariants = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" },
  },
  visible: (direction = "horizontal") => ({
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: direction === "horizontal" ? 0.06 : 0.08,
      staggerDirection: 1,
    },
  }),
  exit: {
    opacity: 0,
    transition: {
      when: "afterChildren",
      staggerChildren: 0.06,
      staggerDirection: -1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 10, scale: 0.995 },
  visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.22 } },
  exit: { opacity: 0, y: 10, scale: 0.995, transition: { duration: 0.18 } },
};

const NavLinks = ({ direction = "horizontal", onClick, animate = false }: NavLinksProps) => {
  const className = direction === "horizontal" ? "flex gap-[min(3.8vw,2.5rem)]" : "flex flex-col space-y-4";
  const pathname = usePathname();

  if (!animate) {
    return (
      <ul className={className} role="menubar" aria-label="Menú principal">
        {links.map((link) => (
          <li key={link.href} role="none">
            {link.label === "Autogestión" ? (
              <a
                href={link.href}
                className="contigo-link-primary text-[0.875rem] lg:text-[1rem]"
                target="_blank"
                rel="noopener noreferrer"
              >
                {link.label}
              </a>
            ) : (
              <NavigationLink
                path={link.href as Path}
                role="menuitem"
                className={cn("contigo-link-primary text-[0.875rem] lg:text-[1rem]", {
                  "pointer-events-none font-semibold": link.href === pathname,
                })}
              >
                {link.label}
              </NavigationLink>
            )}
          </li>
        ))}
      </ul>
    );
  }

  return (
    <motion.ul
      key="navlinks"
      role="menubar"
      aria-label="Menú principal"
      className={className}
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
      custom={direction}
    >
      {links.map((link) => (
        <motion.li key={link.href} role="none" variants={itemVariants}>
          {link.label === "Autogestión" ? (
            <a
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              className="contigo-link-secondary text-[min(10vw,2.25rem)]"
            >
              {link.label}
            </a>
          ) : (
            <Link
              href={link.href}
              role="menuitem"
              onClick={onClick}
              className={cn("contigo-link-secondary text-[min(10vw,2.25rem)]", {
                "pointer-events-none text-contigo-violeta": link.href === pathname,
              })}
            >
              {link.label}
            </Link>
          )}
        </motion.li>
      ))}
    </motion.ul>
  );
};
export default NavLinks;