"use client"

import { useState } 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 user = getCurrentUser()
  const { t } = useTranslation()

  const navigationItems = [
    { href: "/jobs", label: t('nav.jobs') },
    { href: "/companies", label: t('footer.empresas') },
    { href: "/blog", label: t('footer.blog') },
  ]

  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">
                  {t('footer.login')}
                </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" />
                          {t('nav.login')}
                        </Button>
                      </Link>
                      <Link href="/register" onClick={() => setIsOpen(false)}>
                        <Button className="w-full justify-start gap-2">
                          <User className="w-4 h-4" />
                          {t('nav.register')}
                        </Button>
                      </Link>
                    </>
                  )}
                  <div className="mt-4 flex justify-center">
                    <LanguageSwitcher />
                  </div>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </nav>
  )
}