"use client";

import Image from "next/image";
import { useState } from "react";
import { useSmartNavigation } from "@/lib/navigation";
import { useApiQuery } from "@/hooks/api/useApiQuery";

interface NavbarLink {
  id: string;
  label: string;
  url: string;
  newTab: boolean;
  order: number;
  isScrollLink: boolean;
}

interface NavbarData {
  branding: string;
  links: NavbarLink[];
}

export default function Navbar() {
  const { data: navbarData } = useApiQuery<NavbarData>("/api/navbar", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const navbar = navbarData ?? { branding: "Nitescape", links: [] };
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const { navigateToSection } = useSmartNavigation();

  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, link: NavbarLink) => {
    e.preventDefault();
    setIsMobileMenuOpen(false);

    if (link.newTab) {
      // Open in new tab
      window.open(link.url, "_blank");
    } else {
      // Use smart navigation
      navigateToSection(link.url, link.isScrollLink);
    }
  };

  return (
    <nav className="sticky top-0 z-50 bg-[#020c13] text-white p-4" aria-label="Main navigation">
      {/* Gradient border that fades to transparent */}
      <div className="absolute bottom-0 left-0 w-[100%] h-[2px] bg-gradient-to-r from-[#B87333] to-transparent" />

      <div className="mr-2 ml-2 md:mr-8 md:ml-8 mx-auto flex justify-between items-center">
        <a
          href="/"
          className="flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff914d]"
          aria-label="Homepage"
        >
          <Image
            src="/images/logo.webp"
            alt="Nitescape Lighting Logo"
            width={200}
            height={200}
            className="h-6 w-auto object-contain"
            priority
          />
        </a>

        {/* Mobile menu button */}
        <button
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          className="md:hidden p-2 hover:text-[#B87333] transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-[#B87333] rounded"
          aria-label="Toggle mobile menu"
          aria-expanded={isMobileMenuOpen}
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            {isMobileMenuOpen ? (
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            ) : (
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 6h16M4 12h16M4 18h16"
              />
            )}
          </svg>
        </button>

        {/* Desktop menu */}
        <ul className="hidden md:flex space-x-6 uppercase">
          {navbar.links.map((link) => (
            <li key={link.id}>
              <a
                href={link.url}
                className="hover:text-[#B87333] transition-colors duration-300 focus:outline-none focus:text-[#B87333] rounded px-1 py-0.5"
                onClick={(e) => handleNavClick(e, link)}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </div>

      {/* Mobile menu - moved outside the container div */}
      <div
        className={`md:hidden fixed left-0 right-0 bg-[#020c13] border-t border-[#B87333]/30 transition-all duration-300 z-50 ${
          isMobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
        }`}
        style={{ top: "4rem" }}
      >
        <ul className="flex flex-col space-y-4 p-4">
          {navbar.links.map((link) => (
            <li key={link.id}>
              <a
                href={link.url}
                className="block hover:text-[#B87333] transition-colors duration-300 uppercase py-2 focus:outline-none focus:text-[#B87333]"
                onClick={(e) => handleNavClick(e, link)}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
        {/* Gradient border that fades to transparent */}
        <div className="absolute bottom-0 left-0 w-[100%] h-[1px] bg-gradient-to-r from-[#B87333] to-transparent" />
      </div>
    </nav>
  );
}
