'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Menu, X, Globe, ArrowRight, ShoppingBag, LogIn } from 'lucide-react'
import { useTranslations, useLocale } from 'next-intl'
import api from '@/lib/api'
import { SiteSettings, t as tl, isChinese } from '@/types'
import type { Locale } from '@/types'

const localeLabels: Record<string, string> = { en: 'EN', zh: '繁體', sc: '简体' }
const localeOrder: string[] = ['en', 'zh', 'sc']

type MegaId = 'services' | 'about' | 'golfId' | null

const resolveImage = (src?: string) => {
  if (!src) return undefined
  if (src.startsWith('http')) return src
  const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api'
  return `${base.replace(/\/api$/, '')}${src}`
}

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [activeMega, setActiveMega] = useState<MegaId>(null)
  const [mobileExpanded, setMobileExpanded] = useState<MegaId>(null)
  const [mounted, setMounted] = useState(false)
  const [settings, setSettings] = useState<SiteSettings | null>(null)
  const [isLangOpen, setIsLangOpen] = useState(false)
  const langRef = useRef<HTMLDivElement>(null)
  const headerRef = useRef<HTMLDivElement>(null)
  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const displayedPanel = useRef<MegaId>(null)
  const tNav = useTranslations('nav')
  const tServices = useTranslations('services')
  const tAbout = useTranslations('about')
  const tGolfId = useTranslations('golfId')
  const locale = useLocale()
  const pathname = usePathname()

  if (activeMega) displayedPanel.current = activeMega
  const panelId = activeMega || displayedPanel.current

  useEffect(() => {
    setMounted(true)
    api.getSettings().then(setSettings).catch(() => {})
  }, [])

  useEffect(() => {
    setActiveMega(null)
    setIsMenuOpen(false)
    setMobileExpanded(null)
  }, [pathname])

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (headerRef.current && !headerRef.current.contains(e.target as Node)) {
        setActiveMega(null)
      }
    }
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setActiveMega(null)
    }
    if (activeMega) {
      document.addEventListener('mousedown', handleClickOutside)
      document.addEventListener('keydown', handleEscape)
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
      document.removeEventListener('keydown', handleEscape)
    }
  }, [activeMega])

  useEffect(() => {
    return () => {
      if (leaveTimer.current) clearTimeout(leaveTimer.current)
    }
  }, [])

  useEffect(() => {
    if (!isLangOpen) return
    const handleClick = (e: MouseEvent) => {
      if (langRef.current && !langRef.current.contains(e.target as Node)) setIsLangOpen(false)
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [isLangOpen])

  const openMega = useCallback((id: MegaId) => {
    if (leaveTimer.current) { clearTimeout(leaveTimer.current); leaveTimer.current = null }
    setActiveMega(id)
  }, [])

  const startLeaveTimer = useCallback(() => {
    if (leaveTimer.current) clearTimeout(leaveTimer.current)
    leaveTimer.current = setTimeout(() => { setActiveMega(null); leaveTimer.current = null }, 200)
  }, [])

  const cancelLeaveTimer = useCallback(() => {
    if (leaveTimer.current) { clearTimeout(leaveTimer.current); leaveTimer.current = null }
  }, [])

  const localeHref = (target: string) => {
    const pathWithoutLocale = pathname.replace(/^\/(en|zh|sc)/, '')
    return `/${target}${pathWithoutLocale}`
  }

  const lp = (path: string) => `/${locale}${path}`

  const toggleMega = (id: MegaId) => {
    setActiveMega((prev) => (prev === id ? null : id))
  }

  const closeMega = () => setActiveMega(null)

  const navLabel = (key: string, fallbackKey: string) => {
    const override = settings?.navigation?.navLabels?.[key as keyof NonNullable<NonNullable<SiteSettings['navigation']>['navLabels']>]
    const val = override ? tl(override, locale as Locale) : ''
    return val || tNav(fallbackKey)
  }

  const navItems: Array<{ name: string; href: string; megaId?: MegaId; external?: boolean }> = [
    { name: navLabel('home', 'home'), href: lp('/') },
    { name: navLabel('about', 'about'), href: '#', megaId: 'about' },
    { name: navLabel('services', 'services'), href: '#', megaId: 'services' },
    { name: navLabel('eventGallery', 'eventGallery'), href: lp('/event-gallery') },
    { name: navLabel('golfId', 'golfId'), href: '#', megaId: 'golfId' },
  ]

  const serviceLinks = [
    { name: tNav('servicesDropdown.academy'), href: lp('/services/golf-academy') },
    { name: tNav('servicesDropdown.booking'), href: lp('/services/book-lessons') },
    { name: tNav('servicesDropdown.events'), href: lp('/services/events') },
    { name: tNav('servicesDropdown.fund'), href: lp('/services/golf-development-fund') },
  ]

  const aboutLinks = [
    { name: tNav('aboutDropdown.news'), href: lp('/news') },
    { name: tNav('aboutDropdown.partners'), href: lp('/partners') },
    { name: tNav('aboutDropdown.contact'), href: lp('/contact') },
    { name: tNav('aboutDropdown.privacy'), href: lp('/privacy') },
  ]

  const golfIdLinks = [
    { name: tNav('golfIdDropdown.enjoy'), href: 'https://golfid.com.hk/member', external: true },
    { name: tNav('golfIdDropdown.upgrade'), href: 'https://golfid.com.hk/register', external: true },
    { name: tNav('golfIdDropdown.membershipOffers'), href: lp('/golf-id/membership-offers') },
    { name: tNav('golfIdDropdown.upgradeOffers'), href: lp('/golf-id/upgrade-offers') },
    { name: tNav('golfIdDropdown.memberRewards'), href: lp('/golf-id/member-rewards') },
    { name: tNav('golfIdDropdown.bonusPoints'), href: lp('/golf-id/bonus-points') },
  ]

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

  const megaPanels: Record<string, { title: string; titleHref: string; description: string; links: MegaLink[] }> = {
    services: {
      title: tServices('pageTitle'),
      titleHref: lp('/services'),
      description: tServices('pageDescription'),
      links: serviceLinks,
    },
    about: {
      title: tAbout('title'),
      titleHref: lp('/about'),
      description: tAbout('description'),
      links: aboutLinks,
    },
    golfId: {
      title: tGolfId('title'),
      titleHref: lp('/golf-id'),
      description: tGolfId('subtitle'),
      links: golfIdLinks,
    },
  }

  const isOpen = !!activeMega
  const panel = panelId ? megaPanels[panelId] : null
  const promoKey = panelId as 'services' | 'about' | 'golfId' | null
  const promo = promoKey ? settings?.navigation?.megaMenuPromos?.[promoKey] : undefined
  const promoImage = resolveImage(promo?.image)
  const promoTitle = promo?.title ? tl(promo.title, locale as Locale) : ''
  const promoLink = promo?.link

  const renderNav = (isPlaceholder = false) => (
    <header className="sticky top-0 z-50" ref={!isPlaceholder ? headerRef : undefined}>
      {/* Backdrop overlay */}
      <div
        className={`fixed inset-0 bg-black/30 transition-opacity duration-300 z-40 ${
          isOpen && !isPlaceholder ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
        onClick={closeMega}
      />

      {/* Utility bar */}
      <div className="relative z-[51] bg-secondary-900 text-white hidden lg:block">
        <div className="max-w-7xl mx-auto container-padding">
          <div className="flex items-center justify-end h-9 gap-5 text-xs">
            <a
              href="https://golfid.com.hk/login"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-1.5 text-gray-300 hover:text-white transition-colors"
            >
              <LogIn className="h-3.5 w-3.5" />
              {tNav('loginActivate')}
            </a>
            <Link
              href={lp('/services/eshop')}
              className="flex items-center gap-1.5 text-gray-300 hover:text-white transition-colors"
            >
              <ShoppingBag className="h-3.5 w-3.5" />
              {tNav('eshopLabel')}
            </Link>
            <div className="relative z-[60]" ref={!isPlaceholder ? langRef : undefined}>
              <button
                type="button"
                onClick={() => !isPlaceholder && setIsLangOpen((v) => !v)}
                className="flex items-center gap-1.5 text-gray-300 hover:text-white transition-colors"
              >
                <Globe className="h-3.5 w-3.5" />
                {localeLabels[locale] || 'EN'}
              </button>
              {isLangOpen && !isPlaceholder && (
                <div className="absolute right-0 top-full mt-1 bg-white rounded-md shadow-xl border border-gray-200 py-1 min-w-[110px] z-[60]">
                  {localeOrder.filter((l) => l !== locale).map((l) => (
                    <Link
                      key={l}
                      href={localeHref(l)}
                      onClick={() => setIsLangOpen(false)}
                      className="block px-4 py-2 text-sm text-secondary-700 hover:bg-gray-100 hover:text-primary-600 transition-colors"
                    >
                      {localeLabels[l]}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Main nav + mega panel wrapper — hover zone */}
      <div
        className="relative z-50 bg-white"
        onMouseLeave={!isPlaceholder ? startLeaveTimer : undefined}
        onMouseEnter={!isPlaceholder ? cancelLeaveTimer : undefined}
      >
        <div className="border-b border-gray-100">
          <div className="max-w-7xl mx-auto container-padding">
            {/* Desktop: two-layer layout */}
            <div className="hidden lg:block">
              <div className="relative flex items-center justify-between py-4">
                <div className="flex-shrink-0">
                  <Link href={lp('/')} className="flex items-center">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/logo.png`} alt="GLG - Golf Lifestyle Group" className="h-10 w-auto" />
                  </Link>
                </div>

                <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-4">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/egolf-id.avif`}
                    alt="eGolf ID"
                    className="h-12 w-auto rounded-md shadow-md"
                  />
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/golf-id-2.avif`}
                    alt="Golf ID"
                    className="h-12 w-auto rounded-md shadow-md"
                  />
                </div>

                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/glg-icon.avif`} alt="GLG" className="h-10 w-auto rounded-full" />
              </div>

              <div className="flex justify-center border-t border-gray-100">
                <nav className="flex items-center space-x-1">
                  {navItems.map((item) =>
                    item.megaId ? (
                      <button
                        key={item.name}
                        onMouseEnter={() => !isPlaceholder && openMega(item.megaId!)}
                        onClick={() => !isPlaceholder && toggleMega(item.megaId!)}
                        className={`text-sm font-medium transition-all whitespace-nowrap px-5 py-3 border-b-2 ${
                          activeMega === item.megaId
                            ? 'text-primary-600 border-primary-600'
                            : 'text-secondary-600 hover:text-primary-600 border-transparent'
                        }`}
                      >
                        {item.name}
                      </button>
                    ) : (
                      <Link
                        key={item.name}
                        href={item.href}
                        className="text-secondary-600 hover:text-primary-600 px-5 py-3 text-sm font-medium transition-colors whitespace-nowrap border-b-2 border-transparent"
                      >
                        {item.name}
                      </Link>
                    )
                  )}
                </nav>
              </div>
            </div>

            {/* Mobile: single-row layout with logo + hamburger */}
            <div className="flex justify-between items-center h-20 lg:hidden">
              <div className="flex-shrink-0">
                <Link href={lp('/')} className="flex items-center">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/logo.png`} alt="GLG - Golf Lifestyle Group" className="h-10 w-auto" />
                </Link>
              </div>

              <div>
                {isPlaceholder ? (
                  <button className="text-secondary-700 hover:text-primary-600 focus:outline-none p-2">
                    <Menu className="h-6 w-6" />
                  </button>
                ) : (
                  <button
                    onClick={() => { setIsMenuOpen(!isMenuOpen); setActiveMega(null) }}
                    className="text-secondary-700 hover:text-primary-600 focus:outline-none p-2"
                  >
                    {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Mega menu panel — always rendered, animated via CSS */}
        {!isPlaceholder && (
          <div
            className={`hidden lg:block border-t border-gray-100 bg-white overflow-hidden transition-all duration-300 ease-in-out ${
              isOpen ? 'max-h-[500px] opacity-100 shadow-lg' : 'max-h-0 opacity-0'
            }`}
          >
            {panel && panelId && (
              <div className="max-w-7xl mx-auto container-padding py-10">
                <div className="flex justify-between items-start gap-10">
                  <div className="flex-1">
                    <Link
                      href={panel.titleHref}
                      onClick={closeMega}
                      className={`inline-flex items-center text-xl font-bold text-secondary-900 hover:text-primary-600 transition-all mb-2 ${
                        isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-1'
                      }`}
                      style={{ transitionDelay: '50ms', transitionDuration: '300ms' }}
                    >
                      {panel.title}
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                    <p
                      className={`text-secondary-500 mb-8 max-w-md text-sm transition-all ${
                        isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-1'
                      }`}
                      style={{ transitionDelay: '80ms', transitionDuration: '300ms' }}
                    >
                      {panel.description}
                    </p>
                    <div className="grid grid-cols-2 gap-x-12 gap-y-0.5">
                      {panel.links.map((link, idx) => {
                        const linkClass = `flex items-center gap-2 py-2.5 text-sm font-medium text-secondary-700 hover:text-primary-600 transition-all group ${
                          isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1'
                        }`
                        const linkStyle = { transitionDelay: `${100 + idx * 40}ms`, transitionDuration: '300ms' }

                        return link.external ? (
                          <a
                            key={link.name}
                            href={link.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={closeMega}
                            className={linkClass}
                            style={linkStyle}
                          >
                            {link.name}
                            <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
                          </a>
                        ) : (
                          <Link
                            key={link.name}
                            href={link.href}
                            onClick={closeMega}
                            className={linkClass}
                            style={linkStyle}
                          >
                            {link.name}
                            <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
                          </Link>
                        )
                      })}
                    </div>
                  </div>
                  {promoImage && (
                    <Link
                      href={promoLink ? (promoLink.startsWith('http') ? promoLink : lp(promoLink)) : '#'}
                      onClick={closeMega}
                      className={`hidden xl:block w-64 flex-shrink-0 group transition-all duration-300 ${
                        isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
                      }`}
                      style={{ transitionDelay: '150ms' }}
                    >
                      <div className="relative rounded-lg overflow-hidden">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={promoImage}
                          alt={promoTitle || ''}
                          className="w-full aspect-[4/3] object-cover group-hover:scale-[1.03] transition-transform duration-200"
                        />
                        {promoTitle && (
                          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <span className="text-white text-sm font-semibold leading-snug line-clamp-2">
                              {promoTitle}
                            </span>
                          </div>
                        )}
                      </div>
                    </Link>
                  )}
                  <button
                    onClick={closeMega}
                    className="p-2 text-secondary-400 hover:text-secondary-700 transition-colors"
                    aria-label="Close"
                  >
                    <X className="h-5 w-5" />
                  </button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Mobile menu */}
      {!isPlaceholder && isMenuOpen && (
        <div className="lg:hidden relative z-50 bg-white">
          <div className="px-4 pt-3 pb-4 space-y-1 bg-white border-t border-gray-100">
            {navItems.map((item) =>
              item.megaId ? (
                <div key={item.name}>
                  <button
                    onClick={() => setMobileExpanded((prev) => (prev === item.megaId ? null : item.megaId!))}
                    className="w-full text-left block px-4 py-3 text-base font-medium text-secondary-700 hover:text-primary-600 hover:bg-gray-50 rounded-lg"
                  >
                    {item.name}
                  </button>
                  {mobileExpanded === item.megaId && (
                    <div className="ml-4 space-y-0.5 mb-2">
                      {(megaPanels[item.megaId!]?.links ?? []).map((link) =>
                        link.external ? (
                          <a
                            key={link.name}
                            href={link.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="block px-4 py-2.5 text-sm text-secondary-600 hover:text-primary-600 hover:bg-gray-50 rounded-lg"
                            onClick={() => setIsMenuOpen(false)}
                          >
                            {link.name}
                          </a>
                        ) : (
                          <Link
                            key={link.name}
                            href={link.href}
                            className="block px-4 py-2.5 text-sm text-secondary-600 hover:text-primary-600 hover:bg-gray-50 rounded-lg"
                            onClick={() => setIsMenuOpen(false)}
                          >
                            {link.name}
                          </Link>
                        )
                      )}
                    </div>
                  )}
                </div>
              ) : (
                <Link
                  key={item.name}
                  href={item.href}
                  className="block px-4 py-3 text-base font-medium text-secondary-700 hover:text-primary-600 hover:bg-gray-50 rounded-lg"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {item.name}
                </Link>
              )
            )}
            <div className="pt-4 pb-2 space-y-3 border-t border-gray-100 mt-2">
              <a
                href="https://golfid.com.hk/login"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 px-4 py-2 text-sm text-secondary-600"
                onClick={() => setIsMenuOpen(false)}
              >
                <LogIn className="h-4 w-4" />
                {tNav('loginActivate')}
              </a>
              <div className="flex items-center gap-3 px-4 py-2">
                <Globe className="h-4 w-4 text-secondary-500" />
                {localeOrder.filter((l) => l !== locale).map((l) => (
                  <Link
                    key={l}
                    href={localeHref(l)}
                    onClick={() => setIsMenuOpen(false)}
                    className="text-sm text-secondary-500 hover:text-primary-600 transition-colors"
                  >
                    {localeLabels[l]}
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  )

  if (!mounted) return renderNav(true)
  return renderNav(false)
}

export default Header