import { Link } from '@inertiajs/react';
import React, { useEffect, useState } from 'react';

interface MenuItem {
    name: string;
    href: string;
    active: boolean;
}

const Navbar: React.FC = () => {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev);

    useEffect(() => {
        document.body.style.overflow = isMobileMenuOpen ? 'hidden' : 'auto';
        return () => {
            document.body.style.overflow = 'auto';
        };
    }, [isMobileMenuOpen]);

    const menuItems: MenuItem[] = [
        { name: 'Anasayfa', href: '/', active: false },
        { name: 'Hakkımızda', href: '/hakkimizda', active: false },
        { name: 'Özellikler', href: '/ozellikler', active: false },
        { name: 'İletişim', href: '/iletisim', active: false },
    ];

    return (
        <nav className="relative z-50 mt-5 flex items-center justify-between px-5 pb-5 md:mt-0 md:px-10 lg:px-20">
            {/* Sol (Logo) */}
            <div className="flex-shrink-0">
                <Link href="/">
                    <img
                        className="w-48"
                        src="/assets/logo-beyaz.png"
                        alt="Logo"
                    />
                </Link>
            </div>

            {/* Orta (Menü) */}
            <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:block">
                <ul className="flex list-none gap-10">
                    {menuItems.map((item, index) => (
                        <li key={index}>
                            <Link
                                href={item.href}
                                className={`relative font-medium text-gray-300 transition-colors duration-300 hover:text-[#D97707] ${
                                    item.active
                                        ? 'after:absolute after:bottom-[-5px] after:left-0 after:h-0.5 after:w-full after:bg-[#D97707]'
                                        : ''
                                }`}
                            >
                                {item.name}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>

            {/* Sağ (Butonlar) */}
            <div className="hidden items-center gap-4 lg:flex">
                <Link href="/login">
                    <button className="flex items-center gap-2 rounded-full border-2 border-white bg-transparent px-7 py-3 font-semibold text-white transition-all duration-300 hover:bg-white hover:text-[#1a0a0a]">
                        Giriş Yap →
                    </button>
                </Link>
                <Link href="/register">
                    <button className="flex items-center gap-2 rounded-full border-2 border-[#D97707] bg-[#D97707] px-7 py-3 font-semibold text-white transition-all duration-300 hover:bg-transparent hover:text-[#D97707]">
                        Ücretsiz Deneyin →
                    </button>
                </Link>
            </div>

            {/* Mobile Toggle */}
            <button
                onClick={toggleMobileMenu}
                className="z-[1000] flex cursor-pointer flex-col gap-1.5 lg:hidden"
                aria-label="Toggle menu"
            >
                <span
                    className={`h-0.5 w-7 bg-white transition-all duration-300 ${
                        isMobileMenuOpen ? 'translate-y-2 rotate-45' : ''
                    }`}
                ></span>
                <span
                    className={`h-0.5 w-7 bg-white transition-all duration-300 ${
                        isMobileMenuOpen ? 'opacity-0' : ''
                    }`}
                ></span>
                <span
                    className={`h-0.5 w-7 bg-white transition-all duration-300 ${
                        isMobileMenuOpen ? '-translate-y-2 -rotate-45' : ''
                    }`}
                ></span>
            </button>

            {/* Mobile Menu */}
            <div
                className={`bg-[#1a0a0a]/98 fixed inset-0 z-[999] px-10 py-24 backdrop-blur-md transition-all duration-300 lg:hidden ${
                    isMobileMenuOpen
                        ? 'translate-x-0 opacity-100'
                        : '-translate-x-full opacity-0'
                }`}
            >
                <ul className="flex list-none flex-col gap-8">
                    {menuItems.map((item, index) => (
                        <li key={index}>
                            <a
                                href={item.href}
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="block text-2xl font-semibold text-white transition-colors duration-300 hover:text-[#D97707]"
                            >
                                {item.name}
                            </a>
                        </li>
                    ))}
                </ul>
                <div className="mt-10 flex flex-col gap-4">
                    <Link href="/login">
                        <button className="w-full rounded-full border-2 border-white bg-transparent px-7 py-3 font-semibold text-white transition-all duration-300 hover:bg-white hover:text-[#1a0a0a]">
                            Giriş Yap →
                        </button>
                    </Link>
                    <Link href="/register">
                        <button className="w-full rounded-full border-2 border-[#D97707] bg-[#D97707] px-7 py-3 font-semibold text-white transition-all duration-300 hover:bg-transparent hover:text-[#D97707]">
                            Ücretsiz Deneyin →
                        </button>
                    </Link>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;