import { Pressable, StyleSheet, Text } from 'react-native';
import { fonts, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
import { AppLoadingSpinner } from './AppLoadingSpinner';

export function AppButton({
  label,
  onPress,
  variant = 'primary',
  disabled,
  loading,
  compact,
  testID,
}: {
  label: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
  disabled?: boolean;
  loading?: boolean;
  compact?: boolean;
  testID?: string;
}) {
  const isPrimary = variant === 'primary';
  const isSecondary = variant === 'secondary';
  const isOutline = variant === 'outline';
  const isDanger = variant === 'danger';
  const labelColor =
    isPrimary || isDanger || isSecondary
      ? m3Colors.onPrimary
      : isOutline || variant === 'ghost'
        ? m3Colors.primary
        : m3Colors.onPrimary;

  return (
    <Pressable
      testID={testID}
      accessibilityRole="button"
      onPress={onPress}
      disabled={disabled || loading}
      style={({ pressed }) => [
        styles.btn,
        compact && styles.btnCompact,
        isPrimary && { backgroundColor: m3Colors.primary },
        isSecondary && { backgroundColor: m3Colors.surfaceContainerHigh },
        isDanger && { backgroundColor: m3Colors.error },
        isOutline && {
          backgroundColor: 'transparent',
          borderWidth: 1,
          borderColor: m3Colors.outline,
        },
        variant === 'ghost' && { backgroundColor: 'transparent' },
        (disabled || loading) && { opacity: 0.38 },
        pressed && { opacity: 0.85 },
        (isPrimary || isSecondary) && m3Elevation.level1,
      ]}
    >
      {loading ? (
        <AppLoadingSpinner color={labelColor} />
      ) : (
        <Text style={[styles.btnText, { color: labelColor }]}>{label}</Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  btn: {
    height: 48,
    borderRadius: m3Shape.cornerFull,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.xl,
  },
  btnCompact: { height: 40, paddingHorizontal: spacing.sm },
  btnText: { fontSize: 14, fontFamily: fonts.medium, letterSpacing: 0.1 },
});