import { Link, useNavigate } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import { API_BASE, type Category, type StoreSettings } from '../types'
import { ShoppingBag, Menu as MenuIcon, X, Heart, Globe, Check } from 'lucide-react'
import { useCartStore } from '../store/cartStore'
import { useWishlistStore } from '../store/wishlistStore'
import { useAuthStore } from '../store/authStore'
import { logoutLiff, loginLiff } from '../lib/liff'
import { useTranslation } from 'react-i18next'
import { useMediaQuery } from '../hooks/useMediaQuery'
import { DesktopMegaMenu } from './DesktopMegaMenu'
import { MobileDrawer } from './MobileDrawer'
import { useMenuStore } from '../store/menuStore'

interface NavbarProps {
  categories?: Category[]
  topOffsetClassName?: string
}

export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
  const isDesktop = useMediaQuery('(min-width: 768px)')
  
  const [searchOpen, setSearchOpen] = useState(false)
  const [mobileOpen, setMobileOpen] = useState(false)
  const [langSheetOpen, setLangSheetOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  const [scrolled, setScrolled] = useState(false)
  const [hasAnnouncement, setHasAnnouncement] = useState(false)
  const [settings, setSettings] = useState<StoreSettings | null>(null)
  const navigate = useNavigate()
  
  const { toggleCart, getCartCount } = useCartStore()
  const cartCount = getCartCount()
  const wishlistCount = useWishlistStore(state => state.items.length)
  const { customer } = useAuthStore()
  const { t, i18n } = useTranslation()
  
  const { megaMenu, fetchMegaMenu } = useMenuStore()
  const navRef = useRef<HTMLElement>(null)

  const LANGUAGES = [
    { code: 'th', label: 'ไทย', short: 'TH' },
    { code: 'en', label: 'English', short: 'EN' },
    { code: 'ja', label: '日本語', short: 'JP' },
    { code: 'zh', label: '简体中文', short: 'ZH' },
    { code: 'vi', label: 'Tiếng Việt', short: 'VN' },
    { code: 'ko', label: '한국어', short: 'KO' },
  ]

  const changeLanguage = (code: string) => {
    i18n.changeLanguage(code)
    localStorage.setItem('homaroma_lang', code)
    setLangSheetOpen(false)
  }

  useEffect(() => {
    fetchMegaMenu()
    
    const checkAnnouncement = () => {
      const el = document.querySelector('.announcement-bar')
      setHasAnnouncement(!!el)
    }
    checkAnnouncement()
    const timer = setTimeout(checkAnnouncement, 300)

    const onScroll = () => {
      setScrolled(window.scrollY > 20)
      checkAnnouncement()
    }
    window.addEventListener('scroll', onScroll, { passive: true })
    
    return () => {
      window.removeEventListener('scroll', onScroll)
      clearTimeout(timer)
    }
  }, [fetchMegaMenu])

  useEffect(() => {
    fetch(`${API_BASE}/settings`)
      .then((response) => (response.ok ? response.json() : null))
      .then((data: StoreSettings | null) => {
        if (data) setSettings(data)
      })
      .catch((error) => console.error('Failed to fetch store settings', error))
  }, [])

  // Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
  useEffect(() => {
    let animationFrameId: number;
    const navElement = navRef.current;

    const updateNavBottom = () => {
      if (navElement) {
        const bottom = navElement.getBoundingClientRect().bottom
        document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
      }
    }
    
    updateNavBottom()
    
    window.addEventListener('scroll', updateNavBottom, { passive: true })
    window.addEventListener('resize', updateNavBottom)

    const observer = new ResizeObserver(() => {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = requestAnimationFrame(updateNavBottom);
    });

    if (navElement) {
      observer.observe(navElement);
      navElement.addEventListener('transitionend', updateNavBottom);
    }
    observer.observe(document.body);

    return () => {
      window.removeEventListener('scroll', updateNavBottom)
      window.removeEventListener('resize', updateNavBottom)
      observer.disconnect()
      if (navElement) {
        navElement.removeEventListener('transitionend', updateNavBottom);
      }
      cancelAnimationFrame(animationFrameId);
    }
  }, [topOffsetClassName])

  useEffect(() => { setMobileOpen(false) }, [navigate])
  useEffect(() => {
    document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [searchOpen, mobileOpen, langSheetOpen])

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
      setSearchOpen(false)
      setMobileOpen(false)
      setSearchQuery('')
    }
  }

  const computedOffset = topOffsetClassName !== 'top-0' 
    ? topOffsetClassName 
    : (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')

  const finalTopClassName = scrolled ? 'top-0' : computedOffset
  const brandName = settings?.brandName || ''

  return (
    <>
      <nav
        ref={navRef}
        className={`fixed ${finalTopClassName} w-full z-50 transition-all duration-300 border-b border-black/5 ${
          scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none'
        } bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none px-4 md:px-6 py-3.5 md:py-4`}
      >
        {/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}
        <div className="w-full flex items-center justify-between gap-4">

          {/* Left: Logo */}
          <div className="flex items-center shrink-0">
            <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-spa-forest uppercase italic shrink-0">
              {brandName}
            </Link>
          </div>

          {/* Center: Desktop mega menu */}
          {isDesktop && (
            <div className="flex-1 flex justify-center">
              <DesktopMegaMenu items={megaMenu} />
            </div>
          )}

          {/* Right: Actions */}
          <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
            {/* Search — desktop & mobile */}
            <button
              onClick={() => { setSearchOpen(true); setMobileOpen(false); }}
              className="p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
              aria-label="Search"
            >
              <svg className="w-4 h-4 group-hover:text-spa-forest transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </button>

            <Link
              to="/wishlist"
              onClick={() => setMobileOpen(false)}
              className="relative p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
              aria-label="Wishlist"
            >
              <Heart className="w-4 h-4 group-hover:text-rose-500 transition-colors" />
              {wishlistCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
                  {wishlistCount}
                </span>
              )}
            </Link>

            <button
              onClick={() => { toggleCart(true); setMobileOpen(false); }}
              className="relative p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
              aria-label="Cart"
            >
              <ShoppingBag className="w-4 h-4 group-hover:text-spa-forest transition-colors" />
              {cartCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
                  {cartCount}
                </span>
              )}
            </button>

            {isDesktop && (
              <>
                <div className="relative group flex items-center">
                  <button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-spa-forest border border-spa-forest/30 hover:bg-spa-sage bg-white flex items-center gap-1.5 uppercase tracking-wider">
                    <Globe className="w-3.5 h-3.5" strokeWidth={1.5} />
                    {LANGUAGES.find(l => i18n.language.startsWith(l.code))?.short || 'TH'}
                  </button>
                  <div className="absolute top-full right-0 pt-2 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
                    <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-2xl p-1.5 space-y-0.5">
                      {LANGUAGES.map(lang => {
                        const isActive = i18n.language.startsWith(lang.code)
                        return (
                          <button
                            key={lang.code}
                            onClick={() => changeLanguage(lang.code)}
                            className={`w-full flex items-center justify-between px-3 py-2.5 text-xs rounded-lg transition-colors font-medium ${isActive ? 'text-spa-forest bg-spa-sage/60 font-bold' : 'text-spa-stone hover:bg-spa-light hover:text-spa-forest'}`}
                          >
                            <span>{lang.label}</span>
                            {isActive && <Check className="w-3.5 h-3.5" />}
                          </button>
                        )
                      })}
                    </div>
                  </div>
                </div>

                {customer ? (
                  <div className="relative group flex items-center ml-1">
                    <Link to="/profile">
                      <img
                        src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
                        alt="Profile"
                        className="w-9 h-9 rounded-full border-2 border-spa-forest/30 cursor-pointer object-cover animate-fade-in"
                      />
                    </Link>
                    <div className="absolute top-full right-0 pt-3 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
                      <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-xl p-1">
                        <div className="px-3 py-2 border-b border-spa-stone/10 mb-1">
                          <p className="text-[10px] text-spa-stone/60 uppercase tracking-widest leading-tight truncate">{t('nav.signedInAs', 'Signed in as')}</p>
                          <p className="text-xs text-spa-forest font-bold truncate">{customer.displayName}</p>
                        </div>
                        <Link
                          to="/profile"
                          className="block px-3 py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest hover:bg-spa-light rounded-lg transition-colors font-bold"
                        >
                          My Profile
                        </Link>
                        <button
                          onClick={logoutLiff}
                          className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors font-bold"
                        >
                          {t('nav.logout', 'Logout')}
                        </button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <button
                    onClick={loginLiff}
                    className="ml-2 px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest bg-[#00B900] text-white hover:bg-[#009900] transition-all duration-300 shadow-sm"
                  >
                    {t('nav.login', 'LINE Login')}
                  </button>
                )}
              </>
            )}

            {!isDesktop && (
              <button
                onClick={() => setMobileOpen(prev => !prev)}
                className="p-1.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all"
                aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
              >
                {mobileOpen ? <X className="w-5 h-5" /> : <MenuIcon className="w-5 h-5" />}
              </button>
            )}
          </div>
        </div>
      </nav>

      {!isDesktop && (
        <MobileDrawer 
          isOpen={mobileOpen} 
          onClose={() => setMobileOpen(false)} 
          items={megaMenu} 
          onOpenLang={() => setLangSheetOpen(true)}
        />
      )}

      {searchOpen && (
        <div
          className="fixed inset-0 z-[100] bg-spa-light/97 backdrop-blur-xl flex flex-col items-center pt-24 md:pt-32 px-4 md:px-6"
          onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
        >
          <div className="w-full max-w-2xl space-y-6 animate-fade-in">
            <div className="flex justify-between items-center">
              <p className="text-spa-stone text-xs uppercase tracking-widest font-semibold">{t('nav.search.title')}</p>
              <button onClick={() => setSearchOpen(false)} className="p-2 rounded-full hover:bg-spa-sage transition-all text-spa-stone">
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <form onSubmit={handleSearch}>
              <div className="flex bg-white border-2 border-spa-stone/20 focus-within:border-spa-forest rounded-2xl overflow-hidden transition-colors shadow-sm">
                <svg className="w-5 h-5 text-spa-stone/50 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="ค้นหากลิ่น, หมวดหมู่..."
                  className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-spa-forest placeholder-spa-stone/40"
                  autoFocus
                />
                <button type="submit" className="bg-spa-forest text-white px-4 md:px-6 font-bold text-xs uppercase tracking-widest shrink-0 hover:bg-spa-stone transition-colors">
                  Go
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      <div
        className={`fixed inset-0 z-[110] md:hidden transition-all duration-300 ${langSheetOpen ? 'visible' : 'invisible'}`}
      >
        <div
          className={`absolute inset-0 bg-spa-stone/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
          onClick={() => setLangSheetOpen(false)}
        />
        <div
          className={`absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe ${langSheetOpen ? 'translate-y-0' : 'translate-y-full'}`}
        >
          <div className="flex justify-center pt-3 pb-1">
            <div className="w-12 h-1.5 bg-spa-stone/20 rounded-full" />
          </div>
          <div className="px-6 pb-6 pt-2">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-sm font-bold uppercase tracking-widest text-spa-forest flex items-center gap-2">
                <Globe className="w-4 h-4" />
                Select Language
              </h3>
              <button onClick={() => setLangSheetOpen(false)} className="p-2 rounded-full hover:bg-spa-sage text-spa-stone">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="space-y-1">
              {LANGUAGES.map(lang => {
                const isActive = i18n.language.startsWith(lang.code)
                return (
                  <button
                    key={lang.code}
                    onClick={() => changeLanguage(lang.code)}
                    className={`w-full flex items-center justify-between px-4 py-4 rounded-xl transition-colors font-medium border border-transparent ${isActive ? 'bg-spa-sage border-spa-forest/20 text-spa-forest font-bold' : 'bg-spa-light/50 text-spa-stone hover:bg-spa-light'}`}
                  >
                    <span className="text-base">{lang.label}</span>
                    {isActive && <Check className="w-5 h-5" />}
                  </button>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}