managarten/memoro/apps/mobile/features/rating/components/RatingPromptModal.tsx

import React, { useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import BaseModal from '~/components/atoms/BaseModal';
import Text from '~/components/atoms/Text';
import Button from '~/components/atoms/Button';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useRatingStore } from '../store/ratingStore';
import { useRating } from '../hooks/useRating';
import { useAnalytics } from '~/features/analytics';

interface RatingPromptModalProps {
  isVisible: boolean;
  onClose: () => void;
}

/**
 * Modal that prompts users to rate the app after reaching certain milestones
 */
export const RatingPromptModal: React.FC<RatingPromptModalProps> = ({ isVisible, onClose }) => {
  const { t } = useTranslation();
  const { isDark } = useTheme();
  const { track } = useAnalytics();
  const { requestRating } = useRating();
  const { markRated, markDeclined, markNeverAsk, memoCreatedCount } = useRatingStore();

  /**
   * Handle "Rate Now" button press
   */
  const handleRateNow = useCallback(async () => {
    track('rating_accepted', {
      memo_count: memoCreatedCount,
      source: 'automatic_prompt',
    });

    // Request the rating
    const success = await requestRating();

    if (success) {
      markRated();
    }

    onClose();
  }, [requestRating, markRated, onClose, track, memoCreatedCount]);

  /**
   * Handle "Maybe Later" button press
   */
  const handleMaybeLater = useCallback(() => {
    track('rating_declined', {
      memo_count: memoCreatedCount,
      action: 'maybe_later',
    });

    markDeclined();
    onClose();
  }, [markDeclined, onClose, track, memoCreatedCount]);

  /**
   * Handle "Don't Ask Again" button press
   */
  const handleNeverAsk = useCallback(() => {
    track('rating_never_ask', {
      memo_count: memoCreatedCount,
      action: 'never_ask',
    });

    markNeverAsk();
    onClose();
  }, [markNeverAsk, onClose, track, memoCreatedCount]);

  const styles = StyleSheet.create({
    content: {
      paddingVertical: 8,
    },
    message: {
      fontSize: 16,
      lineHeight: 24,
      color: isDark ? '#CCCCCC' : '#666666',
      marginBottom: 24,
    },
    highlight: {
      fontSize: 16,
      lineHeight: 24,
      fontWeight: '600',
      color: isDark ? '#FFFFFF' : '#000000',
      marginBottom: 16,
    },
    buttonContainer: {
      gap: 12,
    },
    secondaryButton: {
      marginTop: 8,
    },
    neverAskButton: {
      marginTop: 16,
    },
  });

  return (
    <BaseModal
      isVisible={isVisible}
      onClose={onClose}
      title={t('rating.prompt_title', 'Gefällt dir Memoro?')}
      size="small"
      animationType="fade"
      closeOnOverlayPress={false}
      showCloseButton={false}
      hideFooter={true}
      scrollable={false}>
      <View style={styles.content}>
        <Text style={styles.highlight}>
          {t(
            'rating.prompt_milestone',
            'Du hast bereits {{count}} Memos erstellt! 🎉',
            { count: memoCreatedCount }
          )}
        </Text>

        <Text style={styles.message}>
          {t(
            'rating.prompt_message',
            'Es würde uns sehr freuen, wenn du Memoro im App Store bewerten würdest. Deine Unterstützung hilft uns, die App weiter zu verbessern.'
          )}
        </Text>

        <View style={styles.buttonContainer}>
          {/* Primary Action: Rate Now */}
          <Button
            title={t('rating.rate_now', 'Jetzt bewerten')}
            onPress={handleRateNow}
            variant="primary"
          />

          {/* Secondary Action: Maybe Later */}
          <Button
            title={t('rating.maybe_later', 'Vielleicht später')}
            onPress={handleMaybeLater}
            variant="secondary"
            style={styles.secondaryButton}
          />

          {/* Tertiary Action: Never Ask */}
          <Button
            title={t('rating.never_ask', 'Nicht mehr fragen')}
            onPress={handleNeverAsk}
            variant="text"
            style={styles.neverAskButton}
          />
        </View>
      </View>
    </BaseModal>
  );
};