'use client'

import { Phone, MessageSquare, MapPin } from 'lucide-react'

interface StickyActionBarProps {
  phone?: string | null
  whatsapp?: string | null
  latitude?: number | null
  longitude?: number | null
  address?: string
  labels: {
    call: string
    whatsapp: string
    directions: string
  }
}

export default function StickyActionBar({
  phone,
  whatsapp,
  latitude,
  longitude,
  address,
  labels,
}: StickyActionBarProps) {
  if (!phone && !whatsapp && !latitude && !longitude) {
    return null
  }

  const getWhatsAppLink = (number: string) => {
    const cleanNum = number.replace(/\D/g, '')
    return `https://wa.me/${cleanNum}`
  }

  const getDirectionsLink = () => {
    if (latitude && longitude) {
      return `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
    }
    if (address) {
      return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(address + ', Marmaris')}`
    }
    return 'https://maps.google.com'
  }

  return (
    <div className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-pine/95 backdrop-blur-md border-t border-white/10 p-3 shadow-2xl">
      <div className="max-w-md mx-auto grid grid-cols-3 gap-2.5">
        {/* WhatsApp Action */}
        {whatsapp ? (
          <a
            href={getWhatsAppLink(whatsapp)}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-col items-center justify-center gap-1 bg-turquoise hover:bg-turquoise/90 text-paper font-bold text-[11px] py-2 px-2 rounded-xl transition shadow-sm min-h-[48px] active:scale-95"
            aria-label={labels.whatsapp}
          >
            <MessageSquare className="w-4 h-4" />
            <span>{labels.whatsapp}</span>
          </a>
        ) : (
          <div className="hidden" />
        )}

        {/* Call Action */}
        {phone ? (
          <a
            href={`tel:${phone}`}
            className="flex flex-col items-center justify-center gap-1 bg-paper/10 hover:bg-paper/20 text-stone font-bold text-[11px] py-2 px-2 rounded-xl border border-white/10 transition shadow-sm min-h-[48px] active:scale-95"
            aria-label={labels.call}
          >
            <Phone className="w-4 h-4 text-turquoise" />
            <span>{labels.call}</span>
          </a>
        ) : (
          <div className="hidden" />
        )}

        {/* Directions Action */}
        {(latitude || longitude || address) && (
          <a
            href={getDirectionsLink()}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-col items-center justify-center gap-1 bg-paper/10 hover:bg-paper/20 text-stone font-bold text-[11px] py-2 px-2 rounded-xl border border-white/10 transition shadow-sm min-h-[48px] active:scale-95"
            aria-label={labels.directions}
          >
            <MapPin className="w-4 h-4 text-gold" />
            <span>{labels.directions}</span>
          </a>
        )}
      </div>
    </div>
  )
}