'use client'

import { useState } from 'react'
import Image from 'next/image'
import { MessageCircle, X } from 'lucide-react'
import { imageUrls } from '@/lib/images'
import type { Language } from '@/lib/i18n'

const WHATSAPP_NUMBER = '523222311415'

const greetings: Record<Language, string> = {
  en: "Hi! I'm Kevin. How can I help you today?",
  es: '¡Hola! Soy Kevin. ¿En qué puedo ayudarte?',
  fr: 'Bonjour ! Je suis Kevin. Comment puis-je vous aider ?',
}

const ctaLabel: Record<Language, string> = {
  en: 'Chat on WhatsApp',
  es: 'Chatear por WhatsApp',
  fr: 'Ouvrir WhatsApp',
}

interface WhatsAppWidgetProps {
  lang?: Language
}

export default function WhatsAppWidget({ lang = 'en' }: WhatsAppWidgetProps) {
  const [open, setOpen] = useState(false)
  const href = `https://wa.me/${WHATSAPP_NUMBER}`

  return (
    <div className="fixed bottom-6 right-6 z-[9999] flex flex-col items-end gap-3">
      {open && (
        <div
          className="flex flex-col overflow-hidden rounded-2xl border-2 border-brand-accent bg-white shadow-xl"
          style={{ width: 'min(320px, calc(100vw - 3rem))' }}
        >
          <div className="bg-brand-primary px-4 py-3 flex items-center justify-between">
            <span className="text-sm font-semibold uppercase tracking-wide text-white">
              WhatsApp
            </span>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="p-1 rounded-lg text-white/90 hover:bg-white/20 transition-colors"
              aria-label="Cerrar"
            >
              <X size={20} />
            </button>
          </div>
          <a
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-col items-center p-5 pb-4 text-center no-underline text-brand-text hover:bg-brand-light/50 transition-colors"
          >
            <div className="relative w-20 h-20 rounded-full overflow-hidden border-2 border-brand-accent mb-4 flex-shrink-0">
              <Image
                src={imageUrls.about.kevin}
                alt="Kevin Victor"
                fill
                className="object-cover"
                sizes="80px"
              />
            </div>
            <p className="text-sm font-medium text-brand-text mb-1">{greetings[lang]}</p>
            <p className="text-brand-primary font-semibold text-base">+52 322 231 1415</p>
            <span className="mt-3 inline-flex items-center gap-2 rounded-xl bg-brand-primary px-4 py-2 text-sm font-semibold text-white">
              <MessageCircle size={18} />
              {ctaLabel[lang] ?? ctaLabel.en}
            </span>
          </a>
        </div>
      )}
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="flex h-14 w-14 items-center justify-center rounded-full bg-brand-primary text-white shadow-lg hover:bg-brand-darkGreen transition-all hover:scale-105 focus:outline-none focus:ring-4 focus:ring-brand-accent/50"
        aria-label={open ? 'Cerrar chat' : 'Abrir chat de WhatsApp'}
      >
        <MessageCircle size={28} />
      </button>
    </div>
  )
}