'use client'

import { useState, useEffect, useRef } from 'react'
import { usePathname } from 'next/navigation'
import { Menu, X, Facebook, Instagram, Youtube, ChevronDown } from 'lucide-react'
import LanguageSelector from './LanguageSelector'
import { imageUrls } from '@/lib/images'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isPropertiesOpen, setIsPropertiesOpen] = useState(false)
  const propertiesRef = useRef<HTMLDivElement>(null)
  const pathname = usePathname()

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (propertiesRef.current && !propertiesRef.current.contains(e.target as Node)) {
        setIsPropertiesOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])
  const { language } = useLanguage()

  // Detectar si estamos en una página con fondo blanco (blog, buy, sell, contact, properties)
  const isWhiteBackgroundPage = pathname?.includes('/blog') ||
    pathname?.endsWith('/buy') ||
    pathname?.endsWith('/sell') ||
    pathname?.endsWith('/contact') ||
    pathname?.includes('/properties') ||
    pathname?.includes('/our-properties') ||
    false

  const [scrolled, setScrolled] = useState(isWhiteBackgroundPage)

  useEffect(() => {
    if (isWhiteBackgroundPage) {
      setScrolled(true)
      return
    }

    const handleScroll = () => setScrolled(window.scrollY > 50)
    window.addEventListener('scroll', handleScroll)
    setScrolled(window.scrollY > 50)

    return () => window.removeEventListener('scroll', handleScroll)
  }, [isWhiteBackgroundPage])

  // Prevent body scroll when menu is open
  useEffect(() => {
    if (isMenuOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'unset'
    }
    return () => {
      document.body.style.overflow = 'unset'
    }
  }, [isMenuOpen])

  type NavLink = { name: string; href: string; external?: boolean }

  const navLinks: NavLink[] = [
    { name: getTranslation(language, 'nav.home'), href: `/${language}` },
    { name: getTranslation(language, 'nav.buy'), href: `/${language}/buy` },
    { name: getTranslation(language, 'nav.sell'), href: `/${language}/sell` },
    { name: getTranslation(language, 'nav.blog'), href: `/${language}/blog` },
  ]

  const propertiesSubmenu = [
    { name: getTranslation(language, 'nav.ourProperties'), href: `/${language}/our-properties` },
    { name: getTranslation(language, 'nav.allProperties'), href: `/${language}/properties` },
  ]

  // En páginas con fondo blanco, siempre mostrar fondo blanco
  const showSolidBackground = scrolled || isWhiteBackgroundPage
  // Fondo completamente sólido en Buy y Sell
  const isBuyOrSellPage = pathname?.endsWith('/buy') || pathname?.endsWith('/sell')

  return (
    <nav
      className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${showSolidBackground
        ? isBuyOrSellPage
          ? 'py-3 bg-white shadow-sm border-b border-brand-accent/20'
          : 'py-3 bg-white/95 backdrop-blur-md shadow-sm border-b border-brand-accent/20'
        : 'py-6 bg-transparent'
        }`}
    >
      <div className="w-full px-4 sm:px-6 lg:px-8 xl:px-10 2xl:px-12">
        <div className="relative flex items-center justify-between h-12 md:h-14">
          {/* Desktop: 3-column layout - Left | Center | Right (xl: 1280px+). 1fr auto 1fr evita que logo y menú se superpongan */}
          <div className="hidden xl:grid xl:grid-cols-[1fr_auto_1fr] xl:items-center xl:w-full xl:gap-4 xl:min-w-0">
            {/* Left - Navigation Links (overflow-visible para que el dropdown de Properties no se recorte) */}
            <div className="flex items-center justify-start min-w-0 overflow-visible">
              <div className="flex items-center gap-2 lg:gap-3 xl:gap-4">
                {navLinks.slice(0, 3).map((link) => (
                  <a
                    key={link.name}
                    href={link.href}
                    {...(link.external && { target: '_blank', rel: 'noopener noreferrer' })}
                    className={`text-[11px] xl:text-sm font-semibold uppercase tracking-wide transition-colors whitespace-nowrap px-1 xl:px-2 ${!showSolidBackground
                      ? 'text-white hover:text-brand-accent'
                      : 'text-brand-text hover:text-brand-primary'
                      }`}
                  >
                    {link.name}
                  </a>
                ))}
                {/* Properties dropdown - abre con click o hover */}
                <div
                  className="relative"
                  ref={propertiesRef}
                  onMouseEnter={() => setIsPropertiesOpen(true)}
                  onMouseLeave={() => setIsPropertiesOpen(false)}
                >
                  <button
                    type="button"
                    onClick={() => setIsPropertiesOpen((v) => !v)}
                    className={`flex items-center gap-1 text-[11px] xl:text-sm font-semibold uppercase tracking-wide transition-colors whitespace-nowrap px-1 xl:px-2 ${!showSolidBackground
                      ? 'text-white hover:text-brand-accent'
                      : 'text-brand-text hover:text-brand-primary'
                      }`}
                    aria-expanded={isPropertiesOpen}
                    aria-haspopup="true"
                  >
                    {getTranslation(language, 'nav.properties')}
                    <ChevronDown size={14} className={`transition-transform ${isPropertiesOpen ? 'rotate-180' : ''}`} />
                  </button>
                  {isPropertiesOpen && (
                    <div className="absolute top-full left-0 pt-1 pb-2 w-48 bg-white rounded-xl shadow-lg border border-brand-accent/20 z-50">
                      {propertiesSubmenu.map((item) => (
                        <a
                          key={item.name}
                          href={item.href}
                          className="block px-4 py-2.5 text-sm font-semibold uppercase tracking-wide text-brand-text hover:bg-brand-accent/10 hover:text-brand-primary transition-colors"
                          onClick={() => setIsPropertiesOpen(false)}
                        >
                          {item.name}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
                {navLinks.slice(3).map((link) => (
                  <a
                    key={link.name}
                    href={link.href}
                    {...(link.external && { target: '_blank', rel: 'noopener noreferrer' })}
                    className={`text-[11px] xl:text-sm font-semibold uppercase tracking-wide transition-colors whitespace-nowrap px-1 xl:px-2 ${!showSolidBackground
                      ? 'text-white hover:text-brand-accent'
                      : 'text-brand-text hover:text-brand-primary'
                      }`}
                  >
                    {link.name}
                  </a>
                ))}
              </div>
            </div>

            {/* Center - Logo (perfectly centered, no overlap) */}
            <div className="flex items-center justify-center shrink-0 px-2">
              <a href={`/${language}`} className="flex items-center">
                <img
                  src={imageUrls.logo.black}
                  alt="Kevin Victor Real Estate"
                  className={`h-7 xl:h-8 2xl:h-9 w-auto transition-all ${!showSolidBackground ? 'brightness-0 invert' : ''
                    }`}
                />
              </a>
            </div>

            {/* Right - Language + Social + CTA (overflow-visible para que el dropdown de idioma no se recorte) */}
            <div className="flex items-center justify-end gap-2 xl:gap-4 min-w-0 overflow-visible">
              <LanguageSelector scrolled={showSolidBackground} />
              <div className="flex items-center gap-1.5 xl:gap-3">
                <a
                  href="https://www.facebook.com/kevinvictor.realestate"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`transition-colors ${!showSolidBackground
                    ? 'text-white hover:text-brand-accent'
                    : 'text-brand-darkGreen hover:text-brand-primary'
                    }`}
                  aria-label="Facebook"
                >
                  <Facebook size={18} />
                </a>
                <a
                  href="https://www.instagram.com/kevinvictor.realestate/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`transition-colors ${!showSolidBackground
                    ? 'text-white hover:text-brand-accent'
                    : 'text-brand-darkGreen hover:text-brand-primary'
                    }`}
                  aria-label="Instagram"
                >
                  <Instagram size={18} />
                </a>
                <a
                  href="https://www.youtube.com/@KEVINVICTOR.REALESTATE"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`transition-colors ${!showSolidBackground
                    ? 'text-white hover:text-brand-accent'
                    : 'text-brand-darkGreen hover:text-brand-primary'
                    }`}
                  aria-label="YouTube"
                >
                  <Youtube size={18} />
                </a>
              </div>
              <a
                href={`/${language}/contact`}
                className={`px-3 xl:px-5 py-2 text-[11px] xl:text-sm uppercase tracking-wide font-semibold rounded-lg border-2 transition-all whitespace-nowrap shrink-0 ${!showSolidBackground
                  ? 'border-white text-white hover:bg-white/10'
                  : 'border-brand-darkGreen text-brand-darkGreen hover:border-brand-primary hover:text-brand-primary'
                  }`}
              >
                {getTranslation(language, 'contact.contactKevin')}
              </a>
            </div>
          </div>

          {/* Mobile / Tablet: Logo + Hamburger (below xl) */}
          <div className="xl:hidden flex items-center justify-center flex-1 min-w-0">
            <a href={`/${language}`} className="flex items-center">
              <img
                src={imageUrls.logo.black}
                alt="Kevin Victor Real Estate"
                className={`h-6 sm:h-7 w-auto transition-all ${!showSolidBackground ? 'brightness-0 invert' : ''
                  }`}
              />
            </a>
          </div>

          {/* Mobile / Tablet: Right - Hamburger menu */}
          <div className="xl:hidden flex items-center shrink-0">
            <button
              className="p-2 -mr-2"
              onClick={() => setIsMenuOpen(true)}
              aria-label="Open menu"
            >
              <Menu
                size={24}
                className={!showSolidBackground ? 'text-white' : 'text-black'}
              />
            </button>
          </div>

        </div>
      </div>

      {/* Mobile Menu */}
      <div
        className={`fixed top-0 left-0 w-full h-screen bg-white z-[60] flex flex-col transition-all duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
          }`}
        style={{ transitionProperty: 'opacity, visibility' }}
      >
        {/* Mobile Menu Header with white background */}
        <div className="bg-white border-b border-brand-accent/20 py-3 px-4 sm:px-6 flex items-center justify-between">
          <a href={`/${language}`} className="flex items-center">
            <img
              src={imageUrls.logo.black}
              alt="Kevin Victor Real Estate"
              className="h-6 sm:h-7 w-auto"
            />
          </a>
          <button
            className="p-2"
            onClick={() => setIsMenuOpen(false)}
            aria-label="Close menu"
          >
            <X size={28} className="text-black" />
          </button>
        </div>

        <div className="flex flex-col items-center justify-center flex-1 px-6 py-12 sm:py-20 space-y-6 overflow-y-auto">
          {/* Language switcher - arriba de las opciones en móvil */}
          <div className="mb-4 sm:mb-6">
            <LanguageSelector scrolled={true} />
          </div>
          {navLinks.slice(0, 3).map((link, index) => (
            <a
              key={link.name}
              href={link.href}
              {...(link.external && { target: '_blank', rel: 'noopener noreferrer' })}
              className="text-xl sm:text-2xl md:text-3xl font-bold uppercase tracking-tight text-brand-text hover:text-brand-primary transition-colors"
              onClick={() => setIsMenuOpen(false)}
              style={{
                animation: isMenuOpen ? `fadeInUp 0.3s ease-out ${index * 0.1}s both` : 'none'
              }}
            >
              {link.name}
            </a>
          ))}
          {/* Properties submenu - mobile */}
          <div className="flex flex-col items-center gap-3" style={{ animation: isMenuOpen ? 'fadeInUp 0.3s ease-out 0.3s both' : 'none' }}>
            <span className="text-sm font-semibold uppercase tracking-widest text-brand-primary/80">
              {getTranslation(language, 'nav.properties')}
            </span>
            {propertiesSubmenu.map((item) => (
              <a
                key={item.name}
                href={item.href}
                className="text-lg sm:text-xl font-bold uppercase tracking-tight text-brand-text hover:text-brand-primary transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                {item.name}
              </a>
            ))}
          </div>
          {navLinks.slice(3).map((link, index) => (
            <a
              key={link.name}
              href={link.href}
              {...(link.external && { target: '_blank', rel: 'noopener noreferrer' })}
              className="text-xl sm:text-2xl md:text-3xl font-bold uppercase tracking-tight text-brand-text hover:text-brand-primary transition-colors"
              onClick={() => setIsMenuOpen(false)}
              style={{
                animation: isMenuOpen ? `fadeInUp 0.3s ease-out ${(index + 4) * 0.1}s both` : 'none'
              }}
            >
              {link.name}
            </a>
          ))}
          <a
            href={`/${language}/contact`}
            className="mt-4 bg-brand-primary text-white px-8 py-4 text-base uppercase tracking-wide font-semibold rounded-lg hover:bg-brand-darkGreen transition-colors"
            onClick={() => setIsMenuOpen(false)}
          >
            {getTranslation(language, 'contact.contactKevin')}
          </a>
        </div>
      </div>
    </nav>
  )
}