"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Menu, X, Calendar, ArrowRight } from "lucide-react";
import styles from "./Navbar.module.css";

const NAV_LINKS = [
  { href: "/", label: "Beranda" },
  { href: "/open-trip", label: "Open Trip" },
  { href: "/private-trip", label: "Private Trip" },
  { href: "/galeri", label: "Galeri" },
  { href: "/rating", label: "Rating" },
  { href: "/tentang-kami", label: "Tentang Kami" },
  { href: "/karier", label: "Karier" },
  { href: "/kontak", label: "Kontak" },
];

interface NavbarProps {
  transparent?: boolean; // gunakan true di homepage hero
}

export default function Navbar({ transparent = false }: NavbarProps) {
  const pathname = usePathname();
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const mobileMenuRef = useRef<HTMLDivElement>(null);

  // Scroll detection
  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 40);
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  // Close mobile menu on route change using ref comparison
  const prevPathname = useRef(pathname);
  useEffect(() => {
    if (prevPathname.current !== pathname) {
      prevPathname.current = pathname;
      setMobileOpen(false);
    }
  }, [pathname]);

  // Close mobile menu on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (mobileMenuRef.current && !mobileMenuRef.current.contains(e.target as Node)) {
        setMobileOpen(false);
      }
    };
    if (mobileOpen) document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [mobileOpen]);

  const isSolid = !transparent || scrolled;

  return (
    <header
      className={`${styles.navbar} ${isSolid ? styles.solid : styles.transparent}`}
      role="banner"
    >
      <div className={`container ${styles.inner}`}>
        {/* Logo */}
        <Link href="/" className={styles.logo} aria-label="PPT Adventure — Beranda">
          <Image
            src="/brand/ppt-logo.png"
            alt="PPT Adventure"
            width={48}
            height={40}
            priority
            className={styles.logoImg}
          />
          <span className={styles.logoText}>
            PPT <span className={styles.logoAccent}>Adventure</span>
          </span>
        </Link>

        {/* Desktop Nav */}
        <nav className={styles.desktopNav} aria-label="Navigasi utama">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`${styles.navLink} ${
                (link.href === "/" ? pathname === "/" : pathname?.startsWith(link.href))
                  ? styles.navLinkActive
                  : ""
              }`}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* CTA */}
        <div className={styles.actions}>
          <Link href="/open-trip" className={`btn btn-primary ${styles.ctaPill}`} id="navbar-cta-trip">
            <Calendar size={14} aria-hidden />
            <span>Lihat Open Trip</span>
            <ArrowRight size={14} aria-hidden />
          </Link>

          {/* Hamburger */}
          <button
            className={styles.hamburger}
            onClick={() => setMobileOpen((v) => !v)}
            aria-expanded={mobileOpen}
            aria-controls="mobile-menu"
            aria-label={mobileOpen ? "Tutup menu" : "Buka menu"}
          >
            {mobileOpen ? <X size={22} /> : <Menu size={22} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <div
        id="mobile-menu"
        ref={mobileMenuRef}
        className={`${styles.mobileMenu} ${mobileOpen ? styles.mobileMenuOpen : ""}`}
        aria-hidden={!mobileOpen}
      >
        <nav aria-label="Navigasi mobile">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`${styles.mobileNavLink} ${
                (link.href === "/" ? pathname === "/" : pathname?.startsWith(link.href))
                  ? styles.mobileNavLinkActive
                  : ""
              }`}
            >
              {link.label}
            </Link>
          ))}
          <div className={styles.mobileCta}>
            <Link href="/open-trip" className="btn btn-primary" id="navbar-mobile-cta-trip">
              Lihat Open Trip →
            </Link>
          </div>
        </nav>
      </div>
    </header>
  );
}