'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { useState, useMemo, useEffect } from 'react'
import { MessageCircle, X, Phone } from 'lucide-react'
import { useCatalogStore } from '@/lib/store'

// =========================================================================
// DistributorBadge — pequeno cartão flutuante que aparece no canto inferior
// direito quando o catálogo está vinculado a um distribuidor (cliente abriu
// o link ?d=slug).
//
// Mostra o nome do distribuidor + um botão de WhatsApp para o cliente
// iniciar um contato direto (tirar dúvidas, falar com o(a) vendedora, etc).
// Fica discreto (canto inferior direito, acima do botão flutuante de
// checkout) e some SOZINHO após 3 segundos (auto-dismiss). O cliente também
// pode fechar antes pelo "×". Uma vez oculto, não reaparece na sessão.
// =========================================================================

export function DistributorBadge() {
  const distributor = useCatalogStore(s => s.currentDistributor)
  const cartOpen = useCatalogStore(s => s.cartOpen)
  const selectedProduct = useCatalogStore(s => s.selectedProduct)
  const [dismissed, setDismissed] = useState(false)

  // Não mostra se: sem distribuidor vinculado, OU carrinho aberto, OU modal
  // de produto aberto (evita sobrepor overlays mais importantes), OU o
  // cliente fechou o badge nesta sessão.
  const visible = !!distributor && !dismissed && !cartOpen && !selectedProduct

  // Auto-dismiss: assim que o badge fica visível, um timer de 3s esconde-o
  // sozinho. O timer é limpo se o badge sair de vista antes (ex.: cliente
  // abre o carrinho) — assim, quando reaparecer, ganha um novo ciclo de 3s
  // completo. `dismissed` é "sticky" na sessão, então depois de sumir não
  // volta mais.
  useEffect(() => {
    if (!visible) return
    const t = setTimeout(() => setDismissed(true), 3000)
    return () => clearTimeout(t)
  }, [visible])

  const prettyPhone = useMemo(() => {
    if (!distributor) return ''
    const d = distributor.whatsapp
    const dd = d.slice(2, 4)
    const rest = d.slice(4)
    if (rest.length === 9) return `(${dd}) ${rest.slice(0, 5)}-${rest.slice(5)}`
    if (rest.length === 8) return `(${dd}) ${rest.slice(0, 4)}-${rest.slice(4)}`
    return d
  }, [distributor])

  const openChat = () => {
    if (!distributor) return
    const msg = `Olá ${distributor.name}! Vim pelo seu catálogo Abelha Rainha e gostaria de tirar uma dúvida. `
    const url = `https://wa.me/${distributor.whatsapp}?text=${encodeURIComponent(msg)}`
    window.open(url, '_blank')
  }

  return (
    <AnimatePresence>
      {visible && distributor && (
        <motion.div
          initial={{ opacity: 0, y: 30, scale: 0.9 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 30, scale: 0.9 }}
          transition={{ type: 'spring', damping: 24, stiffness: 280 }}
          // Canto inferior direito. O botão flutuante de checkout fica na
          // esquerda (bottom-1/20), então não conflitam. z-30 fica abaixo
          // dos drawers (z-40) e do modal de produto (z-50).
          className="fixed right-3 sm:right-4 bottom-3 sm:bottom-20 z-30 max-w-[280px]"
        >
          <div className="relative bg-white rounded-2xl shadow-xl ring-1 ring-black/5 overflow-hidden">
            {/* Botão de fechar */}
            <button
              onClick={() => setDismissed(true)}
              className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/5 hover:bg-black/10 transition-colors"
              aria-label="Fechar"
            >
              <X className="w-3 h-3 text-neutral-500" />
            </button>

            <div className="flex items-center gap-3 p-3 pr-7">
              {/* Avatar */}
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center flex-shrink-0">
                <MessageCircle className="w-5 h-5 text-white" />
              </div>

              {/* Info */}
              <div className="min-w-0 flex-1">
                <div className="text-[10px] uppercase tracking-wider text-green-600 font-bold leading-none">
                  Seu distribuidor
                </div>
                <div className="text-sm font-bold text-neutral-900 leading-tight truncate mt-0.5">
                  {distributor.name}
                </div>
                <div className="flex items-center gap-1 text-[11px] text-neutral-500 mt-0.5">
                  <Phone className="w-2.5 h-2.5" />
                  <span className="truncate">{prettyPhone}</span>
                </div>
              </div>
            </div>

            {/* CTA */}
            <button
              onClick={openChat}
              className="w-full flex items-center justify-center gap-1.5 py-2 bg-green-500 hover:bg-green-600 active:scale-[0.98] text-white text-xs font-bold transition-all"
            >
              <MessageCircle className="w-3.5 h-3.5" />
              Falar no WhatsApp
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}