import { LinearGradient } from "expo-linear-gradient";
import {
  Pressable,
  StyleSheet,
  Text,
  type StyleProp,
  type ViewStyle,
} from "react-native";

import { Brand, BrandFont } from "@/constants/theme";

type Variant = "solid" | "outline";

export type BrandPressableProps = {
  label: string;
  onPress?: () => void;
  variant?: Variant;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

/**
 * Full-width pill button used throughout the gumble flow. The `solid` variant
 * uses the magenta→pink brand gradient. The `outline` variant renders an
 * outlined button on a dark background, used for the secondary "Log In" call
 * to action on the onboarding screen.
 */
export function BrandPressable({
  label,
  onPress,
  variant = "solid",
  disabled = false,
  style,
}: BrandPressableProps) {
  if (variant === "outline") {
    return (
      <Pressable
        accessibilityRole="button"
        accessibilityState={{ disabled }}
        disabled={disabled}
        onPress={onPress}
        style={({ pressed }) => [
          styles.base,
          styles.outline,
          disabled && styles.disabled,
          pressed && styles.pressed,
          style,
        ]}
      >
        <Text style={[styles.label, styles.outlineLabel]}>{label}</Text>
      </Pressable>
    );
  }

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityState={{ disabled }}
      disabled={disabled}
      onPress={onPress}
      style={({ pressed }) => [
        styles.base,
        disabled && styles.disabled,
        pressed && styles.pressed,
        style,
      ]}
    >
      <LinearGradient
        colors={[...Brand.gradient]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={styles.gradient}
      >
        <Text style={[styles.label, styles.solidLabel]}>{label}</Text>
      </LinearGradient>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    height: 55,
    borderRadius: 28,
    overflow: "hidden",
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "stretch",
  },
  gradient: {
    flex: 1,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  label: {
    fontSize: 16,
    lineHeight: 22,
    fontFamily: BrandFont.poppinsSemiBold,
  },
  solidLabel: {
    color: Brand.text,
  },
  outline: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: Brand.border,
  },
  outlineLabel: {
    color: Brand.text,
  },
  pressed: {
    opacity: 0.8,
  },
  disabled: {
    opacity: 0.4,
  },
});
