/**
 * Animated Button Component
 * Modern button with gradient backgrounds and smooth animations
 */

import React, { useRef } from 'react';
import {
    TouchableOpacity,
    Text,
    StyleSheet,
    Animated,
    ActivityIndicator,
    ViewStyle,
    TextStyle,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { theme } from '../styles/theme';
import { haptics } from '../utils/haptics';

interface AnimatedButtonProps {
    title: string;
    onPress: () => void;
    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
    size?: 'sm' | 'md' | 'lg';
    loading?: boolean;
    disabled?: boolean;
    style?: ViewStyle;
    textStyle?: TextStyle;
    icon?: React.ReactNode;
}

export function AnimatedButton({
    title,
    onPress,
    variant = 'primary',
    size = 'md',
    loading = false,
    disabled = false,
    style,
    textStyle,
    icon,
}: AnimatedButtonProps) {
    const scale = useRef(new Animated.Value(1)).current;

    const handlePressIn = () => {
        Animated.spring(scale, {
            toValue: 0.95,
            useNativeDriver: true,
        }).start();
    };

    const handlePressOut = () => {
        Animated.spring(scale, {
            toValue: 1,
            useNativeDriver: true,
        }).start();
    };

    const handlePress = () => {
        if (!disabled && !loading) {
            haptics.light();
            onPress();
        }
    };

    const getGradientColors = () => {
        if (disabled) return ['#9ca3af', '#6b7280'] as const;
        switch (variant) {
            case 'secondary':
                return theme.gradients.purple;
            case 'success':
                return theme.gradients.success;
            case 'danger':
                return theme.gradients.danger;
            case 'warning':
                return theme.gradients.warning;
            default:
                return theme.gradients.primary;
        }
    };

    const getSizeStyles = () => {
        switch (size) {
            case 'sm':
                return { paddingVertical: 8, paddingHorizontal: 16, fontSize: 14 };
            case 'lg':
                return { paddingVertical: 16, paddingHorizontal: 32, fontSize: 18 };
            default:
                return { paddingVertical: 12, paddingHorizontal: 24, fontSize: 16 };
        }
    };

    const sizeStyles = getSizeStyles();

    return (
        <TouchableOpacity
            onPressIn={handlePressIn}
            onPressOut={handlePressOut}
            onPress={handlePress}
            disabled={disabled || loading}
            activeOpacity={0.9}
            style={[styles.container, style]}
        >
            <Animated.View style={{ transform: [{ scale }], width: '100%' }}>
                <LinearGradient
                    colors={getGradientColors()}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={[
                        styles.gradient,
                        { paddingVertical: sizeStyles.paddingVertical, paddingHorizontal: sizeStyles.paddingHorizontal },
                    ]}
                >
                    {loading ? (
                        <ActivityIndicator color="#fff" />
                    ) : (
                        <>
                            {icon && <React.Fragment>{icon}</React.Fragment>}
                            <Text
                                style={[
                                    styles.text,
                                    { fontSize: sizeStyles.fontSize },
                                    icon ? { marginLeft: 8 } : {},
                                    textStyle,
                                ]}
                            >
                                {title}
                            </Text>
                        </>
                    )}
                </LinearGradient>
            </Animated.View>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    gradient: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 12,
        ...theme.shadows.medium,
    },
    text: {
        color: '#fff',
        fontWeight: '600',
        textAlign: 'center',
    },
});
