import React, { useRef } from 'react';
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, Animated, ViewStyle, StyleProp } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, radii, spacing } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  icon?: keyof typeof Ionicons.glyphMap;
  loading?: boolean;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
}

export function Button({
  title,
  onPress,
  variant = 'primary',
  size = 'md',
  icon,
  loading,
  disabled,
  style,
}: ButtonProps) {
  const { fontSize } = useResponsive();
  const pressAnim = useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(pressAnim, { toValue: 0.96, tension: 100, friction: 5, useNativeDriver: true }).start();
  };

  const handlePressOut = () => {
    Animated.spring(pressAnim, { toValue: 1, tension: 100, friction: 5, useNativeDriver: true }).start();
  };

  const variantStyles = {
    primary: { bg: colors.primary[600], text: colors.white, icon: colors.white },
    secondary: { bg: colors.gray[100], text: colors.gray[700], icon: colors.gray[600] },
    danger: { bg: colors.danger[600], text: colors.white, icon: colors.white },
    ghost: { bg: 'transparent', text: colors.primary[600], icon: colors.primary[600] },
  };

  const sizeStyles = {
    sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: fontSize.caption },
    md: { paddingVertical: 10, paddingHorizontal: 16, fontSize: fontSize.bodySmall },
    lg: { paddingVertical: 14, paddingHorizontal: 20, fontSize: fontSize.body },
  };

  const v = variantStyles[variant];
  const s = sizeStyles[size];

  return (
    <Animated.View style={[{ transform: [{ scale: pressAnim }] }, style]}>
      <TouchableOpacity
        style={[
          styles.button,
          { backgroundColor: v.bg, paddingVertical: s.paddingVertical, paddingHorizontal: s.paddingHorizontal },
          (disabled || loading) && styles.disabled,
        ]}
        onPress={onPress}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        disabled={disabled || loading}
        activeOpacity={1}
      >
        {loading ? (
          <ActivityIndicator size="small" color={v.icon} />
        ) : (
          <>
            {icon && <Ionicons name={icon} size={size === 'sm' ? 14 : 16} color={v.icon} style={styles.icon} />}
            <Text style={[styles.text, { color: v.text, fontSize: s.fontSize }]}>{title}</Text>
          </>
        )}
      </TouchableOpacity>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: radii.md,
    gap: spacing.sm,
  },
  disabled: {
    opacity: 0.5,
  },
  icon: {
    marginRight: 2,
  },
  text: {
    fontWeight: '600',
  },
});