// LoadingScreen.tsx
import React, { useRef, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  Animated,
  Easing,
  Dimensions,
} from 'react-native';

const { width, height } = Dimensions.get('window');

interface LoadingScreenProps {
  message?: string;
  spinnerColor?: string;
  backgroundColor?: string;
  textColor?: string;
  fullScreen?: boolean;
}

interface AnimatedDotProps {
  delay: number;
  color: string;
}

const LoadingScreen: React.FC<LoadingScreenProps> = ({
  message = 'در حال بارگذاری ...',
  spinnerColor = '#6366F1',
  backgroundColor = '#FFFFFF',
  textColor = '#4B5563',
  fullScreen = true,
}) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(0.9)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 600,
        easing: Easing.out(Easing.ease),
        useNativeDriver: true,
      }),
      Animated.spring(scaleAnim, {
        toValue: 1,
        friction: 8,
        tension: 40,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  return (
    <View style={[styles.container, fullScreen && styles.fullScreen, { backgroundColor }]}>
      <Animated.View
        style={[
          styles.content,
          {
            opacity: fadeAnim,
            transform: [{ scale: scaleAnim }],
          },
        ]}>
        <View style={styles.spinnerWrapper}>
          <ActivityIndicator size="large" color={spinnerColor} />
        </View>

        {message ? <Text style={[styles.message, { color: textColor }]}>{message}</Text> : null}

        <View style={styles.dotContainer}>
          <AnimatedDot delay={0} color={spinnerColor} />
          <AnimatedDot delay={200} color={spinnerColor} />
          <AnimatedDot delay={400} color={spinnerColor} />
        </View>
      </Animated.View>
    </View>
  );
};

const AnimatedDot: React.FC<AnimatedDotProps> = ({ delay, color }) => {
  const anim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(anim, {
          toValue: 1,
          duration: 400,
          delay,
          easing: Easing.inOut(Easing.ease),
          useNativeDriver: true,
        }),
        Animated.timing(anim, {
          toValue: 0,
          duration: 400,
          easing: Easing.inOut(Easing.ease),
          useNativeDriver: true,
        }),
      ])
    ).start();
  }, [delay]);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -8],
  });

  return (
    <Animated.View
      style={[
        styles.dot,
        {
          backgroundColor: color,
          transform: [{ translateY }],
        },
      ]}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fullScreen: {
    width,
    height,
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 999,
  },
  content: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  spinnerWrapper: {
    marginBottom: 24,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 40,
    backgroundColor: 'transparent',
  },
  message: {
    fontSize: 16,
    fontWeight: '500',
    letterSpacing: 0.5,
    marginBottom: 16,
    textAlign: 'center',
  },
  dotContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 8,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 5,
  },
});

export default LoadingScreen;