import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSubscriptionRestriction } from '../../hooks/useSubscriptionRestriction';
import { navigateApp } from '../../navigation/appNavigation';
import { colors, radii, spacing } from '../../constants/theme';

type Props = {
  hidden?: boolean;
};

export function SubscriptionExpiredBanner({ hidden }: Props) {
  const { restricted, message, isOwner } = useSubscriptionRestriction();

  if (hidden || !restricted) {
    return null;
  }

  return (
    <View style={styles.banner}>
      <Text style={styles.title}>Trial or subscription expired</Text>
      <Text style={styles.message}>{message}</Text>
      {isOwner ? (
        <Pressable style={styles.button} onPress={() => navigateApp('Settings')}>
          <Text style={styles.buttonText}>Go to Subscription</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  banner: {
    backgroundColor: '#fff8e6',
    borderLeftWidth: 4,
    borderLeftColor: colors.warning,
    borderRadius: radii.md,
    padding: spacing.md,
    marginBottom: spacing.md,
    borderWidth: 1,
    borderColor: '#ffe8a3',
  },
  title: { fontWeight: '700', color: colors.text, marginBottom: spacing.xs },
  message: { color: colors.textMuted, lineHeight: 20, marginBottom: spacing.sm },
  button: {
    alignSelf: 'flex-start',
    backgroundColor: colors.warning,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: radii.sm,
  },
  buttonText: { fontWeight: '600', color: colors.text },
});