/** Primary UI button — gradient / outline / ghost / danger variants. */
import React from 'react';
import {ActivityIndicator, Pressable, StyleSheet, Text, ViewStyle} from 'react-native';
import {COLORS} from '../theme/colors';
import {FONT_SIZE, RADIUS, SPACING} from '../theme/spacing';
import {Gradient} from './Gradient';

interface Props {
  label: string;
  onPress: () => void;
  variant?: 'primary' | 'outline' | 'ghost' | 'danger';
  size?: 's' | 'm' | 'l';
  disabled?: boolean;
  loading?: boolean;
  style?: ViewStyle;
}

export function Button({
  label,
  onPress,
  variant = 'primary',
  size = 'm',
  disabled,
  loading,
  style,
}: Props): React.JSX.Element {
  const pad = size === 's' ? 8 : size === 'l' ? 16 : 12;
  const font = size === 's' ? FONT_SIZE.s : size === 'l' ? FONT_SIZE.l : FONT_SIZE.m;
  const isDisabled = disabled || loading;

  const base = [
    styles.base,
    {paddingVertical: pad},
    variant === 'outline' && styles.outline,
    variant === 'ghost' && styles.ghost,
    variant === 'danger' && {backgroundColor: COLORS.danger},
    isDisabled && {opacity: 0.55},
    style as ViewStyle,
  ];

  const textColor =
    variant === 'outline' ? COLORS.purple : variant === 'ghost' ? COLORS.secondaryText : COLORS.white;

  if (variant === 'primary') {
    return (
      <Pressable onPress={onPress} disabled={isDisabled} style={base}>
        <Gradient style={styles.grad}>
          {loading ? (
            <ActivityIndicator color={COLORS.white} size="small" />
          ) : (
            <Text style={[styles.text, {color: textColor, fontSize: font}]}>{label}</Text>
          )}
        </Gradient>
      </Pressable>
    );
  }

  return (
    <Pressable onPress={onPress} disabled={isDisabled} style={base}>
      {loading ? (
        <ActivityIndicator color={textColor} size="small" />
      ) : (
        <Text style={[styles.text, {color: textColor, fontSize: font}]}>{label}</Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    borderRadius: RADIUS.m,
    overflow: 'hidden',
    alignSelf: 'stretch',
  },
  grad: {
    paddingVertical: 12,
    paddingHorizontal: SPACING.xl,
    alignItems: 'center',
    justifyContent: 'center',
  },
  outline: {
    borderWidth: 1.5,
    borderColor: COLORS.purple,
    paddingHorizontal: SPACING.xl,
    alignItems: 'center',
  },
  ghost: {
    paddingHorizontal: SPACING.l,
    alignItems: 'center',
  },
  text: {fontWeight: '700'},
});