'use client'
import { Suspense, useState, useRef, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { ArrowUpRightIcon, CheckIcon, CloseIcon, DownArrowIcon, MenuIcon } from '@/app/assets/svg/icon'
import { Text } from '@/components/ui'
import { Button } from '@/components/ui/button'
import { LocalizedLink } from '@/components/localized-link'
import { Sheet, SheetClose, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import { cn } from '@/lib/utils'
import type { HeaderFields } from '@/types/settings'

const defaultLanguages = [
  { code: 'EN', shortLabel: 'EN', apiCode: null },
  { code: 'DR', shortLabel: 'دری', apiCode: 'dr' },
  { code: 'PS', shortLabel: 'پښتو', apiCode: 'ps' },
] as const

const LANGUAGE_SWITCH_DELAY = 150

type Language = {
  code: (typeof defaultLanguages)[number]['code']
  shortLabel: (typeof defaultLanguages)[number]['shortLabel']
  label: string
  apiCode: (typeof defaultLanguages)[number]['apiCode']
}

function getLanguages(languageNameList: HeaderFields['language_name_list'] = []): Language[] {
  return defaultLanguages.map((language, index) => ({
    ...language,
    label: languageNameList[index]?.language_name_single?.trim() || language.shortLabel,
  }))
}

function isColorDark(color: string): boolean {
  const match = color.match(/[\d.]+/g)

  if (!match) return false

  const [red, green, blue] = match.map(Number)

  return (red * 299 + green * 587 + blue * 114) / 1000 < 128
}

function isNonTransparent(color: string): boolean {
  if (!color || color === 'transparent') return false

  const rgba = color.match(/[\d.]+/g)

  if (!rgba) return false
  if (rgba.length === 4 && Number.parseFloat(rgba[3]) === 0) return false

  return true
}

function isDarkFromGradient(backgroundImage: string): boolean | null {
  const colors = [...backgroundImage.matchAll(/rgba?\([\d.,\s]+\)/g)].map(match => match[0])

  if (!colors.length) return null

  const nonTransparent = colors.filter(isNonTransparent)

  if (!nonTransparent.length) return null

  return nonTransparent.some(isColorDark)
}

function getElementBackgroundDark(element: Element | null): boolean {
  let currentElement = element

  while (currentElement && currentElement !== document.documentElement) {
    const styles = window.getComputedStyle(currentElement)
    const gradientIsDark = isDarkFromGradient(styles.backgroundImage)

    if (gradientIsDark !== null) return gradientIsDark
    if (isNonTransparent(styles.backgroundColor)) return isColorDark(styles.backgroundColor)

    currentElement = currentElement.parentElement
  }

  return isColorDark(window.getComputedStyle(document.body).backgroundColor)
}

function HeaderLogo({ image }: { image?: HeaderFields['logo_dark'] }) {
  const width = Number(image?.width)
  const height = Number(image?.height)

  if (!image?.url || width <= 0 || height <= 0) return null

  return (
    <Image
      src={image.url}
      alt={image.alt || 'Payseypay'}
      width={width}
      height={height}
      className='h-auto w-[209px] sm:w-[222px]'
      priority
      unoptimized={image.url.endsWith('.svg')}
    />
  )
}

interface LanguageDropdownProps {
  dark?: boolean
  languages: Language[]
  selected: Language
  onSelect: (language: Language) => void
}

const LanguageDropdown = ({ dark, languages, selected, onSelect }: LanguageDropdownProps) => {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handler = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false)
    }

    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  return (
    <div className='relative z-[70]' ref={ref}>
      <button type='button' onClick={() => setOpen(value => !value)} className='flex cursor-pointer items-center gap-1'>
        <Text size='body' className={cn('font-bold', dark ? 'text-[#1a1a1a]' : 'text-white')} textKey={selected.shortLabel} />
        <DownArrowIcon color={dark ? 'black' : undefined} />
      </button>
      <ul className={`absolute right-0 mt-2 min-w-[160px] rounded-[5px] overflow-hidden bg-white shadow-lg transition-all duration-200 origin-top z-[9999] ${
        open ? 'opacity-100 translate-y-0 pointer-events-auto' : 'opacity-0 translate-y-3 pointer-events-none'
      }`}>
        {languages.map(language => (
          <li key={language.code}>
            <button
              type='button'
              onClick={() => {
                onSelect(language)
                setOpen(false)
              }}
              className={`flex w-full items-center justify-between cursor-pointer px-4 py-3 text-[#1a1a1a] text-base transition ${selected.code === language.code ? 'bg-[#F5F5F5]' : 'hover:bg-[#F5F5F5]'}`}
            >
              {language.label}
              {selected.code === language.code && <CheckIcon />}
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

const LanguageDropdownFallback = ({ dark, languageNameList = [] }: { dark?: boolean; languageNameList?: HeaderFields['language_name_list'] }) => {
  const fallbackLanguage = getLanguages(languageNameList)[0]

  if (!fallbackLanguage) return null

  return (
    <div className='flex items-center gap-1' aria-hidden='true'>
      <Text size='body' className={cn('font-bold', dark ? 'text-[#1a1a1a]' : 'text-white')} textKey={fallbackLanguage.shortLabel} />
      <DownArrowIcon color={dark ? 'black' : undefined} />
    </div>
  )
}

const LanguageSwitcher = ({ dark, languageNameList = [] }: { dark?: boolean; languageNameList?: HeaderFields['language_name_list'] }) => {
  const languages = getLanguages(languageNameList)
  const pathname = usePathname()
  const router = useRouter()
  const searchParams = useSearchParams()
  const activeLang = searchParams.get('lang')
  const selected = languages.find(language => language.apiCode === activeLang) ?? languages[0]

  if (!selected) return null

  const selectLanguage = (language: Language) => {
    if (selected.code === language.code) return

    const params = new URLSearchParams(searchParams.toString())

    if (language.apiCode) {
      params.set('lang', language.apiCode)
    } else {
      params.delete('lang')
    }

    const query = params.toString()
    window.dispatchEvent(new Event('app:loading'))
    window.setTimeout(() => {
      router.replace(`${pathname}${query ? `?${query}` : ''}`, { scroll: false })
    }, LANGUAGE_SWITCH_DELAY)
  }

  return <LanguageDropdown dark={dark} languages={languages} selected={selected} onSelect={selectLanguage} />
}

const LanguageSwitcherWithFallback = ({ dark, languageNameList = [] }: { dark?: boolean; languageNameList?: HeaderFields['language_name_list'] }) => (
  <Suspense fallback={<LanguageDropdownFallback dark={dark} languageNameList={languageNameList} />}>
    <LanguageSwitcher dark={dark} languageNameList={languageNameList} />
  </Suspense>
)

interface HeaderProps {
  fields: HeaderFields | null
}

export const Header = ({ fields }: HeaderProps) => {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [localizedFields, setLocalizedFields] = useState(fields)
  const [hasDarkBackground, setHasDarkBackground] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const headerRef = useRef<HTMLElement>(null)
  const isScrolledRef = useRef(false)
  const activeLang = searchParams.get('lang')
  const navLinks = localizedFields?.header_menu ?? []
  const logo = hasDarkBackground ? localizedFields?.logo_light : localizedFields?.logo_dark

  useEffect(() => {
    let animationFrame = 0

    const updateHeaderState = () => {
      window.cancelAnimationFrame(animationFrame)
      animationFrame = window.requestAnimationFrame(() => {
        const headerHeight = headerRef.current?.offsetHeight ?? 0
        const targetY = Math.min(window.innerHeight - 1, headerHeight + 1)
        const elementBehindHeader = document.elementFromPoint(window.innerWidth / 2, targetY)
        const nextIsScrolled = isScrolledRef.current ? window.scrollY > 4 : window.scrollY > 24

        if (nextIsScrolled !== isScrolledRef.current) {
          isScrolledRef.current = nextIsScrolled
          setIsScrolled(nextIsScrolled)
        }
        setHasDarkBackground(getElementBackgroundDark(elementBehindHeader))
      })
    }

    updateHeaderState()
    window.addEventListener('scroll', updateHeaderState, { passive: true })
    window.addEventListener('resize', updateHeaderState)

    return () => {
      window.cancelAnimationFrame(animationFrame)
      window.removeEventListener('scroll', updateHeaderState)
      window.removeEventListener('resize', updateHeaderState)
    }
  }, [])

  useEffect(() => {
    let ignore = false
    const query = activeLang === 'dr' || activeLang === 'ps' ? `?lang=${activeLang}` : ''

    fetch(`/api/site-settings${query}`)
      .then(response => response.ok ? response.json() : Promise.reject(response))
      .then((data: { header: HeaderFields | null }) => {
        if (!ignore) {
          setLocalizedFields(data.header ?? fields)
          window.dispatchEvent(new Event('app:ready'))
        }
      })
      .catch(() => {
        if (!ignore) {
          setLocalizedFields(fields)
          window.dispatchEvent(new Event('app:ready'))
        }
      })

    return () => {
      ignore = true
    }
  }, [activeLang, fields])

  return (
    <header ref={headerRef} className='fixed top-0 z-50 w-full py-5'>
      <div
        aria-hidden='true'
        className='pointer-events-none absolute inset-0 origin-top transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none'
        style={{ transform: hasDarkBackground ? 'scaleY(0)' : 'scaleY(1)' }}
      />
      <div
        className={cn(
          'relative mx-auto flex w-full items-center justify-between transition-[max-width,padding] duration-[1400ms] ease-[cubic-bezier(0.19,1,0.22,1)] will-change-[max-width,padding] motion-reduce:transition-none',
          isScrolled
            ? 'container'
            : 'px-5 lg:px-0  lg:max-w-[calc(100%-50px)] [@media(min-width:1700px)]:max-w-[calc(100%-100px)]',
        )}
      >
        <LocalizedLink href="/" className="border-0 outline-none focus:outline-none">
          <HeaderLogo image={logo} />
        </LocalizedLink>
        <div className='flex gap-3 md:gap-[30px] items-center'>

<LanguageSwitcherWithFallback
dark={!hasDarkBackground}
  languageNameList={localizedFields?.language_name_list}
/>
          {/* Menu Sheet */}
          <Sheet>
            <SheetTrigger render={<button className='cursor-pointer' />}>
<MenuIcon color={hasDarkBackground ? ' white' : 'black'} />            </SheetTrigger>
            <SheetContent
              side='right'
              showCloseButton={false}
              className='w-full! max-w-full! sm:max-w-full! p-0 bg-[#2D643A] flex flex-col overflow-y-auto pb-5'
            >
              {/* Sheet Header */}
              <div className='flex items-center justify-between container py-5'>
              
                <HeaderLogo image={localizedFields?.logo_light} />
                <div className='flex items-center gap-4 md:gap-[30px]'>
                  <LanguageSwitcherWithFallback  languageNameList={localizedFields?.language_name_list} />
                  <SheetClose render={<button className='cursor-pointer' />}>
                    <CloseIcon color='white'/>
                  </SheetClose>
                </div>
              </div>

              {/* Sheet Body */}
          <div className='container '>
                <div className='flex flex-col lg:flex-row justify-between xl:px-[100px] 2xl:px-[200px] 2xl:pt-[150px] pt-5 md:pt-14 gap-5'>
                {/* Left — Nav Links */}
                <div className='flex flex-col gap-3 md:gap-5 xl:gap-[50px]  items-center '>
                  {navLinks.map((link) => {
                    const href = link.header_menu_link.replace(/\/$/, '') || '/'
                    const isActive = pathname === href
                    return (
                      <SheetClose key={link.header_menu_text} render={<LocalizedLink href={href} />}>
                        <Text
                          size='h1'
                          as='h3'
                          fontWeight={400}
                          className={cn('transition uppercase ', isActive ? 'text-secondary' : 'text-white hover:text-secondary')}
                        >
                          {link.header_menu_text}
                        </Text>
                      </SheetClose>
                    )
                  })}
                </div>

                {/* Right — Info */}
                <div className='flex flex-col gap-5 lg:gap-[50px] 2xl:gap-[137px] lg:text-start text-center'>
                  {localizedFields?.header_email && (
                    <Link href={`mailto:${localizedFields.header_email}`}>
                      <Text size='h4' fontWeight={300} className=' text-white underline decoration-2 underline-offset-2 break-all'>
                        {localizedFields.header_email}
                      </Text>
                    </Link>
                  )}
                  <div className='flex flex-col gap-[30px] lg:items-start items-center'>
                    <div className='space-y-5'>
                      {/* {localizedFields?.header_sub_heading && (
                        <Text size='h5' fontWeight={500} className='text-white'>{localizedFields.header_sub_heading}</Text>
                      )} */}
                      {localizedFields?.header_description && (
                        <Text size='h5' className='text-white max-w-[30rem] '>{localizedFields.header_description}</Text>
                      )}
                    </div>
                    {localizedFields?.header_button_text && (
                      <div>
                        <Button href={localizedFields.header_button_url} rel='noreferrer'>
                          {localizedFields.header_button_text}
                          <ArrowUpRightIcon />
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
          </div>
            </SheetContent>
          </Sheet>

        </div>
      </div>
    </header>
  )
}