import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { GOLDEN_NIFTY_PATH } from "@/lib/routes";

type FinalCTAProps = {
  onExploreStrategies: () => void;
};

export default function FinalCTA({ onExploreStrategies }: FinalCTAProps) {
  const sectionRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.4 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!sectionRef.current) return;
    const rect = sectionRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
    const y = (e.clientY - rect.top - rect.height / 2) / rect.height;
    setMousePosition({ x: x * 30, y: y * 30 });
  };

  return (
    <section
      ref={sectionRef}
      className="relative overflow-hidden px-4 py-20 sm:px-6 sm:py-24 md:py-32"
      data-testid="section-final-cta"
      onMouseMove={handleMouseMove}
    >
      <div 
        className={`absolute top-1/2 left-1/2 h-[280px] w-[280px] -translate-x-1/2 -translate-y-1/2 transition-all duration-1000 sm:h-[360px] sm:w-[360px] md:h-[500px] md:w-[500px] ${
          isVisible ? "opacity-100 scale-100" : "opacity-0 scale-50"
        }`}
        style={{
          transform: `translate(calc(-50% + ${mousePosition.x}px), calc(-50% + ${mousePosition.y}px))`,
        }}
      >
        <div className="absolute inset-0 bg-primary/10 rounded-full blur-3xl animate-pulse" />
      </div>

      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {[...Array(8)].map((_, i) => (
          <div
            key={i}
            className={`absolute w-2 h-2 rounded-full transition-all duration-1000 ${
              isVisible ? "opacity-40" : "opacity-0"
            }`}
            style={{
              left: `${15 + i * 10}%`,
              top: `${30 + Math.sin(i * 0.8) * 20}%`,
              background: i % 2 === 0 ? "hsl(var(--primary))" : "hsl(var(--chart-2))",
              transitionDelay: `${i * 100}ms`,
              animation: isVisible ? `float-particle ${3 + i * 0.5}s ease-in-out ${i * 0.3}s infinite` : "none",
            }}
          />
        ))}
      </div>

      <div
        className={`max-w-3xl mx-auto text-center relative transition-all duration-1000 ${
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
        }`}
      >
        <h2
          className="mb-6 text-3xl font-bold leading-tight sm:text-4xl md:text-5xl"
          data-testid="text-final-cta-headline"
        >
          <span 
            className={`inline-block transition-all duration-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
          >
            Start Investing
          </span>
          <br />
          <span 
            className={`text-muted-foreground inline-block transition-all duration-700 delay-200 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
          >
            With Clarity
          </span>
        </h2>
        <p 
          className={`mx-auto mb-10 max-w-xl text-base text-muted-foreground transition-all duration-700 delay-400 sm:mb-12 sm:text-lg md:text-xl ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
          }`}
        >
          Take your time. Explore our strategies at your own pace.
          There's no rush when you're building for the long term.
        </p>
        <div
          className={`transition-all duration-700 delay-600 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
          }`}
        >
          <Button
            size="lg"
            className="group relative mx-auto w-full max-w-[20rem] overflow-hidden rounded-xl px-6 py-5 text-base sm:max-w-none sm:px-10 sm:py-6 sm:text-lg"
            data-testid="button-final-cta"
            onClick={onExploreStrategies}
          >
            <span className="relative z-10 flex items-center">
              Explore Strategies
              <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
            </span>
            <div 
              className="absolute inset-0 bg-gradient-to-r from-primary via-chart-1 to-primary bg-[length:200%_100%] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
              style={{ animation: "shimmer 2s linear infinite" }}
            />
          </Button>
        </div>
      </div>

      <style>{`
        @keyframes float-particle {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-20px) rotate(180deg); }
        }
        @keyframes shimmer {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }
      `}</style>
    </section>
  );
}
