"use client";
import Image from "next/image";
import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { Menu, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Header({ visible }: { visible: boolean }) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setMounted(true);
  }, []);

  // Close mobile menu when route changes
  useEffect(() => {
    setIsMobileMenuOpen(false);
  }, [pathname]);

  // Prevent body scroll when mobile menu is open
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isMobileMenuOpen]);

  const mobileMenu = (
    <div
      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-all duration-300 desk:hidden ${
        isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
      }`}
      style={{ backgroundColor: "#06120c" }}
    >
      {/* Close button */}
      <button
        className="absolute top-12 right-6 p-2 text-[#bc9e65] hover:text-white transition-colors"
        onClick={() => setIsMobileMenuOpen(false)}
        aria-label="Close Menu"
      >
        <X size={32} />
      </button>

      {/* Logo inside overlay */}
      <Link href="/" className="mb-10 select-none" onClick={() => setIsMobileMenuOpen(false)}>
        <Image
          src="/images/logo.png"
          alt="My Dosa Place"
          width={160}
          height={60}
          className="h-14 w-auto pointer-events-none"
        />
      </Link>

      <nav className="flex flex-col items-center gap-8 text-center">
        <Link
          href="/"
          className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
        >
          Home
        </Link>
        <Link
          href="/about"
          className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
        >
          About
        </Link>
        <Link
          href="/menu"
          className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
        >
          Menu
        </Link>
        <Link
          href="/blog"
          className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
        >
          Blog
        </Link>
        <Link
          href="/contact"
          className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
        >
          Contact
        </Link>

        <Link
          href="/reservation"
          className="mt-8 px-8 py-3 border border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#06120c] bg-[#bc9e65] transition-all duration-300 shadow-md hover:bg-[#d8c396]"
        >
          RESERVE TABLE
        </Link>
      </nav>
    </div>
  );

  return (
    <>
      <header
        className={`fixed top-0 left-0 w-full h-22 bg-[#06120c]/90 border-b border-[#bc9e65]/20 backdrop-blur-md transition-transform duration-500 ease-in-out z-40 ${
          visible ? "translate-y-0" : "-translate-y-full"
        }`}
      >
        <div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">

          {/* Left Side: Brand Logo */}
          <Link href="/" className="clickable flex items-center gap-2.5 select-none">
            <Image
              src="/images/logo.png"
              alt="My Dosa Place"
              width={160}
              height={60}
              className="h-10 sm:h-12 w-auto pointer-events-none"
              priority
            />
          </Link>

          {/* Center: Navigation Links (Desktop — visible above 992px) */}
          <nav className="hidden desk:flex items-center gap-8">
            <Link href="/" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Home</Link>
            <Link href="/about" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">About</Link>
            <Link href="/menu" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Menu</Link>
            <Link href="/blog" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Blog</Link>
            <Link href="/contact" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Contact</Link>
          </nav>

          {/* Right Side: Reservation Button & Hamburger */}
          <div className="flex items-center gap-4">
            <Link
              href="/reservation"
              className="hidden desk:inline-block clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
            >
              RESERVE TABLE
            </Link>

            {/* Hamburger — hidden above 992px */}
            <button
              className="desk:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              aria-label="Toggle Menu"
            >
              {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu rendered in document.body via portal to avoid transform stacking context */}
      {mounted && createPortal(mobileMenu, document.body)}
    </>
  );
}
