'use client';

import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { motion, AnimatePresence } from 'motion/react';
import { ArrowRight } from 'lucide-react';

interface StickyMobileCTAProps {
  onCtaClick: () => void;
}

export function StickyMobileCTA({ onCtaClick }: StickyMobileCTAProps) {
  const { t } = useTranslation();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const checkVisibility = () => {
      // Only show on mobile (below md breakpoint)
      const isMobile = window.innerWidth < 768;
      if (!isMobile) {
        setIsVisible(false);
        return;
      }

      // Get the lead form element
      const leadForm = document.getElementById('lead-form');
      
      // Get all regular CTA buttons (hero CTA, feature CTAs, etc.)
      const ctaButtons = document.querySelectorAll('[data-cta-button="true"]');
      
      if (!leadForm) {
        setIsVisible(true);
        return;
      }

      const scrollY = window.scrollY;
      const windowHeight = window.innerHeight;
      const scrollBottom = scrollY + windowHeight;

      // Check if lead form is in viewport
      const formRect = leadForm.getBoundingClientRect();
      const formTop = formRect.top + scrollY;
      const formBottom = formTop + formRect.height;
      
      // Hide if form is visible (with 100px threshold)
      const isFormVisible = scrollBottom > formTop - 100 && scrollY < formBottom + 100;
      
      if (isFormVisible) {
        setIsVisible(false);
        return;
      }

      // Check if any CTA button is in viewport
      let isAnyCTAVisible = false;
      ctaButtons.forEach((button) => {
        const rect = button.getBoundingClientRect();
        const buttonTop = rect.top + scrollY;
        const buttonBottom = buttonTop + rect.height;
        
        // Check if button is in viewport (with 50px threshold)
        if (scrollBottom > buttonTop - 50 && scrollY < buttonBottom + 50) {
          isAnyCTAVisible = true;
        }
      });

      if (isAnyCTAVisible) {
        setIsVisible(false);
        return;
      }

      // Show sticky CTA if:
      // 1. We're on mobile
      // 2. Form is not visible
      // 3. No regular CTA is visible
      // 4. User has scrolled a bit (past 300px)
      setIsVisible(scrollY > 300);
    };

    // Check on mount and scroll
    checkVisibility();
    window.addEventListener('scroll', checkVisibility);
    window.addEventListener('resize', checkVisibility);

    return () => {
      window.removeEventListener('scroll', checkVisibility);
      window.removeEventListener('resize', checkVisibility);
    };
  }, []);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          transition={{ 
            type: 'spring',
            stiffness: 300,
            damping: 30,
            opacity: { duration: 0.2 }
          }}
          className="fixed bottom-6 left-4 right-4 z-40 md:hidden"
        >
          <button
            onClick={onCtaClick}
            className="w-full bg-gradient-to-r from-[#3A4A9C] to-[#2d3a7a] text-white font-bold text-lg px-8 py-4 rounded-2xl shadow-2xl shadow-[#3A4A9C]/40 flex items-center justify-center gap-3 hover:shadow-[#3A4A9C]/60 transition-all active:scale-95"
          >
            <span>{t('nav.getStarted')}</span>
            <motion.div
              animate={{ x: [0, 5, 0] }}
              transition={{ 
                repeat: Infinity, 
                duration: 1.5,
                ease: 'easeInOut'
              }}
            >
              <ArrowRight className="w-5 h-5" aria-hidden="true" />
            </motion.div>
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}