import React, { useState, useEffect } from "react";
import { Search, LogIn, Menu, X } from "lucide-react";
import {
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
} from "@/components/ui/navigation-menu";
import { Button } from "@/components/ui/button";
import { Link } from "@inertiajs/react";
import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from "@/components/ui/drawer";
import RunningText from "./RunningText";

interface NavItemsProps {
    mobile?: boolean;
    onClose?: () => void;
}

const Navbar = () => {
    const [isScrolled, setIsScrolled] = useState(false);
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    // Handle scroll effect
    useEffect(() => {
        const handleScroll = () => {
            const scrollPosition = window.scrollY;
            setIsScrolled(scrollPosition > 50);
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
        <>
            <NavigationMenuItem>
                <Link
                    href={`/`}
                    onClick={mobile && onClose ? onClose : undefined}
                    className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
                        mobile
                            ? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
                            : "rounded-full hover:bg-green-800"
                    }`}
                >
                    HOME
                </Link>
            </NavigationMenuItem>
            {["PENGUMUMAN", "UNDANGAN", "PERATURAN"].map((item) => (
                <NavigationMenuItem key={item}>
                    <Link
                        href={`/${item.toLowerCase()}`}
                        onClick={mobile && onClose ? onClose : undefined}
                        className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
                            mobile
                                ? "w-full justify-center items-center rounded-lg hover:bg-green-700"
                                : "rounded-full hover:bg-green-800"
                        }`}
                    >
                        {item}
                    </Link>
                </NavigationMenuItem>
            ))}
            <NavigationMenuItem>
                <Button
                    variant="ghost"
                    onClick={mobile && onClose ? onClose : undefined}
                    className={`transition-all duration-200 text-white hover:text-white ${
                        mobile
                            ? "w-full justify-start rounded-lg hover:bg-green-700"
                            : "rounded-full hover:bg-green-800"
                    }`}
                >
                    <Search className="h-4 w-4 text-white" />
                </Button>
            </NavigationMenuItem>
        </>
    );

    return (
        <div className="w-full">
            <RunningText />

            <div
                className={`w-full rounded-br-2xl rounded-bl-2xl text-white transition-all duration-300 ${
                    isScrolled
                        ? "fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[#dcfce7]/80 shadow-lg"
                        : "relative bg-transparent"
                }`}
            >
                <div className="container max-w-7xl mx-auto">
                    <div className="flex items-center justify-between md:justify-center w-full gap-4 md:gap-8 p-4">
                        <Link
                            href="/"
                            className="transition-transform duration-200 hover:scale-105"
                        >
                            <img
                                src="/assets/logo_skl.svg"
                                alt="Logo"
                                className="w-12 h-12 md:w-16 md:h-16"
                            />
                        </Link>

                        <NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm">
                            <NavigationMenuList className="space-x-6">
                                <NavItems />
                            </NavigationMenuList>
                        </NavigationMenu>

                        <div className="md:hidden flex items-center gap-3">
                            <Link
                                href="/login"
                                className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-3 py-2 rounded-full text-sm"
                            >
                                <LogIn className="mr-2 h-4 w-4" /> Login
                            </Link>
                            <Drawer
                                open={isDrawerOpen}
                                onOpenChange={setIsDrawerOpen}
                            >
                                <DrawerTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        className="bg-green-800/90 hover:bg-green-700 text-white p-2 rounded-full"
                                    >
                                        {isDrawerOpen ? (
                                            <X className="h-6 w-6" />
                                        ) : (
                                            <Menu className="h-6 w-6" />
                                        )}
                                    </Button>
                                </DrawerTrigger>
                                <DrawerContent className="bg-green-800/95 backdrop-blur-lg border-none">
                                    <DrawerHeader>
                                        <DrawerTitle className="text-white text-2xl font-bold">
                                            Menu
                                        </DrawerTitle>
                                    </DrawerHeader>
                                    <div className="mt-4 px-4 flex justify-center">
                                        <NavigationMenu className="w-full">
                                            <NavigationMenuList className="flex flex-col items-center space-y-4">
                                                <NavItems
                                                    mobile
                                                    onClose={() =>
                                                        setIsDrawerOpen(false)
                                                    }
                                                />
                                            </NavigationMenuList>
                                        </NavigationMenu>
                                    </div>
                                    <DrawerClose asChild>
                                        <Button
                                            variant="ghost"
                                            className="absolute top-4 right-4 rounded-full p-2 text-white hover:bg-green-700"
                                        >
                                            <X className="h-6 w-6" />
                                        </Button>
                                    </DrawerClose>
                                </DrawerContent>
                            </Drawer>
                        </div>

                        <div className="hidden md:block">
                            <Link
                                href="/login"
                                className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full"
                            >
                                <LogIn className="mr-2 h-4 w-4" /> LOGIN
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Navbar;