"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

export default function Navigation({ logoUrl, alwaysLight }: { logoUrl?: string; alwaysLight?: boolean }) {
  const [scrolled, setScrolled] = useState(alwaysLight || false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    if (alwaysLight) return;
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav className={`navbar ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-logo">
        <Link href="/">
          <img src={logoUrl || "https://img1.wsimg.com/isteam/ip/97a81f60-8088-4634-9a1a-22b77f2b874a/Asset%201.png"} alt="Lazuli Hotel Logo" style={{ height: "75px", width: "auto" }} />
        </Link>
      </div>

      <div className="hamburger" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
        <span className={mobileMenuOpen ? "open" : ""}></span>
        <span className={mobileMenuOpen ? "open" : ""}></span>
        <span className={mobileMenuOpen ? "open" : ""}></span>
      </div>

      <div className={`nav-links ${mobileMenuOpen ? "mobile-open" : ""}`}>
        <Link href="/" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Home</Link>
        <Link href="/about" className="nav-link" onClick={() => setMobileMenuOpen(false)}>About</Link>
        <Link href="/facilities" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Facilities</Link>
        <Link href="/gallery" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Gallery</Link>
        <Link href="/rooms" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Rooms & Suites</Link>
        <Link href="/reviews" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Reviews</Link>
        <Link href="/admin" className="btn btn-secondary" style={{ padding: "0.5rem 1rem", fontSize: "0.875rem" }} onClick={() => setMobileMenuOpen(false)}>
          Staff Login
        </Link>
        <Link href="/rooms" className="btn btn-primary" onClick={() => setMobileMenuOpen(false)}>
          Book Now
        </Link>
      </div>
      
      <style jsx>{`
        .navbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          padding: 1.5rem 2.5rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all var(--transition-normal);
        }
        .navbar.scrolled {
          background: var(--glass-bg);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid var(--glass-border);
          padding: 1rem 2.5rem;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }
        .navbar:not(.scrolled) {
          background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), transparent);
        }
        .nav-logo {
          display: flex;
          align-items: center;
          transition: transform 0.3s ease;
        }
        .nav-logo:hover {
          transform: scale(1.05);
        }
        
        .hamburger {
          display: none;
          flex-direction: column;
          gap: 6px;
          cursor: pointer;
          z-index: 1001;
        }
        .hamburger span {
          display: block;
          width: 30px;
          height: 3px;
          background-color: var(--accent-gold);
          transition: all 0.3s ease;
          border-radius: 2px;
        }
        
        @media (max-width: 1024px) {
          .hamburger {
            display: flex;
          }
          
          .hamburger span.open:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
          }
          .hamburger span.open:nth-child(2) {
            opacity: 0;
          }
          .hamburger span.open:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
          }
          
          .nav-links {
            position: fixed;
            top: 0;
            right: -100%;
            height: 100vh;
            width: 80%;
            max-width: 400px;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: -10px 0 30px rgba(0,0,0,0.5);
          }
          
          .nav-links.mobile-open {
            right: 0;
          }
          
          .nav-link {
            color: white;
            font-size: 1.25rem;
          }
        }
      `}</style>
    </nav>
  );
}
