'use client'

import { useState, useEffect, useRef } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import styles from './Navbar.module.css'

const navLinks = [
    { name: 'Home', href: '/' },
    { name: 'About', href: '/about-us' },
    { name: 'Gallery', href: '/gallery' },
    { name: 'Menu', href: '/menu' },
    { name: 'Blog', href: '/blog' },
    { name: 'Contact', href: '/contact' },
]


export default function Navbar() {
    const [isOpen, setIsOpen] = useState(false)
    const [scrolled, setScrolled] = useState(false)
    const menuRef = useRef<HTMLDivElement>(null)
    const hamburgerRef = useRef<HTMLButtonElement>(null)

    const toggleMenu = () => {
        setIsOpen(!isOpen)
    }

    const closeMenu = () => {
        setIsOpen(false)
    }

    // Handle scroll for shadow effect
    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > 50) {
                setScrolled(true)
            } else {
                setScrolled(false)
            }
        }

        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    // Close menu when clicking outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (
                isOpen &&
                menuRef.current &&
                !menuRef.current.contains(event.target as Node) &&
                hamburgerRef.current &&
                !hamburgerRef.current.contains(event.target as Node)
            ) {
                closeMenu()
            }
        }

        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [isOpen])

    // Prevent scrolling when mobile menu is open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = 'unset'
        }
    }, [isOpen])

    return (
        <nav className={`${styles.navbar} ${scrolled ? styles.navbarScrolled : ''}`}>
            <div className={styles.logoContainer}>
                <Link href="/" onClick={closeMenu}>
                    <Image
                        src="/images/antalya-logo.png"
                        alt="Antalya Restaurant"
                        width={200}
                        height={200}
                        className={styles.logoImage}
                        priority
                    />
                </Link>
            </div>

            {/* Desktop Menu */}
            <div className={styles.desktopMenu}>
                {navLinks.map((link) => (
                    <Link key={link.name} href={link.href} className={styles.navLink}>
                        {link.name}
                    </Link>
                ))}
            </div>

            {/* Hamburger Button */}
            <button
                ref={hamburgerRef}
                className={`${styles.hamburger} ${isOpen ? styles.hamburgerOpen : ''}`}
                onClick={toggleMenu}
                aria-label="Toggle menu"
            >
                <span className={styles.bar}></span>
                <span className={styles.bar}></span>
                <span className={styles.bar}></span>
            </button>

            {/* Mobile Menu Overlay */}
            <div
                ref={menuRef}
                className={`${styles.mobileMenuOverlay} ${isOpen ? styles.mobileMenuOpen : ''}`}
            >
                {navLinks.map((link) => (
                    <Link
                        key={link.name}
                        href={link.href}
                        className={styles.mobileNavLink}
                        onClick={closeMenu}
                    >
                        {link.name}
                    </Link>
                ))}
            </div>
        </nav>
    )
}