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

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

const Navbar = () => {
    const [isScrolled, setIsScrolled] = useState(false);
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    const [searchQuery, setSearchQuery] = useState("");
    const { theme, setTheme } = useTheme();

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

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

    const toggleTheme = () => {
        setTheme(theme === "light" ? "dark" : "light");
    };

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        if (searchQuery) {
            router.push(`/search/${searchQuery}`);
            setSearchQuery(""); // Clear input setelah search
        }
    };

    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>
                <form onSubmit={handleSearch} className="flex items-center">
                    <input
                        type="text"
                        placeholder="Search..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
                            mobile ? "w-32" : "w-40"
                        }`}
                    />
                    <Button
                        type="submit"
                        variant="ghost"
                        className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
                    >
                        <Search className="h-4 w-4 text-white" />
                    </Button>
                </form>
            </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 text-center 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>

                        <Button
                            variant="ghost"
                            onClick={toggleTheme}
                            className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
                        >
                            {theme === "light" ? (
                                <Moon className="h-6 w-6" />
                            ) : (
                                <Sun className="h-6 w-6" />
                            )}
                        </Button>

                        <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;