import React, { useEffect } from 'react';
import { StyleSheet, Text, Pressable, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  withSpring,
  interpolate,
  Easing,
} from 'react-native-reanimated';
import { COLORS } from '../constants/colors';

export const ShareButton: React.FC = () => {
  const shimmerProgress = useSharedValue(0);
  const scale = useSharedValue(1);

  useEffect(() => {
    shimmerProgress.value = withRepeat(
      withTiming(1, { duration: 3000, easing: Easing.linear }),
      -1,
      false
    );
  }, []);

  const buttonStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const shimmerStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: interpolate(shimmerProgress.value, [0, 1], [-200, 400]) },
    ],
  }));

  return (
    <Animated.View style={[styles.container, buttonStyle]}>
      <Pressable
        onPressIn={() => {
          scale.value = withSpring(0.94, { damping: 10, stiffness: 200 });
        }}
        onPressOut={() => {
          scale.value = withSpring(1, { damping: 10, stiffness: 200 });
        }}
        onPress={() => {}}
        style={styles.button}
      >
        <Text style={styles.text}>SHARE RESULT</Text>

        {/* Shimmer Effect */}
        <View style={styles.shimmerContainer}>
          <Animated.View style={[styles.shimmer, shimmerStyle]}>
            <View style={styles.shimmerGradient} />
          </Animated.View>
        </View>
      </Pressable>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 6,
  },
  button: {
    backgroundColor: COLORS.primaryMuted,
    borderRadius: 24,
    borderWidth: 1,
    borderColor: COLORS.primaryBorder,
    paddingVertical: 14,
    paddingHorizontal: 32,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  text: {
    color: COLORS.primary,
    fontSize: 13,
    fontWeight: '800',
    letterSpacing: 2,
  },
  shimmerContainer: {
    ...StyleSheet.absoluteFillObject,
    overflow: 'hidden',
    borderRadius: 24,
  },
  shimmer: {
    width: 80,
    height: '100%',
    transform: [{ skewX: '-20deg' }],
  },
  shimmerGradient: {
    flex: 1,
    backgroundColor: 'rgba(163, 230, 53, 0.08)',
  },
});