'use client'

import React, { useEffect, useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import men from '@/app/assets/Image/footerimg.png'
import { LocalizedLink } from '@/components/localized-link'
import { Button, Text } from '@/components/ui'
import type { FooterFields, SettingsImage } from '@/types/settings'
import { PayseyPayLogoIcon } from '@/app/assets/svg/icon'

function FooterTitle({ title }: { title: string }) {
  const match = title.match(/^(.*?)<span>(.*?)<\/span>(.*)$/i)

  if (!match) return title

  return (
    <>
      {match[1]}
      <span className='gradient-text-white'>{match[2]}</span>
      {match[3]}
    </>
  )
}

function getImageDimensions(image: SettingsImage) {
  const width = Number(image.width) || Number(image.svg?.match(/<svg[^>]*\bwidth=["'](\d+)/i)?.[1])
  const height = Number(image.height) || Number(image.svg?.match(/<svg[^>]*\bheight=["'](\d+)/i)?.[1])

  return width > 0 && height > 0 ? { width, height } : null
}

function ApiImage({ image, className }: { image: SettingsImage; className?: string }) {
  const dimensions = getImageDimensions(image)

  if (!image.url || !dimensions) return null

  return (
    <Image
      src={image.url}
      alt={image.alt}
      width={dimensions.width}
      height={dimensions.height}
      className={className}
      unoptimized={image.url.endsWith('.svg')}
    />
  )
}

function normalizeApiHref(href: string) {
  const trimmedHref = href.trim()

  if (
    !trimmedHref ||
    trimmedHref === '#' ||
    trimmedHref.startsWith('#') ||
    /^(https?:|mailto:|tel:|sms:|\/\/)/i.test(trimmedHref)
  ) {
    return trimmedHref
  }

  return `/${trimmedHref.replace(/^\/+/, '').replace('/#', '#')}`
}

function ApiLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
  const normalizedHref = normalizeApiHref(href)

  if (!normalizedHref) return <span className={className}>{children}</span>

  const isInternal = normalizedHref.startsWith('/') && !normalizedHref.startsWith('//')
  const LinkComponent = isInternal ? LocalizedLink : Link

  return (
    <LinkComponent href={normalizedHref} className={className}>
      {children}
    </LinkComponent>
  )
}

export function FooterClient({ initialFooter }: { initialFooter: FooterFields }) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [footer, setFooter] = useState(initialFooter)
  const [isQrZoomOpen, setIsQrZoomOpen] = useState(false)
  const activeLang = searchParams.get('lang')
  const hideDownloadPromo =
    pathname === '/download-preview' ||
    pathname === '/download' ||
    pathname === '/download/'

  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: { footer: FooterFields | null }) => {
        if (!ignore) setFooter(data.footer ?? initialFooter)
      })
      .catch(() => {
        if (!ignore) setFooter(initialFooter)
      })

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

  useEffect(() => {
    if (!isQrZoomOpen) return

    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setIsQrZoomOpen(false)
    }

    document.body.style.overflow = 'hidden'
    window.addEventListener('keydown', closeOnEscape)

    return () => {
      document.body.style.overflow = ''
      window.removeEventListener('keydown', closeOnEscape)
    }
  }, [isQrZoomOpen])

  return (
    <footer
    id='footer'
      className='overflow-hidden text-white'
      style={{
        background: `linear-gradient(180deg, rgba(16,30,16,0) 0%, rgba(16,30,16,0.95) 32.3%, #101E10 78.58%), url(${men.src}) center top / cover no-repeat`,
      }}
    >
      <div className='container space-y-10 md:space-y-[60px] xl:space-y-[100px]'>
        {!hideDownloadPromo &&
          (footer.footer_title || footer.footer_description || footer.app_links.length > 0) && (
          <div className='flex flex-col items-center justify-center text-center stack'>
            <div className='space-y-[30px] md:space-y-[50px]'>
              <div className='space-y-5'>
                {footer.footer_title && (
                  <Text size='h2' className='uppercase mx-auto max-w-[57rem] leading-[45px] xl:leading-[60px] 2xl:leading-[68px]'>
                    <FooterTitle title={footer.footer_title} />
                  </Text>
                )}
                {footer.footer_description && (
                  <Text size='normal' className='text-white mx-auto max-w-[50rem]'>
                    {footer.footer_description}
                  </Text>
                )}
              </div>
              {footer.app_links.length > 0 && (
                <div className='flex items-center sm:flex-row flex-col justify-center gap-[30px]'>
                  {footer.app_links.map((appLink) => (
                    appLink.store_link && appLink.store_title && (
                      <Button
                        key={appLink.store_title}
                        // href={appLink.store_link}
                        onClick={() => setIsQrZoomOpen(true)}
                        target='_blank'
                        rel='noreferrer'
                      >
                        <ApiImage image={appLink.store_icon} className='size-6 object-contain' />
                        {appLink.store_title}
                      </Button>
                    )
                  ))}
                </div>
              )}
            </div>
          </div>
        )}

        <div className='bg-white/10 h-px w-full' />

        <div className='space-y-10'>
          <div className='space-y-10 md:space-y-[84px]'>
            <div className='grid grid-cols-1 lg:grid-cols-[0.5fr_0.6fr_0.2fr_0.5fr] xl:grid-cols-[1fr_0.4fr_0.4fr_0.5fr] 2xl:grid-cols-[1fr_0.4fr_0.4fr_0.6fr] gap-[30px]'>
              {(footer.footer_qr_code.url || footer.footer_qr_code_text || footer.qr_code_zoom_text || footer.footer_description_heading || footer.footer_description_text) && (
             <div className='space-y-4 xl:space-y-[30px]'>
                 <div className='flex gap-6 xl:items-center lg:items-start md:items-center xl:flex-row lg:flex-col md:flex-row flex-col'>
                  {footer.footer_qr_code.url && (
                    <button
                      type='button'
                      onClick={() => setIsQrZoomOpen(true)}
                      aria-label={footer.qr_code_zoom_text}
                      className='flex size-40 shrink-0 items-center justify-center rounded-[20px] border border-white/30 bg-white/10 transition duration-300 hover:scale-[1.03] hover:bg-white/15 md:size-[200px] md:rounded-[50px]'
                    >
                      <ApiImage image={footer.footer_qr_code} className='size-[120px] md:size-[150px]' />
                    </button>
                  )}
                  <div className='space-y-6'>
                    {footer.footer_qr_code_text && (
                      <Text size='h3' className='text-white max-w-[20rem]'>{footer.footer_qr_code_text}</Text>
                    )}
                    {footer.qr_code_zoom_text && footer.footer_qr_code.url && (
                      <button type='button' className='cursor-pointer' onClick={() => setIsQrZoomOpen(true)}>
                        <Text size='subtitle' className='text-secondary hover:underline'>{footer.qr_code_zoom_text}</Text>
                      </button>
                    )}
                  </div>
                </div>
                {(footer.footer_description_heading || footer.footer_description_text) && (
                  <div className='space-y-2 lg:space-y-5'>
                    {footer.footer_description_heading && (
                      <Text size='body' className='font-bold text-white' textKey={footer.footer_description_heading} />
                    )}
                    {footer.footer_description_text && (
                      <Text size='normal' className='max-w-[40rem] font-bold text-[#DFDFDF]' textKey={footer.footer_description_text} />
                    )}
                  </div>
                )}
             </div>
              )}

              {footer.footer_menus.map((menu) => {
                const isUsefulLinkMenu = menu.footer_menu_name.trim().toLowerCase() === 'useful link'

                return (
                  <div key={menu.footer_menu_name} className='space-y-5'>
                    {menu.footer_menu_name && (
                      <Text size='body' fontWeight={700} className='text-white'>{menu.footer_menu_name}</Text>
                    )}
                    {menu.footer_menu_item.length > 0 && (
                      <ul className="flex gap-[15px] flex-row flex-wrap lg:flex-col">
                        {menu.footer_menu_item.map((item) => (
                          item.footer_menu_text && (
                            <li key={`${menu.footer_menu_name}-${item.footer_menu_text}`}>
                              <ApiLink href={item.footer_menu_link}>
                                <Text size='normal' className='text-[#DFDFDF] hover:text-white transition'>{item.footer_menu_text}</Text>
                              </ApiLink>
                            </li>
                          )
                        ))}
                      </ul>
                    )}
                  </div>
                )
              })}

              {(footer.contact_info_title || footer.address_title || footer.footer_headquarters || footer.address_title_branch || footer.footer_main_branch || footer.contact_info_list.length > 0) && (
                <div className='space-y-5'>
                  {footer.contact_info_title && (
                    <Text size='body' fontWeight={700} className='text-white'>{footer.contact_info_title}</Text>
                  )}
                  {(footer.address_title || footer.footer_headquarters || footer.address_title_branch || footer.footer_main_branch) && (
                    <div className='space-y-5'>
                      {(footer.address_title || footer.footer_headquarters) && (
                        <div className='space-y-[5px]'>
                          {footer.address_title && (
                            <div className='flex gap-2.5'>
                              <ApiImage image={footer.headquarters_icon} className='size-6 shrink-0 object-contain' />
                              <Text size='normal' className='font-semibold text-secondary'>{footer.address_title}</Text>
                            </div>
                          )}
                          {footer.footer_headquarters && (
                            <Text size='normal' className='text-[#DFDFDF]'>{footer.footer_headquarters}</Text>
                          )}
                        </div>
                      )}
                      {(footer.address_title_branch || footer.footer_main_branch) && (
                        <div className='space-y-[5px]'>
                          {footer.address_title_branch && (
                            <div className='flex gap-2.5'>
                              <ApiImage image={footer.branch_icon} className='size-6 shrink-0 object-contain' />
                              <Text size='normal' className='font-semibold text-secondary'>{footer.address_title_branch}</Text>
                            </div>
                          )}
                          {footer.footer_main_branch && (
                            <Text size='normal' className='text-[#DFDFDF]'>{footer.footer_main_branch}</Text>
                          )}
                        </div>
                      )}
                    </div>
                  )}
                  {footer.contact_info_list.length > 0 && (
                    <ul className='space-y-5'>
                      {footer.contact_info_list.map((item) => (
                        item.contact_value && (
                          <li key={item.contact_value}>
                            <ApiLink href={item.contact_info_link} className='flex items-start gap-2.5'>
                              <ApiImage image={item.contact_info_icon} className='mt-0.5 size-6 shrink-0 object-contain' />
                              <Text size='normal' className='text-[#DFDFDF] hover:text-white transition'>{item.contact_value}</Text>
                            </ApiLink>
                          </li>
                        )
                      ))}
                    </ul>
                  )}
                </div>
              )}
            </div>
            <div className='bg-white/10 h-px w-full' />
          </div>

          {(footer.footer_copyright_text || footer.footer_privacy_menu_links.length > 0) && (
            <div className='flex flex-col sm:flex-row md:items-center justify-between gap-5'>
              {footer.footer_copyright_text && (
                <Text size='normal' className='text-[#6D6D6D]'>{footer.footer_copyright_text}</Text>
              )}
              {footer.footer_privacy_menu_links.length > 0 && (
                <div className='flex items-center md:flex-row justify-between gap-6 xl:gap-[70px]'>
                  {footer.footer_privacy_menu_links.map((item) => (
                    item.privacy_menu_title && (
                      <ApiLink key={item.privacy_menu_title} href={item.privacy_menu_link}>
                        <Text size='normal' fontWeight={600} className='text-[#DFDFDF] hover:text-white transition uppercase'>
                          {item.privacy_menu_title}
                        </Text>
                      </ApiLink>
                    )
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        {/* <ApiImage image={footer.footer_main_logo} className='h-auto w-full' /> */}
       <span className='cursor-pointer'>
         <PayseyPayLogoIcon/>
       </span>
      </div>
      {isQrZoomOpen && footer.footer_qr_code.url && (
        <div
          role='dialog'
          aria-modal='true'
          aria-label={footer.qr_code_zoom_text || footer.footer_qr_code.alt}
          className='fixed inset-0 z-[100] flex items-center justify-center bg-black/70 p-5 backdrop-blur-sm'
          onClick={() => setIsQrZoomOpen(false)}
        >
          <style>
            {`
              @keyframes footerQrZoomIn {
                from {
                  opacity: 0;
                  transform: scale(0.78);
                }
                to {
                  opacity: 1;
                  transform: scale(1);
                }
              }
            `}
          </style>
          <div
            className='flex size-[min(86vw,520px)] items-center justify-center rounded-[28px] border border-white/20 bg-[#101E10] p-5 shadow-[0_30px_90px_rgba(0,0,0,0.45)] md:p-8'
            style={{ animation: 'footerQrZoomIn 240ms cubic-bezier(0.22, 1, 0.36, 1)' }}
            onClick={(event) => event.stopPropagation()}
          >
            <ApiImage image={footer.footer_qr_code} className='size-[min(72vw,430px)] object-contain' />
          </div>
        </div>
      )}
    </footer>
  )
}