'use client'

import { useEffect, useState } from 'react'

import Link from 'next/link'

import { MailIcon, MenuIcon } from 'lucide-react'

import { ModeToggle } from '@/components/layout/mode-toggle'

import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

import MenuDropdown from '@/components/blocks/menu-dropdown'
import MenuNavigation from '@/components/blocks/menu-navigation'
import type { NavigationSection } from '@/components/blocks/menu-navigation'

import { cn } from '@/lib/utils'

import InkLogo from '@/assets/svg/logo'
import Image from 'next/image'
import { getMediaUrl } from '@/lib/api'

type HeaderProps = {
  navigationData: NavigationSection[]
  className?: string
  domain?: any
  menu?: any
}

const Header = ({ navigationData, className, domain, menu }: HeaderProps) => {
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0)
    }

    window.addEventListener('scroll', handleScroll)
    handleScroll()

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

  const [activeSection, setActiveSection] = useState('')

  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll('section[id]')
      const scrollPosition = window.scrollY + window.innerHeight / 2

      // If no sections exist on the page, clear active section
      if (sections.length === 0) {
        if (activeSection !== '') {
          setActiveSection('')
        }

        return
      }

      let foundSection = false

      for (const section of sections) {
        const element = section as HTMLElement
        const { offsetTop, offsetHeight } = element

        if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
          if (element.id !== activeSection) {
            setActiveSection(element.id)
          }

          foundSection = true
          break
        }
      }

      // If no section matched, clear active section
      if (!foundSection && activeSection !== '') {
        setActiveSection('')
      }
    }

    // Initial check
    handleScroll()

    // Listen for scroll events
    window.addEventListener('scroll', handleScroll, { passive: true })

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

  return (
    <header
      className={cn(
        'fixed left-1/2 top-4 z-50 w-[95%] max-w-5xl -translate-x-1/2 transition-all duration-300',
        'bg-white/70 dark:bg-black/70 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.08)]',
        'rounded-full border border-white/20 dark:border-white/10',
        {
          'top-2 shadow-md bg-white/80 dark:bg-black/80': isScrolled
        },
        className
      )}
    >
      <div className='flex h-14 items-center justify-between gap-6 px-4 sm:px-6 md:px-8'>
        {/* Logo */}
        <Link href='/#home' className='flex items-center gap-3 shrink-0'>
          {domain?.logo ? (
            <Image
              src={getMediaUrl(domain.logo)}
              alt={domain.name}
              width={150}
              height={60}
              className='object-contain h-12 w-auto'
            />
          ) : (
            <InkLogo />
          )}
        </Link>

        {/* Navigation */}
        <div className="flex-1 flex justify-center">
          <MenuNavigation navigationData={navigationData} menu={menu} activeSection={activeSection} className='max-lg:hidden' />
        </div>

        {/* Actions */}
        <div className='flex items-center gap-3 shrink-0'>
          <ModeToggle />
          {/* <Button className='max-sm:hidden rounded-full bg-[#1a1a1a] hover:bg-black text-white px-6' asChild>
            <Link href='/contact-us'>Login</Link>
          </Button> */}

          {/* Navigation for small screens */}
          <div className='flex gap-2 items-center'>
            {/* <Tooltip>
              <TooltipTrigger asChild>
                <Button variant='outline' size='icon' className='sm:hidden rounded-full' asChild>
                  <Link href='/contact-us'>
                    <MailIcon className="w-4 h-4" />
                    <span className='sr-only'>Get in To</span>
                  </Link>
                </Button>
              </TooltipTrigger>
              <TooltipContent>Login</TooltipContent>
            </Tooltip> */}

            <MenuDropdown
              align='end'
              navigationData={navigationData}
              menu={menu}
              activeSection={activeSection}
              trigger={
                <Button variant='outline' size='icon' className='lg:hidden rounded-full'>
                  <MenuIcon className="w-4 h-4" />
                  <span className='sr-only'>Menu</span>
                </Button>
              }
            />
          </div>
        </div>
      </div>
    </header>
  )
}

export default Header