"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import navbarData from "@/data/navbar.json";

export default function Navbar() {
  const pathname = usePathname();
  const [isMounted, setIsMounted] = useState(false);
  const [activeTab, setActiveTab] = useState("");

  const performScroll = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setActiveTab(`/#${id}`);
    }
  };

  useEffect(() => {
    setIsMounted(true);

    if (pathname === "/") {
      const hash = window.location.hash.replace("#", "");
      if (hash) {
        setTimeout(() => performScroll(hash), 400);
      } else {
        setActiveTab("/#home");
      }
    } else {
      setActiveTab(pathname);
    }

    const handleScroll = () => {
      if (pathname !== "/") return;
      if (window.scrollY < 100) {
        setActiveTab("/#home");
        return;
      }

      navbarData.navItems.forEach((item) => {
        if (item.href.includes("#")) {
          const id = item.href.replace("/#", "");
          const el = document.getElementById(id);
          if (el) {
            const rect = el.getBoundingClientRect();
            if (rect.top <= 250 && rect.bottom >= 250) {
              setActiveTab(item.href);
            }
          }
        }
      });
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [pathname]);

  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    if (href.startsWith("/#") && pathname === "/") {
      e.preventDefault();
      const id = href.replace("/#", "");
      performScroll(id);
      window.history.pushState(null, "", href);
    }
  };

  return (
    <nav className="fixed top-6 md:top-8 left-0 w-full z-50 px-4 md:px-8 pointer-events-none">
      <div className="max-w-7xl mx-auto flex flex-row justify-between items-center w-full">
        
        {/* LOGO - Ponechaná veľkosť pre čitateľnosť */}
        <Link href="/" className="text-xl md:text-2xl font-black text-white pointer-events-auto shrink-0 mr-4">
          {navbarData.logo}
        </Link>
        
        {/* MENU CONTAINER - Trochu vyšší a priestrannejší */}
        <div className="flex bg-[#1a1a1c]/80 backdrop-blur-md p-1.5 rounded-full border border-white/5 relative pointer-events-auto items-center shadow-2xl">
          {navbarData.navItems.map((item) => {
            const isActive = activeTab === item.href;
            
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={(e) => handleLinkClick(e, item.href)}
                /* ZVÄČŠENÉ: px-4 a text-xs na mobile (predtým px-3 a text-[11px]) */
                className="relative px-4 md:px-7 py-2 md:py-2.5 text-xs md:text-sm font-bold transition-colors duration-500 z-10 whitespace-nowrap"
                style={{ color: isActive ? "#000000" : "#9ca3af" }}
              >
                <AnimatePresence>
                  {isActive && isMounted && (
                    <motion.div
                      layoutId="active-pill"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ type: "spring", stiffness: 380, damping: 30 }}
                      className="absolute inset-0 bg-white rounded-full -z-10 shadow-lg"
                    />
                  )}
                </AnimatePresence>
                {item.name}
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}