import React, { useEffect, useRef } from "react";
import { Animated, View } from "react-native";
import { useTheme } from "../../contexts/ThemeContext";

export function TypingIndicator() {
  const { colors, isDark } = useTheme();
  const dot1 = useRef(new Animated.Value(0)).current;
  const dot2 = useRef(new Animated.Value(0)).current;
  const dot3 = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const animate = (dot: Animated.Value, delay: number) =>
      Animated.loop(
        Animated.sequence([
          Animated.delay(delay),
          Animated.timing(dot, { toValue: 1, duration: 300, useNativeDriver: true }),
          Animated.timing(dot, { toValue: 0, duration: 300, useNativeDriver: true }),
        ])
      );

    const a1 = animate(dot1, 0);
    const a2 = animate(dot2, 200);
    const a3 = animate(dot3, 400);
    a1.start();
    a2.start();
    a3.start();

    return () => { a1.stop(); a2.stop(); a3.stop(); };
  }, [dot1, dot2, dot3]);

  const bubbleBg = isDark ? "#252538" : colors.bgSecondary;
  const dotColor = colors.textMuted;

  return (
    <View
      style={{
        flexDirection: "row",
        marginVertical: 4,
        paddingHorizontal: 12,
        justifyContent: "flex-start",
      }}
    >
      <View
        style={{
          borderRadius: 16,
          borderTopLeftRadius: 4,
          paddingHorizontal: 16,
          paddingVertical: 14,
          backgroundColor: bubbleBg,
          flexDirection: "row",
          gap: 4,
          alignItems: "center",
        }}
      >
        {[dot1, dot2, dot3].map((dot, i) => (
          <Animated.View
            key={i}
            style={{
              width: 8,
              height: 8,
              borderRadius: 4,
              backgroundColor: dotColor,
              opacity: dot.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }),
              transform: [
                {
                  translateY: dot.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, -4],
                  }),
                },
              ],
            }}
          />
        ))}
      </View>
    </View>
  );
}