'use client';

import { useEffect, useRef, useState } from 'react';

interface Stat {
  id: number;
  value: number;
  suffix: string;
  label: string;
  description: string;
}

const stats: Stat[] = [
  {
    id: 1,
    value: 50000,
    suffix: '+',
    label: 'Transmisiones Activas',
    description: 'Streams en vivo simultáneos cada mes',
  },
  {
    id: 2,
    value: 2500000,
    suffix: '+',
    label: 'Horas Transmitidas',
    description: 'Contenido de calidad profesional',
  },
  {
    id: 3,
    value: 98,
    suffix: '%',
    label: 'Tasa de Éxito',
    description: 'Transmisiones sin interrupciones',
  },
  {
    id: 4,
    value: 15,
    suffix: '+',
    label: 'Plataformas Soportadas',
    description: 'YouTube, Twitch, Facebook y más',
  },
];

export default function StreamingStats() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

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

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

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, []);

  return (
    <section
      ref={sectionRef}
      className="py-20 bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 relative overflow-hidden"
    >
      {/* Background Effects */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl animate-float"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl animate-float-delayed"></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-16">
          <span className="inline-flex items-center gap-2 text-purple-300 font-semibold mb-4">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
            Estadísticas de la Plataforma
          </span>
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
            Potenciando Creadores de Contenido
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Únete a miles de streamers profesionales que confían en AvanzaCast
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <StatCard
              key={stat.id}
              stat={stat}
              isVisible={isVisible}
              delay={index * 0.2}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

interface StatCardProps {
  stat: Stat;
  isVisible: boolean;
  delay: number;
}

function StatCard({ stat, isVisible, delay }: StatCardProps) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (isVisible) {
      let start = 0;
      const end = stat.value;
      const duration = 2000;
      const increment = end / (duration / 16);

      const timer = setInterval(() => {
        start += increment;
        if (start >= end) {
          setCount(end);
          clearInterval(timer);
        } else {
          setCount(Math.floor(start));
        }
      }, 16);

      return () => clearInterval(timer);
    }
  }, [isVisible, stat.value]);

  return (
    <div
      className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 hover:border-purple-400 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50"
      style={{
        animation: isVisible ? `fadeInUp 0.6s ease-out ${delay}s both` : 'none',
      }}
    >
      <div className="text-center">
        <h2 className="text-5xl font-bold text-white mb-2">
          {isVisible && (
            <>
              {count.toLocaleString()}
              <span className="text-purple-400">{stat.suffix}</span>
            </>
          )}
        </h2>
        <h6 className="text-lg font-semibold text-purple-300 mb-3">
          {stat.label}
        </h6>
        <p className="text-gray-400 text-sm">{stat.description}</p>
      </div>
    </div>
  );
}
