"use client"

import { useState, useEffect } from "react"
import { useRouter, usePathname } from "next/navigation"
import { Menu, X, Moon, Sun } from "lucide-react"
import LanguageSwitcher from "./language-switcher"
import { useLanguage } from "@/context/language-context"

interface NavigationProps {
  isDark: boolean
  toggleDarkMode: () => void
}

export default function Navigation({ isDark, toggleDarkMode }: NavigationProps) {
  const [isOpen, setIsOpen] = useState(false)
  const router = useRouter()
  const pathname = usePathname()
  const isProjectDetail = pathname.startsWith("/projects/")
  const { t } = useLanguage()

  const scrollToSection = (id: string) => {
    // If on project detail page, navigate to home with hash
    if (isProjectDetail) {
      router.push(`/#${id}`)
      return
    }

    // If on home page, scroll directly
    const element = document.getElementById(id)
    element?.scrollIntoView({ behavior: "smooth" })
    setIsOpen(false)
  }

  const handleLogoClick = () => {
    if (isProjectDetail) {
      router.push("/")
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" })
    }
    setIsOpen(false)
  }

  // Handle scroll to section when hash is in URL
  useEffect(() => {
    const hash = window.location.hash.slice(1)
    if (hash && !isProjectDetail) {
      setTimeout(() => {
        const element = document.getElementById(hash)
        element?.scrollIntoView({ behavior: "smooth" })
      }, 100)
    }
  }, [pathname, isProjectDetail])

  return (
    <nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[90%] max-w-3xl bg-background/70 backdrop-blur-xl border border-border/50 rounded-lg shadow-lg z-50 transition-all duration-300">
      <div className="px-6 sm:px-8">
        <div className="flex justify-between items-center h-16">
          <button
            onClick={handleLogoClick}
            className="text-lg font-bold text-primary hover:text-primary/80 transition-colors duration-200 cursor-pointer"
          >
            feb.trd_
          </button>

          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center gap-6">
            <button
              onClick={() => scrollToSection("about")}
              className="text-sm hover:text-primary transition-all duration-200 cursor-pointer hover:scale-105 transform"
            >
              {t("about")}
            </button>
            <button
              onClick={() => scrollToSection("experience")}
              className="text-sm hover:text-primary transition-all duration-200 cursor-pointer hover:scale-105 transform"
            >
              {t("experience")}
            </button>
            <button
              onClick={() => scrollToSection("projects")}
              className="text-sm hover:text-primary transition-all duration-200 cursor-pointer hover:scale-105 transform"
            >
              {t("projects")}
            </button>
            <button
              onClick={() => scrollToSection("contact")}
              className="text-sm hover:text-primary transition-all duration-200 cursor-pointer hover:scale-105 transform"
            >
              {t("contact")}
            </button>
            <LanguageSwitcher />
            <button
              onClick={toggleDarkMode}
              className="p-2 hover:bg-muted rounded-full transition-colors duration-200 cursor-pointer"
            >
              {isDark ? <Sun size={18} /> : <Moon size={18} />}
            </button>
          </div>

          {/* Mobile Menu Button */}
          <div className="lg:hidden flex items-center gap-2">
            <LanguageSwitcher />
            <button
              onClick={toggleDarkMode}
              className="p-2 hover:bg-muted rounded-full transition-colors duration-200 cursor-pointer"
            >
              {isDark ? <Sun size={18} /> : <Moon size={18} />}
            </button>
            <button onClick={() => setIsOpen(!isOpen)} className="p-2 cursor-pointer">
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {isOpen && (
          <div className="lg:hidden pb-4 space-y-1 animate-in fade-in slide-in-from-top-2 duration-200">
            <button
              onClick={() => scrollToSection("about")}
              className="block w-full text-left px-4 py-3 hover:bg-muted/50 rounded-lg transition-colors cursor-pointer font-medium text-foreground"
            >
              {t("about")}
            </button>
            <button
              onClick={() => scrollToSection("experience")}
              className="block w-full text-left px-4 py-3 hover:bg-muted/50 rounded-lg transition-colors cursor-pointer font-medium text-foreground"
            >
              {t("experience")}
            </button>
            <button
              onClick={() => scrollToSection("projects")}
              className="block w-full text-left px-4 py-3 hover:bg-muted/50 rounded-lg transition-colors cursor-pointer font-medium text-foreground"
            >
              {t("projects")}
            </button>
            <button
              onClick={() => scrollToSection("contact")}
              className="block w-full text-left px-4 py-3 hover:bg-muted/50 rounded-lg transition-colors cursor-pointer font-medium text-foreground"
            >
              {t("contact")}
            </button>
          </div>
        )}
      </div>
    </nav>
  )
}