import React from "react";
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  ActivityIndicator,
  StyleProp,
  Platform,
} from "react-native";
import { LinearGradient, LinearGradientProps } from "expo-linear-gradient";

type GradientProps = Omit<LinearGradientProps, "style" | "children">;

export interface AppButtonProps {
  title: string;
  onPress: () => void;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  disabled?: boolean;
  loading?: boolean;
  activeOpacity?: number;
  backgroundColor?: string;
  gradientProps?: GradientProps;
  loadingIndicatorColor?: string;
  accessibilityLabel?: string;
  testID?: string;
}

const DEFAULT_ACTIVE_OPACITY = 0.7;
const DEFAULT_BACKGROUND_COLOR = Platform.OS === "ios" ? "#007AFF" : "#2196F3"; // iOS blue / Android blue

const AppButton: React.FC<AppButtonProps> = ({
  title,
  onPress,
  style,
  textStyle,
  disabled = false,
  loading = false,
  activeOpacity = DEFAULT_ACTIVE_OPACITY,
  backgroundColor,
  gradientProps,
  loadingIndicatorColor,
  accessibilityLabel,
  testID,
}) => {
  const isActuallyDisabled = disabled || loading;

  const getLoadingIndicatorColor = () => {
    if (loadingIndicatorColor) return loadingIndicatorColor;
    if (gradientProps) {
      return "#FFFFFF";
    }
  };

  const buttonContent = loading ? (
    <ActivityIndicator
      size="small"
      color={getLoadingIndicatorColor()}
      testID={testID ? `${testID}-loading-indicator` : undefined}
    />
  ) : (
    <Text
      style={[styles.text, textStyle]}
      testID={testID ? `${testID}-text` : undefined}
    >
      {title}
    </Text>
  );

  const baseButtonStyles: ViewStyle[] = [
    styles.button,
    isActuallyDisabled ? styles.disabled : {},
  ];

  if (gradientProps && gradientProps.colors && gradientProps.colors.length > 0) {
    return (
      <TouchableOpacity
        onPress={onPress}
        disabled={isActuallyDisabled}
        activeOpacity={activeOpacity}
        accessibilityRole="button"
        accessibilityState={{ disabled: isActuallyDisabled }}
        accessibilityLabel={accessibilityLabel || title}
        testID={testID}
      >
        <LinearGradient
          {...gradientProps}
          style={[...baseButtonStyles, styles.gradientContainer, style]}
        >
          {buttonContent}
        </LinearGradient>
      </TouchableOpacity>
    );
  } else {
    const solidBgColor = backgroundColor || DEFAULT_BACKGROUND_COLOR;
    return (
      <TouchableOpacity
        onPress={onPress}
        disabled={isActuallyDisabled}
        activeOpacity={activeOpacity}
        style={[
          ...baseButtonStyles,
          { backgroundColor: solidBgColor },
          style,
        ]}
        accessibilityRole="button"
        accessibilityState={{ disabled: isActuallyDisabled }}
        accessibilityLabel={accessibilityLabel || title}
        testID={testID}
      >
        {buttonContent}
      </TouchableOpacity>
    );
  }
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
    minHeight: 48,
    flexDirection: "row",
    ...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  gradientContainer: {
  },
  text: {
    color: "#FFFFFF", 
    fontSize: 16,
    fontWeight: "600",
    textAlign: "center",
  },
  disabled: {
    opacity: 0.6,
    ...(Platform.OS === "android" && { elevation: 0 }),
    ...(Platform.OS === "ios" && {
      shadowOpacity: 0,
    }),
  },
});

export default AppButton;