import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
// import { gsap } from 'gsap'; // GSAP DISABLED
import Container from '../container';
import NeuralNetwork from '../neural-network';
import BrainIcon from '../../icons/brain-icon';
import LightningIcon from '../../icons/lightning-icon';
import TargetIcon from '../../icons/target-icon';
import ChartIcon from '../../icons/chart-icon';
import { useProjectStats } from '../../../hooks/useProjectData';
import { useChat } from '../../../contexts/ChatContext';
import { BrainCircuit, GitCompareArrows, Hammer, Users } from 'lucide-react';

export default function AILiveDemo() {
  const { openChat, sendMessage, isSendingMessage } = useChat();
  const sectionRef = useRef<HTMLElement>(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const progressRef = useRef<HTMLDivElement>(null);
  const { stats: projectStats } = useProjectStats();

  const aiSteps = useMemo(() => [
    {
      id: 'scan',
      title: 'Mapeando Proyectos',
      desc: 'Sistema localizando proyectos de innovación educativa',
      icon: <BrainCircuit className="w-6 h-6" />,
      color: 'emerald',
      data: { proyectos: projectStats.total_projects },
      chatMessage: 'Cuéntame sobre cómo funciona el mapeo de proyectos de innovación educativa en la plataforma'
    },
    {
      id: 'qualify',
      title: 'Análisis de Metodologías',
      desc: 'IA categorizando enfoques pedagógicos y didácticos',
      icon: <Hammer className="w-6 h-6" />,
      color: 'emerald',
      data: { metodologías: projectStats.methodologies },
      chatMessage: 'Explícame cómo la IA categoriza y analiza las metodologías educativas en los proyectos'
    },
    {
      id: 'engage',
      title: 'Conectando Investigadores',
      desc: 'Sistema identificando oportunidades de colaboración',
      icon: <Users className="w-6 h-6" />,
      color: 'emerald',
      data: { conexiones: Math.max(8, Math.floor(projectStats.total_projects * 0.5)) },
      chatMessage: 'Cómo ayuda la plataforma a conectar investigadores y crear oportunidades de colaboración'
    },
    {
      id: 'convert',
      title: 'Transferencia de Conocimiento',
      desc: 'IA facilitando escalabilidad de resultados',
      icon: <GitCompareArrows className="w-6 h-6" />,
      color: 'emerald',
      data: { transferencias: Math.max(5, Math.floor(projectStats.total_projects * 0.3)) },
      chatMessage: 'Cómo facilita MIRATE la transferencia y escalabilidad de conocimiento en innovación educativa'
    }
  ], [projectStats]);

  const handleCardClick = useCallback(async (step: typeof aiSteps[0]) => {
    // Abrir el chat sin el mensaje inicial
    openChat(true);
    // Enviar mensaje silencioso (no se muestra en el chat)
    await sendMessage(step.chatMessage, true);
  }, [sendMessage, openChat]);

  const startAIDemo = useCallback(() => {
    setIsRunning(true);
    setCurrentStep(0);

    const runStep = (stepIndex: number) => {
      if (stepIndex >= aiSteps.length) {
        // Restart after delay
        setTimeout(() => {
          setIsRunning(false);
          setCurrentStep(0);
        }, 3000);
        return;
      }

      setCurrentStep(stepIndex);

      // GSAP ANIMATIONS DISABLED
      // Animate progress bar
      if (progressRef.current) {
        // gsap.to(progressRef.current, {
        //   width: `${((stepIndex + 1) / aiSteps.length) * 100}%`,
        //   duration: 2,
        //   ease: "power2.out"
        // });
        // Manual update without animation
        progressRef.current.style.width = `${((stepIndex + 1) / aiSteps.length) * 100}%`;
      }

      // Animate step data counters
      const step = aiSteps[stepIndex];
      const stepElement = document.querySelector(`[data-step="${step.id}"]`);

      if (stepElement) {
        // Animate numbers counting up
        Object.keys(step.data).forEach(key => {
          const target = step.data[key as keyof typeof step.data];
          const element = stepElement.querySelector(`[data-counter="${key}"]`);

          if (element && target != null && target > 0) {
            let count = 0;
            const increment = target / 30;
            const timer = setInterval(() => {
              count += increment;
              if (count >= target) {
                count = target;
                clearInterval(timer);
              }
              element.textContent = Math.floor(count).toString();
            }, 50);
          }
        });

        // GSAP ANIMATIONS DISABLED
        // Glow effect
        // gsap.to(stepElement, {
        //   boxShadow: `0 0 30px ${getColorValue(step.color)}`,
        //   duration: 0.5,
        //   yoyo: true,
        //   repeat: 3
        // });
      }

      // Move to next step
      setTimeout(() => runStep(stepIndex + 1), 3000);
    };

    runStep(0);
  }, [aiSteps]);

  useEffect(() => {
    if (!sectionRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !isRunning) {
          startAIDemo();
        }
      },
      { threshold: 0.3 }
    );

    observer.observe(sectionRef.current);

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

  // GSAP DISABLED - Function not used anymore
  // const getColorValue = (color: string) => {
  //   const colors = {
  //     blue: 'rgba(59, 130, 246, 0.5)',
  //     purple: 'rgba(139, 92, 246, 0.5)',
  //     cyan: 'rgba(6, 182, 212, 0.5)',
  //     emerald: 'rgba(16, 185, 129, 0.5)'
  //   };
  //   return colors[color as keyof typeof colors];
  // };

  const getColorClasses = (color: string, isActive: boolean) => {
    const baseClasses = {
      blue: isActive
        ? 'bg-blue-600/30 dark:bg-blue-500/20 text-blue-800 dark:text-blue-300 border-blue-600/50 dark:border-blue-400/50'
        : 'bg-white/90 dark:bg-slate-700/30 text-slate-700 dark:text-slate-400 border-slate-300 dark:border-slate-600/30',
      purple: isActive
        ? 'bg-purple-600/30 dark:bg-purple-500/20 text-purple-800 dark:text-purple-300 border-purple-600/50 dark:border-purple-400/50'
        : 'bg-white/90 dark:bg-slate-700/30 text-slate-700 dark:text-slate-400 border-slate-300 dark:border-slate-600/30',
      cyan: isActive
        ? 'bg-cyan-600/30 dark:bg-cyan-500/20 text-cyan-800 dark:text-cyan-300 border-cyan-600/50 dark:border-cyan-400/50'
        : 'bg-white/90 dark:bg-slate-700/30 text-slate-700 dark:text-slate-400 border-slate-300 dark:border-slate-600/30',
      emerald: isActive
        ? 'bg-emerald-600/30 dark:bg-emerald-500/20 text-emerald-800 dark:text-emerald-300 border-emerald-600/50 dark:border-emerald-400/50'
        : 'bg-white/90 dark:bg-slate-700/30 text-slate-700 dark:text-slate-400 border-slate-300 dark:border-slate-600/30'
    };
    return baseClasses[color as keyof typeof baseClasses];
  };

  return (
    <section
      ref={sectionRef}
      id="demo"
      className="py-20 bg-white dark:bg-slate-900 relative overflow-hidden"
    >
      {/* Background effects */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-emerald-500/10 dark:bg-emerald-500/5 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-emerald-600/10 dark:bg-cyan-500/5 rounded-full blur-3xl animate-pulse"></div>
      </div>

      {/* AI Particles */}
      <NeuralNetwork density={20} showDataFlow={true} />

      <Container className="relative z-10">
        {/* Section Header */}
        <div className="text-center space-y-6 mb-16">


          <h2 className="text-4xl md:text-6xl font-bold">
            <span className="text-slate-900 dark:text-white">
              MíRATE está
            </span>
            <br />
            <span className="text-emerald-700 dark:text-emerald-400">
              conectando conocimiento
            </span>
          </h2>

          <p className="text-slate-700 dark:text-slate-300 text-xl max-w-4xl mx-auto leading-relaxed">
            Simulación en tiempo real: El sistema mapeando proyectos, analizando metodologías y facilitando colaboraciones académicas
          </p>
        </div>

        {/* AI Demo Visualization */}
        <div className="max-w-6xl mx-auto">

          {/* Progress Bar */}
          <div className="relative mb-12">
            <div className="h-3 w-full rounded-full bg-slate-300/70 dark:bg-slate-700/50 border border-slate-400/50 dark:border-slate-600/50 overflow-hidden">
              <div
                ref={progressRef}
                className="h-full bg-emerald-600 transition-all duration-1000 shadow-lg rounded-full"
                style={{ width: '0%' }}
              />
            </div>

            <div className="mt-4 text-center">
              <span className="text-slate-600 dark:text-slate-400 text-sm">
                {isRunning ? (
                  <>Paso {currentStep + 1} de {aiSteps.length} • {aiSteps[currentStep]?.title || 'Iniciando...'}</>
                ) : (
                  'Iniciando simulación de IA...'
                )}
              </span>
            </div>
          </div>

          {/* AI Steps Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-12">
            {aiSteps.map((step, index) => (
              <div
                key={step.id}
                data-step={step.id}
                onClick={() => handleCardClick(step)}
                className={`relative overflow-hidden rounded-2xl p-4 sm:p-6 border transition-all duration-500 cursor-pointer hover:scale-105 hover:shadow-xl ${getColorClasses(step.color, index === currentStep)} ${isSendingMessage ? 'pointer-events-none opacity-75' : ''}`}
              >
                {/* Active indicator */}
                {index === currentStep && (
                  <div className="absolute top-2 right-2">
                    <div className={`w-3 h-3 bg-${step.color}-600 dark:bg-${step.color}-400 rounded-full animate-pulse`}></div>
                  </div>
                )}

                {/* Click indicator */}
                <div className="absolute top-2 left-2 opacity-0 hover:opacity-100 transition-opacity">
                  <div className="text-xs text-slate-500 dark:text-slate-400 bg-white/80 dark:bg-slate-800/80 px-2 py-1 rounded-lg">
                    💬 Pregúntame
                  </div>
                </div>

                {/* Loading overlay */}
                {isSendingMessage && (
                  <div className="absolute inset-0 bg-white/90 dark:bg-slate-800/90 flex items-center justify-center z-10 rounded-2xl">
                    <div className="flex flex-col items-center space-y-2">
                      <div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin"></div>
                      <span className="text-sm text-slate-600 dark:text-slate-400">Procesando...</span>
                    </div>
                  </div>
                )}

                <div className="flex items-center gap-3 mb-4">
                  <div className={`p-2 rounded-xl bg-slate-300/70 dark:bg-slate-700/50 ${index === currentStep ? `text-${step.color}-700 dark:text-${step.color}-400` : 'text-slate-500 dark:text-slate-500'}`}>
                    {step.icon}
                  </div>
                  <div>
                    <h3 className="font-bold text-lg text-slate-900 dark:text-white">{step.title}</h3>
                    <p className="text-sm text-slate-700 dark:text-slate-300 opacity-75">{step.desc}</p>
                  </div>
                </div>

                {/* Data counters */}
                <div className="space-y-2">
                  {Object.entries(step.data).map(([key, value]) => (
                    <div key={key} className="flex justify-between items-center">
                      <span className="text-sm capitalize text-slate-700 dark:text-slate-400">{key}:</span>
                      <span
                        data-counter={key}
                        className="font-bold text-slate-900 dark:text-white"
                      >
                        {index <= currentStep ? value : 0}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Start Demo Button */}
          {/* <div className="text-center mt-12">
            <button
              onClick={() => {
                setIsRunning(false);
                setTimeout(() => startAIDemo(), 500);
              }}
              className="inline-flex items-center gap-2 sm:gap-3 px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 text-white font-bold rounded-2xl shadow-2xl hover:scale-105 transform transition-all duration-300 text-sm sm:text-base"
            >
              <BrainIcon className="w-6 h-6" />
              {isRunning ? 'Reiniciar Demo de IA' : 'Iniciar Demo de IA'}
            </button>
          </div> */}
        </div>
      </Container>
    </section>
  );
}