ani67/src/components/chatbot/DynamicLoader.tsx

import { useState, useEffect } from "react";
import { Loader2, Bot, Clock, Wifi, Coffee } from "lucide-react";

interface LoadingState {
  message: string;
  icon: React.ReactNode;
  duration: number; // en segundos
}

const loadingStates: LoadingState[] = [
  {
    message: "Asistente escribiendo...",
    icon: <Loader2 className="w-4 h-4 animate-spin" />,
    duration: 4
  },
  {
    message: "Analizando tu consulta...",
    icon: <Bot className="w-4 h-4 animate-pulse" />,
    duration: 4
  },
  {
    message: "Preparando tu respuesta...",
    icon: <Wifi className="w-4 h-4 animate-pulse" />,
    duration: 4
  },
  {
    message: "Casi listo...",
    icon: <Coffee className="w-4 h-4 animate-bounce" />,
    duration: 8
  }
];

export const DynamicLoader = () => {
  const [currentStateIndex, setCurrentStateIndex] = useState(0);
  const [elapsedTime, setElapsedTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setElapsedTime(prev => {
        const newTime = prev + 1;
        
        // Calcular el tiempo acumulado hasta el estado actual
        let accumulatedTime = 0;
        for (let i = 0; i <= currentStateIndex; i++) {
          accumulatedTime += loadingStates[i].duration;
        }
        
        // Si hemos superado el tiempo del estado actual, cambiar al siguiente
        if (newTime >= accumulatedTime && currentStateIndex < loadingStates.length - 1) {
          setCurrentStateIndex(prev => prev + 1);
        }
        
        return newTime;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [currentStateIndex]);

  // Reset cuando el componente se monta
  useEffect(() => {
    setCurrentStateIndex(0);
    setElapsedTime(0);
  }, []);

  const currentState = loadingStates[currentStateIndex] || loadingStates[0];

  return (
    <div className="flex justify-start">
      <div className="bg-muted text-foreground px-4 py-3 rounded-2xl max-w-xs">
        <div className="flex items-center space-x-2">
          {currentState.icon}
          <span className="text-sm">{currentState.message}</span>
        </div>
        {elapsedTime > 10 && (
          <div className="text-xs text-muted-foreground mt-1">
            Tiempo transcurrido: {elapsedTime}s
          </div>
        )}
      </div>
    </div>
  );
};