'use client'

import { Icon } from '@iconify/react'
import { useEffect, useState } from 'react'
import { cn } from '@/lib/utils'

interface WhatsAppButtonProps {
  whatsapp?: string
}

export function WhatsAppButton({ whatsapp }: WhatsAppButtonProps) {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    // Show button after a small delay or on scroll
    const timer = setTimeout(() => setIsVisible(true), 1500)
    return () => clearTimeout(timer)
  }, [])

  if (!whatsapp) return null

  // Ensure it's a valid link
  let whatsappUrl = whatsapp
  if (!whatsapp.startsWith('http')) {
    const cleanedPhone = whatsapp.replace(/\D/g, '')
    // Default to Indonesia prefix if not provided and it's 08...
    let finalPhone = cleanedPhone
    if (finalPhone.startsWith('0')) {
      finalPhone = '62' + finalPhone.slice(1)
    }
    whatsappUrl = `https://wa.me/${finalPhone}`
  }

  return (
    <a
      href={whatsappUrl}
      target="_blank"
      rel="noopener noreferrer"
      className={cn(
        "btn_whatsapp fixed bottom-8 right-8 z-[100] flex items-center justify-center w-14 h-14 rounded-full bg-[#25D366] text-white shadow-[0_8px_30px_rgb(37,211,102,0.4)] transition-all duration-500 hover:bg-[#128C7E] hover:scale-110 active:scale-95 group",
        isVisible ? "translate-y-0 opacity-100" : "translate-y-20 opacity-0"
      )}
      aria-label="Contact us on WhatsApp"
    >
      <Icon icon="ic:baseline-whatsapp" className="btn_whatsapp w-8 h-8" />
      
      {/* Label Tooltip */}
      <div className="btn_whatsapp absolute right-full mr-4 px-4 py-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 transition-all duration-300 pointer-events-none whitespace-nowrap">
        <p className="btn_whatsapp text-sm font-semibold text-zinc-900 dark:text-white">Chat Admin</p>
        <div className="btn_whatsapp absolute top-1/2 -right-1.5 -translate-y-1/2 w-3 h-3 bg-white dark:bg-zinc-900 border-r border-t border-zinc-200 dark:border-zinc-800 rotate-45" />
      </div>

      {/* Ripple/Pulse Effect */}
      <span className="btn_whatsapp absolute inset-0 rounded-full bg-[#25D366] opacity-30 animate-[ping_2s_linear_infinite] group-hover:hidden" />
    </a>
  )
}