"use client"
import { useState } from "react"
import { Menu, X } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { useRouter, usePathname } from "next/navigation"
import { useAuth } from "@/context/AuthContext"
import { useTranslations } from 'next-intl'
import { LanguageSwitcher } from "@/components/ui/language-switcher"
import { useLocale } from 'next-intl'

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const router = useRouter()
  const pathname = usePathname()
  const { isAuthenticated } = useAuth()
  const t = useTranslations()
  const locale = useLocale()

  const isActiveLink = (href: string) => {
    if (href === "/") {
      return pathname === "/"
    }
    return pathname.startsWith(href)
  }

  const navLinks = [
    { label: t('navigation.home'), href: "/" },
    { label: t('navigation.about'), href: "/about-us" },
    { label: t('navigation.contact'), href: "#contact" }
  ]

  const handleNavClick = (href: string) => {
    setMobileMenuOpen(false)

    if (href.startsWith('#')) {
      // Handle smooth scrolling for anchor links
      const element = document.querySelector(href)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    } else {
      // Handle page navigation for regular links
      router.push(`/${locale}${href === "/" ? "" : href}`)
    }
  }

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/50 backdrop-blur-md shadow-sm">
      <div className="max-w-[1100px] mx-auto px-4 lg:px-20">
        <div className="flex items-center justify-between h-20">
          <Link href={`/${locale}`} className="flex items-center">
            <Image src="/aivly-logo.svg" alt="Company Logo" width={120} height={40} priority />
          </Link>

          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map(link => (
              <button
                key={link.label}
                onClick={() => handleNavClick(link.href)}
                className={`text-base transition-colors ${isActiveLink(link.href)
                  ? "text-primary font-semibold"
                  : "text-black/80 hover:text-primary"
                  }`}
              >
                {link.label}
              </button>
            ))}
          </nav>

          <div className="hidden md:flex items-center gap-3">
            <LanguageSwitcher />
            {isAuthenticated ? (
              <Link href="/dashboard">
                <Button className="px-6 py-2.5 rounded-lg bg-primary-gradient text-white font-medium hover:opacity-90 transition-opacity">
                  {t('navigation.dashboard')}
                </Button>
              </Link>
            ) : (
              <>
                <Link href={`/${locale}/sign-in`}>
                  <Button
                    variant="outline"
                    className="px-6 py-2.5 border border-primary rounded-lg bg-white text-primary-blue font-medium transition-colors"
                  >
                    {t('auth.signIn')}
                  </Button>
                </Link>

                <Link href={`/${locale}/sign-up`}>
                  <Button className="px-6 py-2.5 rounded-lg bg-primary-gradient text-white font-medium hover:opacity-90 transition-opacity">
                    {t('auth.signUp')}
                  </Button>
                </Link>
              </>
            )}
          </div>

          <button className="md:hidden p-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} aria-label="Toggle menu">
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden bg-white border-t overflow-hidden"
          >
            <nav className="flex flex-col p-4 space-y-4">
              {navLinks.map(link => (
                <button
                  key={link.label}
                  onClick={() => handleNavClick(link.href)}
                  className={`text-base transition-colors py-2 text-left ${isActiveLink(link.href)
                    ? "text-primary font-semibold"
                    : "text-black/80 hover:text-primary"
                    }`}
                >
                  {link.label}
                </button>
              ))}
              <div className="flex flex-col gap-3 pt-4 border-t">
                <LanguageSwitcher />
                {isAuthenticated ? (
                  <Button onClick={() => router.push(`/${locale}/dashboard`)} className="bg-primary hover:bg-primary-light w-full">
                    {t('navigation.dashboard')}
                  </Button>
                ) : (
                  <>
                    <Button onClick={() => router.push(`/${locale}/sign-in`)} variant="outline" className="border-primary text-primary bg-accent-gradient w-full">
                      {t('auth.signIn')}
                    </Button>
                    <Button onClick={() => router.push(`/${locale}/sign-up`)} className="bg-primary hover:bg-primary-light w-full">{t('auth.signUp')}</Button>
                  </>
                )}
              </div>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}