import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useColors } from '../../lib/theme';

/**
 * Sticky Bottom-Bar mit Primary-CTA (+ optional Secondary darüber).
 * Layout-Pattern aus Duolingo: voll-breit, padding, SafeArea-aware.
 */
export function CTABar({
  primaryLabel,
  onPrimary,
  primaryDisabled,
  primaryLoading,
  secondaryLabel,
  onSecondary,
}: {
  primaryLabel: string;
  onPrimary: () => void;
  primaryDisabled?: boolean;
  primaryLoading?: boolean;
  secondaryLabel?: string;
  onSecondary?: () => void;
}) {
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const disabled = !!primaryDisabled || !!primaryLoading;

  return (
    <View
      style={{
        paddingHorizontal: 20,
        paddingTop: 12,
        paddingBottom: insets.bottom + 12,
        backgroundColor: colors.bg,
        borderTopWidth: 1,
        borderTopColor: colors.border,
        gap: 8,
      }}
    >
      <TouchableOpacity
        onPress={onPrimary}
        disabled={disabled}
        activeOpacity={0.85}
        style={{
          backgroundColor: colors.brandOrange,
          borderRadius: 14,
          paddingVertical: 16,
          alignItems: 'center',
          opacity: disabled ? 0.5 : 1,
        }}
      >
        {primaryLoading ? (
          <ActivityIndicator color="#ffffff" />
        ) : (
          <Text
            style={{
              fontFamily: 'Nunito_700Bold',
              fontSize: 16,
              color: '#ffffff',
              letterSpacing: 0.2,
            }}
          >
            {primaryLabel}
          </Text>
        )}
      </TouchableOpacity>

      {secondaryLabel && onSecondary ? (
        <TouchableOpacity
          onPress={onSecondary}
          activeOpacity={0.6}
          style={{ paddingVertical: 10, alignItems: 'center' }}
        >
          <Text
            style={{
              fontFamily: 'Nunito_600SemiBold',
              fontSize: 14,
              color: colors.textMuted,
            }}
          >
            {secondaryLabel}
          </Text>
        </TouchableOpacity>
      ) : null}
    </View>
  );
}