'use client';
import { Icon } from '@iconify/react';
import { motion, AnimatePresence } from 'framer-motion';
import type { ThemeProps } from '@/app/(landing)/types/ui';
import { type Dispatch, type SetStateAction, useState, useEffect } from 'react';

const WHATSAPP_NUMBER = '529984814889';
const WHATSAPP_MSG = encodeURIComponent('¡Hola!');

interface FloatingButtonsProps extends ThemeProps {
  setIsNavyBg: Dispatch<SetStateAction<boolean>>;
}

export const FloatingButtons = ({ setIsNavyBg: _setIsNavyBg }: FloatingButtonsProps) => {
  const [showTop, setShowTop] = useState(false);
  const [showBubble, setShowBubble] = useState(false);
  const toggleBg     = 'color-mix(in srgb, var(--card) 85%, transparent)';
  const toggleBorder = 'var(--border)';
  const toggleColor  = '#3b82f6';

  useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    const t = setTimeout(() => setShowBubble(true), 3000);
    return () => { window.removeEventListener('scroll', onScroll); clearTimeout(t); };
  }, []);

  return (
    <>
    {/* Scroll to top — izquierda */}
    {showTop && (
      <button
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        aria-label="Volver arriba"
        className="fixed bottom-24 left-6 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
        style={{
          background: toggleBg,
          border: `1px solid ${toggleBorder}`,
          backdropFilter: 'blur(8px)',
          cursor: 'pointer',
          color: toggleColor,
        }}
      >
        <Icon icon="ph:arrow-up" width={16} />
      </button>
    )}

    <div
      className="fixed bottom-6 right-6 z-50 flex flex-col items-center gap-3"
      aria-label="Acciones rápidas"
    >
      {/* WhatsApp + bubble wrapper */}
      <div style={{ position: 'relative' }}>
        <AnimatePresence>
        {showBubble && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.92 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 6, scale: 0.95 }}
            transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
            style={{
              position: 'absolute',
              bottom: 'calc(100% + 10px)',
              right: 0,
              filter: 'drop-shadow(0 4px 16px rgba(0,0,0,0.12))',
            }}>
            <div style={{
              background: '#fff',
              borderRadius: 16,
              padding: '12px 36px 12px 16px',
              fontSize: 14,
              fontWeight: 500,
              color: '#1a1a2e',
              whiteSpace: 'nowrap',
              position: 'relative',
            }}>
              ¡Hola! ¿En qué podemos ayudarte?
              <button
                onClick={() => setShowBubble(false)}
                aria-label="Cerrar"
                style={{
                  position: 'absolute', top: 6, right: 8,
                  width: 20, height: 20, cursor: 'pointer', fontSize: 10,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#888',
                }}
              >✕</button>
            </div>
            {/* tail apuntando al botón */}
            <div style={{
              width: 14, height: 10,
              background: '#fff',
              clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
              position: 'absolute',
              bottom: -9,
              right: 16,
            }} />
          </motion.div>
        )}
        </AnimatePresence>

        {/* WhatsApp */}
        <a
          href={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_MSG}`}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Contactar por WhatsApp"
          className="flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
          style={{ background: '#25D366' }}
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="white" aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
            <path d="M12 0C5.373 0 0 5.373 0 12c0 2.122.554 4.112 1.523 5.837L.057 23.882a.5.5 0 0 0 .611.61l6.109-1.457A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.721 9.721 0 0 1-4.965-1.362l-.356-.211-3.687.88.897-3.583-.231-.369A9.718 9.718 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
          </svg>
        </a>
      </div>

    </div>
    </>
  );
};