'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { MenuIcon, X } from 'lucide-react'
import { ModeToggle } from '@/components/layout/mode-toggle'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Image from 'next/image'
import { getMediaUrl } from '@/lib/api'
import { openWhatsAppModal } from '@/components/layout/whatsapp-modal'

type HeaderProps = {
  domain?: any
  menu?: any[]
}

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

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <header
      className={cn(
        'fixed top-0 left-0 right-0 z-50 w-full transition-all duration-300 border-b border-transparent',
        isScrolled 
          ? 'bg-background/80 backdrop-blur-md border-border py-3 shadow-sm' 
          : 'bg-transparent py-5'
      )}
    >
      <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
        <div className='flex items-center justify-between gap-8'>
          {/* Logo */}
          <Link href='/' className='flex items-center gap-2 shrink-0 relative z-50'>
            {domain?.logo ? (
              <Image
                src={getMediaUrl(domain.logo)}
                alt={domain.name || 'Logo'}
                width={200}
                height={70}
                className='object-contain h-14 sm:h-16 w-auto'
              />
            ) : (
              <span className='font-bold text-2xl tracking-tighter'>{domain?.name || 'Landing'}</span>
            )}
          </Link>

          {/* Desktop Navigation */}
          <nav className='hidden lg:flex items-center gap-1 bg-muted/50 p-1 rounded-2xl border border-border/50'>
            {menu?.map((item: any, i: number) => (
              <Link
                key={i}
                href={item.url || '#'}
                className='px-5 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground hover:bg-background rounded-xl transition-all'
              >
                {item.name}
              </Link>
            ))}
          </nav>

          {/* Actions */}
          <div className='flex items-center gap-3 relative z-50'>
            <ModeToggle />
            
            {domain?.whatsapp && (
              <Button
                type='button'
                onClick={openWhatsAppModal}
                className='cursor-pointer hidden sm:flex rounded-xl bg-primary text-primary-foreground font-bold'
              >
                <span>Hubungi Kami</span>
              </Button>
            )}

            {/* Mobile Toggle */}
            <button 
              className='lg:hidden p-2 text-foreground'
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X className='w-6 h-6' /> : <MenuIcon className='w-6 h-6' />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      <div className={cn(
        'fixed inset-0 z-40 bg-background lg:hidden transition-all duration-500 ease-in-out pt-24 px-6',
        isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-full pointer-events-none'
      )}>
        <nav className='flex flex-col gap-6'>
          {menu?.map((item: any, i: number) => (
            <Link
              key={i}
              href={item.url || '#'}
              onClick={() => setIsMobileMenuOpen(false)}
              className='text-3xl font-bold hover:text-primary transition-colors'
            >
              {item.name}
            </Link>
          ))}
          <hr className='border-border' />
          {domain?.whatsapp && (
            <Button
              type='button'
              size='lg'
              onClick={() => {
                setIsMobileMenuOpen(false)
                openWhatsAppModal()
              }}
              className='cursor-pointer w-full rounded-2xl text-xl h-14 font-bold'
            >
              <span>Chat di WhatsApp</span>
            </Button>
          )}
        </nav>
      </div>
    </header>
  )
}

export default Header