"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Menu, User, LogIn } from "lucide-react"
import { getCurrentUser } from "@/lib/auth"
import { useTranslation } from "@/lib/i18n"
import { LanguageSwitcher } from "@/components/language-switcher"

export function Navbar() {
    const [isOpen, setIsOpen] = useState(false)
    const [mounted, setMounted] = useState(false)
    const user = getCurrentUser()
    const { t } = useTranslation()

    // Prevent hydration mismatch by only rendering translated content after mount
    useEffect(() => {
        setMounted(true)
    }, [])

    if (!mounted) {
        return null; // Or a loading skeleton to avoid mismatch
    }

    // Static labels for SSR, translated labels for client
    const navigationItems = [
        { href: "/jobs", label: mounted ? t('nav.jobs') : "Vagas" },
        { href: "/companies", label: mounted ? t('footer.empresas') : "Empresas" },
        { href: "/blog", label: mounted ? t('footer.blog') : "Blog" },
    ]

    const loginLabel = mounted ? t('footer.login') : "Entrar"
    const registerLabel = mounted ? t('nav.register') : "Cadastrar"
    const mobileLoginLabel = mounted ? t('nav.login') : "Login"

    return (
        <nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex h-16 items-center justify-between">
                    {/* Logo */}
                    <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
                        <Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
                        <span className="text-xl font-bold">
                            <span className="text-white">GoHorse </span>
                            <span className="text-primary">Jobs</span>
                        </span>
                    </Link>

                    {/* Desktop Navigation - moved to right side */}
                    <div className="hidden md:flex items-center gap-8 ml-auto mr-8">
                        {navigationItems.map((item) => (
                            <Link
                                key={item.href}
                                href={item.href}
                                className="text-sm font-medium text-white hover:text-primary transition-colors"
                            >
                                {item.label}
                            </Link>
                        ))}
                    </div>

                    {/* Desktop Auth Buttons */}
                    <div className="hidden md:flex items-center gap-3">
                        <LanguageSwitcher />
                        {user ? (
                            <Link href="/dashboard">
                                <Button variant="ghost" className="gap-2 text-white hover:text-primary transition-colors">
                                    <User className="w-4 h-4" />
                                    Dashboard
                                </Button>
                            </Link>
                        ) : (
                            <>
                                <Link href="/login">
                                    <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 px-6 h-9 font-normal">
                                        {loginLabel}
                                    </Button>
                                </Link>
                                <Link href="/register">
                                    <Button className="bg-primary hover:bg-primary/90 text-white px-6 h-9 font-normal">
                                        {registerLabel}
                                    </Button>
                                </Link>
                            </>
                        )}
                    </div>

                    {/* Mobile Menu */}
                    <Sheet open={isOpen} onOpenChange={setIsOpen}>
                        <SheetTrigger asChild className="md:hidden">
                            <Button variant="ghost" size="icon">
                                <Menu className="w-5 h-5" />
                            </Button>
                        </SheetTrigger>
                        <SheetContent side="right" className="w-80">
                            <div className="flex flex-col gap-4 mt-6">
                                <div className="flex items-center gap-2 pb-4 border-b justify-center">
                                    <Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
                                    <span className="text-lg font-bold">GoHorse Jobs</span>
                                </div>

                                {navigationItems.map((item) => (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        className="text-sm text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted"
                                        onClick={() => setIsOpen(false)}
                                    >
                                        {item.label}
                                    </Link>
                                ))}

                                <div className="flex flex-col gap-2 mt-4 pt-4 border-t">
                                    {user ? (
                                        <Link href="/dashboard" onClick={() => setIsOpen(false)}>
                                            <Button variant="ghost" className="w-full justify-start gap-2">
                                                <User className="w-4 h-4" />
                                                Dashboard
                                            </Button>
                                        </Link>
                                    ) : (
                                        <>
                                            <Link href="/login" onClick={() => setIsOpen(false)}>
                                                <Button variant="ghost" className="w-full justify-start gap-2">
                                                    <LogIn className="w-4 h-4" />
                                                    {mobileLoginLabel}
                                                </Button>
                                            </Link>
                                            <Link href="/register" onClick={() => setIsOpen(false)}>
                                                <Button className="w-full justify-start gap-2">
                                                    <User className="w-4 h-4" />
                                                    {registerLabel}
                                                </Button>
                                            </Link>
                                        </>
                                    )}
                                    <div className="mt-4 flex justify-center">
                                        <LanguageSwitcher />
                                    </div>
                                </div>
                            </div>
                        </SheetContent>
                    </Sheet>
                </div>
            </div>
        </nav>
    )
}