"use client"

import * as React from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { useLanguage } from "@/lib/language-context"
import { Globe, Menu } from "lucide-react"

interface NavbarProps {
    darkMode?: boolean
}

const Navbar = ({ darkMode = false }: NavbarProps) => {
    const [isScrolled, setIsScrolled] = React.useState(false)
    const [isMenuOpen, setIsMenuOpen] = React.useState(false)
    const { language, setLanguage, t } = useLanguage()
    const useLightNav = isScrolled || !darkMode

    React.useEffect(() => {
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 20)
        }
        window.addEventListener("scroll", handleScroll)
        return () => window.removeEventListener("scroll", handleScroll)
    }, [])

    return (
        <>
            <nav
                className={cn(
                    "fixed top-0 left-0 right-0 z-50 transition-all duration-300 px-6 py-4",
                    useLightNav
                        ? "bg-white/80 backdrop-blur-md shadow-sm border-b border-slate-200/60"
                        : "bg-transparent"
                )}
            >
                <div className="max-w-7xl mx-auto flex items-center justify-between">
                    <Link href="/" className="flex items-center space-x-3 group z-50">
                        <div className="relative w-40 h-10 md:w-48 md:h-12">
                            <Image
                                src={useLightNav ? "/images/logo-dark.svg" : "/images/logo-white.svg"}
                                alt="SkyFly Travel"
                                fill
                                sizes="(min-width: 768px) 192px, 160px"
                                className="object-contain"
                                priority
                            />
                        </div>
                    </Link>

                <div className="hidden md:flex items-center space-x-8">
                    <Link
                        href="/arak"
                        className={cn(
                            "text-sm font-medium transition-colors",
                            useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
                        )}
                    >
                        {t.nav.prices}
                    </Link>
                    <Link
                        href="/szolgaltatasok"
                        className={cn(
                            "text-sm font-medium transition-colors",
                            useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
                        )}
                    >
                        {t.nav.services}
                    </Link>
                    <Link
                        href="/feltetelek"
                        className={cn(
                            "text-sm font-medium transition-colors",
                            useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
                        )}
                    >
                        {t.nav.conditions}
                    </Link>
                    <Link
                        href="/flotta"
                        className={cn(
                            "text-sm font-medium transition-colors",
                            useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
                        )}
                    >
                        {t.nav.fleet}
                    </Link>
                    <Link
                        href="/kapcsolat"
                        className={cn(
                            "text-sm font-medium transition-colors",
                            useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
                        )}
                    >
                        {t.nav.contact}
                    </Link>
                </div>

                <div className="hidden md:flex items-center space-x-4">
                    {/* Language Switcher */}
                    <div className={cn(
                        "flex items-center rounded-full p-1 mr-2 transition-colors",
                        useLightNav ? "bg-white border border-slate-200/70 shadow-sm" : "bg-white/10 border border-white/10 backdrop-blur-sm"
                    )}>
                        <button
                            onClick={() => setLanguage("hu")}
                            className={cn(
                                "text-[10px] font-bold px-3 py-1 rounded-full transition-all",
                                language === "hu"
                                    ? "bg-white text-slate-900 shadow-sm"
                                    : (useLightNav ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
                            )}
                        >
                            {t.nav.language.hu}
                        </button>
                        <button
                            onClick={() => setLanguage("en")}
                            className={cn(
                                "text-[10px] font-bold px-3 py-1 rounded-full transition-all",
                                language === "en"
                                    ? "bg-white text-slate-900 shadow-sm"
                                    : (useLightNav ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
                            )}
                        >
                            {t.nav.language.en}
                        </button>
                    </div>

                    <Button
                        asChild
                        variant={useLightNav ? "pill" : "outline"}
                        className={cn(
                            "rounded-full px-6",
                            (!useLightNav && darkMode) && "text-white border-white/20 hover:bg-white/10 bg-transparent",
                            useLightNav && "bg-primary text-white"
                        )}
                    >
                        <a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer" className="text-[10px] md:text-sm">
                            {t.nav.cta}
                        </a>
                    </Button>
                </div>

                {/* Mobile Menu Toggle */}
                <button
                    className={cn(
                        "md:hidden p-2 z-50 rounded-lg backdrop-blur-sm transition-colors",
                        useLightNav ? "text-slate-900 bg-white/80 border border-slate-200/70 hover:bg-white" : "text-white bg-black/50 hover:bg-black/70"
                    )}
                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                >
                    <Menu className="w-6 h-6" />
                </button>
            </div>

            </nav>

            {/* Mobile Menu Overlay */}
            {isMenuOpen && (
                <div className="fixed inset-0 z-40 flex flex-col pt-32 px-8 animate-in slide-in-from-top duration-300">
                    <div className="absolute inset-0 bg-slate-950/95 backdrop-blur-md" />
                    <div className="relative flex flex-col space-y-6 text-center">
                        <Link onClick={() => setIsMenuOpen(false)} href="/arak" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.prices}</Link>
                        <Link onClick={() => setIsMenuOpen(false)} href="/szolgaltatasok" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.services}</Link>
                        <Link onClick={() => setIsMenuOpen(false)} href="/feltetelek" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.conditions}</Link>
                        <Link onClick={() => setIsMenuOpen(false)} href="/flotta" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.fleet}</Link>
                        <Link onClick={() => setIsMenuOpen(false)} href="/kapcsolat" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.contact}</Link>

                        <div className="flex justify-center gap-4 pt-8">
                            <button onClick={() => { setLanguage("hu"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "hu" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>{t.nav.language.hu}</button>
                            <button onClick={() => { setLanguage("en"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "en" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>{t.nav.language.en}</button>
                        </div>

                        <Button asChild size="lg" className="mt-8 bg-primary text-white rounded-full">
                            <a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
                                {t.nav.cta}
                            </a>
                        </Button>
                    </div>
                </div>
            )}
        </>
    )
}

export default Navbar