import React from "react";
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  ActivityIndicator,
  ViewStyle,
  TextStyle,
  StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography";

type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
type ButtonSize = "sm" | "md" | "lg";

interface MinimalButtonProps {
  title: string;
  onPress: () => void;
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
}

/**
 * MinimalButton - Clean button component with solid colors
 *
 * Variants:
 * - primary: Solid primary background
 * - secondary: Outlined with primary color
 * - tertiary: Text only, no background
 * - danger: Solid danger background
 *
 * Sizes:
 * - sm: 12px vertical padding, 16px horizontal
 * - md: 14px vertical padding, 24px horizontal (default)
 * - lg: 16px vertical padding, 32px horizontal
 */
export function MinimalButton({
  title,
  onPress,
  variant = "primary",
  size = "md",
  loading = false,
  disabled = false,
  style,
  textStyle,
}: MinimalButtonProps) {
  const { colors } = useTheme();

  const isDisabled = disabled || loading;

  // Get button styles based on variant
  const getButtonStyle = (): ViewStyle => {
    const baseStyle: ViewStyle = {
      borderRadius: 10,
      alignItems: "center",
      justifyContent: "center",
      opacity: isDisabled ? 0.5 : 1,
    };

    // Size-specific padding
    const sizeStyles: Record<
      ButtonSize,
      { paddingVertical: number; paddingHorizontal: number }
    > = {
      sm: { paddingVertical: 12, paddingHorizontal: 16 },
      md: { paddingVertical: 14, paddingHorizontal: 24 },
      lg: { paddingVertical: 16, paddingHorizontal: 32 },
    };

    const variantStyles: Record<ButtonVariant, ViewStyle> = {
      primary: {
        backgroundColor: colors.primary,
      },
      secondary: {
        backgroundColor: "transparent",
        borderWidth: 1.5,
        borderColor: colors.primary,
      },
      tertiary: {
        backgroundColor: "transparent",
      },
      danger: {
        backgroundColor: colors.danger,
      },
    };

    return {
      ...baseStyle,
      ...sizeStyles[size],
      ...variantStyles[variant],
    };
  };

  // Get text styles based on variant
  const getTextStyle = (): TextStyle => {
    const baseTextStyle: TextStyle = {
      fontSize: fontSize.base,
      fontWeight: fontWeight.semibold,
    };

    const variantTextStyles: Record<ButtonVariant, TextStyle> = {
      primary: {
        color: colors.white,
      },
      secondary: {
        color: colors.primary,
      },
      tertiary: {
        color: colors.primary,
      },
      danger: {
        color: colors.white,
      },
    };

    return {
      ...baseTextStyle,
      ...variantTextStyles[variant],
    };
  };

  return (
    <TouchableOpacity
      style={[getButtonStyle(), style]}
      onPress={onPress}
      disabled={isDisabled}
      activeOpacity={0.7}
    >
      {loading ? (
        <ActivityIndicator
          size="small"
          color={
            variant === "secondary" || variant === "tertiary"
              ? colors.primary
              : colors.white
          }
        />
      ) : (
        <Text style={[getTextStyle(), textStyle]}>{title}</Text>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  // No static styles needed - all dynamic based on theme
});
