"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { cn } from "@/lib/utils";

const NAV_LINKS = [
  {
    label: "Solutions",
    href: "#",
    subLinks: [
      {
        title: "Generative Models",
        desc: "Create content at scale with state-of-the-art LLMs.",
        href: "#",
        image: "/images/nav-models.png",
      },
      {
        title: "Neural Search",
        desc: "Semantic search engine for your enterprise data.",
        href: "#",
        image: "/images/nav-search.png",
      },
      {
        title: "AI Agents",
        desc: "Autonomous agents that execute complex workflows.",
        href: "#",
        image: "/images/nav-agents.png",
      },
    ],
  },
  { label: "Enterprise", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Research", href: "#" },
];

const Navbar = () => {
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
  const [hoveredSubLink, setHoveredSubLink] = useState<string | null>(null);

  return (
    <section
      className={cn(
        "flex min-h-[500px] w-full flex-col items-center justify-start bg-zinc-50 py-20 dark:bg-zinc-950",
      )}
    >
      {/* Navbar Container */}
      <nav
        className={cn(
          "relative mx-auto flex w-full max-w-5xl items-center justify-between border border-zinc-200 bg-white/80 px-6 py-4 backdrop-blur-md dark:border-zinc-800 dark:bg-zinc-900/80",
        )}
        onMouseLeave={() => {
          setHoveredLink(null);
          setHoveredSubLink(null);
        }}
      >
        {/* Logo */}
        <Link
          href="#"
          className={cn(
            "flex items-center gap-2 text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50",
          )}
        >
          <span>Neuraflow</span>
        </Link>

        {/* Desktop Links */}
        <div className={cn("hidden items-center gap-8 md:flex")}>
          {NAV_LINKS.map((link) => (
            <div
              key={link.label}
              className={cn("relative")}
              onMouseEnter={() => setHoveredLink(link.label)}
            >
              <Link
                href={link.href}
                className={cn(
                  "flex items-center gap-1 text-sm font-medium transition-colors hover:text-zinc-900 dark:hover:text-zinc-50",
                  hoveredLink === link.label
                    ? "text-zinc-900 dark:text-zinc-50"
                    : "text-zinc-600 dark:text-zinc-400",
                )}
              >
                {link.label}
                {link.subLinks && (
                  <ChevronDown
                    size={14}
                    className={cn(
                      "transition-transform duration-300",
                      hoveredLink === link.label ? "rotate-180" : "",
                    )}
                  />
                )}
              </Link>

              {link.subLinks && hoveredLink === link.label && (
                <motion.div
                  initial={{
                    opacity: 0,
                    y: 10,
                    scale: 0.95,
                    filter: "blur(10px)",
                  }}
                  animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.4, ease: "easeOut" }}
                  className={cn(
                    "absolute top-full left-1/2 mt-4 w-[600px] -translate-x-1/4 transform",
                  )}
                >
                  <div
                    className={cn(
                      "overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900",
                    )}
                  >
                    <div className={cn("grid grid-cols-2 gap-4 p-4")}>
                      <div className={cn("flex flex-col gap-2")}>
                        {link.subLinks.map((sub) => (
                          <Link
                            key={sub.title}
                            href={sub.href}
                            onMouseEnter={() => setHoveredSubLink(sub.title)}
                            className={cn(
                              "group flex flex-col gap-1 rounded-lg p-3 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
                            )}
                          >
                            <span
                              className={cn(
                                "font-semibold text-zinc-900 group-hover:text-zinc-900 dark:text-zinc-100 dark:group-hover:text-zinc-50",
                              )}
                            >
                              {sub.title}
                            </span>
                            <span
                              className={cn(
                                "text-xs text-zinc-500 dark:text-zinc-400",
                              )}
                            >
                              {sub.desc}
                            </span>
                          </Link>
                        ))}
                      </div>

                      {/* Preview Area */}
                      <div
                        className={cn(
                          "relative h-full w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800",
                        )}
                      >
                        {link.subLinks.map(
                          (sub) =>
                            (hoveredSubLink === sub.title ||
                              (!hoveredSubLink &&
                                link.subLinks[0].title === sub.title)) && (
                              <motion.div
                                key={sub.title}
                                initial={{ opacity: 0, filter: "blur(10px)" }}
                                animate={{ opacity: 1, filter: "blur(0px)" }}
                                transition={{ duration: 0.4 }}
                                className={cn("absolute inset-0 h-full w-full")}
                              >
                                <Image
                                  src={sub.image}
                                  alt={sub.title}
                                  fill
                                  className={cn("object-cover")}
                                />
                              </motion.div>
                            ),
                        )}
                      </div>
                    </div>

                    <div
                      className={cn(
                        "cursor-pointer border-t border-zinc-100 bg-zinc-50 px-6 py-3 text-xs font-medium text-zinc-900 dark:border-zinc-800/50 dark:bg-zinc-900/50 dark:text-zinc-100",
                      )}
                    >
                      View all solutions &rarr;
                    </div>
                  </div>
                </motion.div>
              )}
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <div className={cn("hidden md:block")}>
          <Link
            href="#"
            className={cn(
              "cursor-pointer rounded-lg bg-zinc-900 px-5 py-2 text-sm font-semibold text-white transition-transform hover:scale-105 hover:bg-zinc-800 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200",
            )}
          >
            Get Started
          </Link>
        </div>
      </nav>
    </section>
  );
};

export default Navbar;