import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle, useColorScheme, ActivityIndicator } from 'react-native';
import Animated, { 
  useAnimatedStyle, 
  useSharedValue, 
  withSpring,
  withTiming
} from 'react-native-reanimated';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Shadows } from '@/constants/theme';

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

interface AnimatedButtonProps {
  title: string;
  onPress: () => void;
  style?: ViewStyle | ViewStyle[];
  textStyle?: TextStyle | TextStyle[];
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  colors?: string[];
  disabled?: boolean;
  loading?: boolean;
  icon?: keyof typeof Ionicons.glyphMap;
}

export default function AnimatedButton({ 
  title, 
  onPress, 
  style, 
  textStyle, 
  variant = 'primary',
  colors,
  disabled = false,
  loading = false,
  icon
}: AnimatedButtonProps) {
  const colorScheme = useColorScheme() ?? 'light';
  const theme = Colors[colorScheme as 'light' | 'dark'];
  
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

  const handlePressIn = () => {
    scale.value = withSpring(0.96, { damping: 10, stiffness: 200 });
    opacity.value = withTiming(0.8, { duration: 100 });
  };

  const handlePressOut = () => {
    scale.value = withSpring(1, { damping: 10, stiffness: 200 });
    opacity.value = withTiming(1, { duration: 150 });
  };

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

  const defaultGradient = colors || theme.gradients.primary;

  const renderContent = () => {
    if (variant === 'primary') {
      return (
        <LinearGradient
          colors={(disabled ? [theme.border, theme.border] : defaultGradient) as any}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={[styles.gradient, style]}
        >
          {loading ? (
            <ActivityIndicator color="#FFF" size="small" />
          ) : (
            <>
              {icon && <Ionicons name={icon} size={20} color="#FFF" style={{ marginRight: 8 }} />}
              <Text style={[styles.text, styles.primaryText, textStyle]}>{title}</Text>
            </>
          )}
        </LinearGradient>
      );
    }
    
    // For other variants, standard View is fine
    return (
      <Animated.View style={[
        styles.baseButton,
        variant === 'secondary' && { backgroundColor: theme.secondary },
        variant === 'outline' && { borderWidth: 1, borderColor: theme.border },
        variant === 'ghost' && { backgroundColor: 'transparent' },
        style
      ]}>
          {icon && (
            <Ionicons 
              name={icon} 
              size={20} 
              color={variant === 'secondary' ? theme.primary : theme.text} 
              style={{ marginRight: 8 }} 
            />
          )}
          <Text style={[
            styles.text, 
            variant === 'secondary' && { color: theme.primary },
            variant === 'outline' && { color: theme.text },
            variant === 'ghost' && { color: theme.text },
            textStyle
          ]}>{title}</Text>
      </Animated.View>
    );
  };

  return (
    <AnimatedTouchable
      activeOpacity={1}
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      disabled={disabled || loading}
      style={[animatedStyle, Shadows.glow, variant !== 'primary' && { shadowOpacity: 0 }]}
    >
      {renderContent()}
    </AnimatedTouchable>
  );
}

const styles = StyleSheet.create({
  gradient: {
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  baseButton: {
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: '700',
  },
  primaryText: {
    color: '#FFF',
  }
});