"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()

    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",
                isScrolled
                    ? "bg-white/80 backdrop-blur-md shadow-sm"
                    : "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="/images/logo-white.png"
                            alt="SkyFly Travel"
                            fill
                            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",
                            isScrolled || !darkMode ? "text-slate-600 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",
                            isScrolled || !darkMode ? "text-slate-600 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",
                            isScrolled || !darkMode ? "text-slate-600 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",
                            isScrolled || !darkMode ? "text-slate-600 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",
                            isScrolled || !darkMode ? "text-slate-600 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="flex items-center bg-white/10 rounded-full p-1 border border-white/10 backdrop-blur-sm mr-2">
                        <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"
                                    : (isScrolled || !darkMode ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
                            )}
                        >
                            HUN
                        </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"
                                    : (isScrolled || !darkMode ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
                            )}
                        >
                            ENG
                        </button>
                    </div>

                    <Button
                        asChild
                        variant={isScrolled ? "default" : (darkMode ? "outline" : "pill")}
                        className={cn(
                            "rounded-full px-6",
                            (!isScrolled && darkMode) && "text-white border-white/20 hover:bg-white/10 bg-transparent",
                            (!isScrolled && !darkMode) && "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="md:hidden p-2 z-50 text-white bg-black/50 rounded-lg backdrop-blur-sm hover:bg-black/70 transition-colors"
                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                >
                    <Menu className="w-6 h-6" />
                </button>
            </div>

            {/* Mobile Menu Overlay */}
            {isMenuOpen && (
                <div className="fixed inset-0 bg-slate-900 z-40 flex flex-col pt-32 px-8 animate-in slide-in-from-top duration-300">
                    <div className="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")}>HUN</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")}>ENG</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>
            )}
        </nav>
    )
}

export default Navbar