import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Menu, PianoIcon, X } from 'lucide-react';
import { useState } from 'react';
import { navLinks } from '@/lib/constants';

gsap.registerPlugin(ScrollTrigger);

export default function NavBar() {
    const [open, setOpen] = useState(false);

    useGSAP(() => {
        gsap.timeline({
            scrollTrigger: {
                trigger: '.scroll-container',
                scroller: '.scroll-container',
                start: '80px top',
                toggleActions: 'play none none reverse',
            },
        }).fromTo(
            '[data-main-nav]',
            { boxShadow: '0 0 0 0 transparent' },
            {
                boxShadow: '0 2px 12px 0 rgba(0,0,0,0.08)',
                duration: 0.3,
                ease: 'power1.inOut',
            },
        );
    }, []);

    const handleNavClick = (id: string) => {
        setOpen(false);

        const el = document.getElementById(id);

        if (el) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <>
            <nav data-main-nav className="sticky top-0 z-50 bg-white">
                <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
                    <button
                        onClick={() => handleNavClick('home')}
                        className="flex cursor-pointer items-center gap-2 text-lg font-semibold"
                    >
                        <PianoIcon className="h-8 w-auto" />
                        <p>Xuelin Wang Música</p>
                    </button>

                    <ul className="hidden items-center gap-8 md:flex">
                        {navLinks.map((link) => (
                            <li key={link.id}>
                                <button
                                    onClick={() => handleNavClick(link.id)}
                                    className="cursor-pointer text-sm font-medium tracking-wide transition-colors hover:text-black/60 hover:underline underline-offset-4"
                                >
                                    {link.title}
                                </button>
                            </li>
                        ))}
                    </ul>

                    <button
                        onClick={() => setOpen((current) => !current)}
                        className="cursor-pointer p-1 md:hidden"
                        aria-label="Toggle menu"
                    >
                        {open ? <X size={24} /> : <Menu size={24} />}
                    </button>
                </div>
            </nav>

            {open ? (
                <div className="fixed inset-0 z-40 bg-white/98 px-6 pt-20 md:hidden">
                    <div className="mx-auto max-w-7xl">
                        <div className="mb-6 flex items-center gap-2 border-b px-0 pb-5 text-lg font-semibold">
                            <PianoIcon className="h-8 w-auto" />
                            <span>Xuelin Wang Música</span>
                        </div>

                        <nav className="flex flex-col gap-1">
                            {navLinks.map((link) => (
                                <button
                                    key={link.id}
                                    onClick={() => handleNavClick(link.id)}
                                    className="cursor-pointer rounded-lg px-4 py-3 text-left text-sm font-medium tracking-wide transition-all hover:bg-gray-100"
                                >
                                    {link.title}
                                </button>
                            ))}
                        </nav>
                    </div>
                </div>
            ) : null}
        </>
    );
}