mobile-darmasaba/components/ModalUpdateMaintenance.tsx

import React from 'react';
import { Modal, View, Image, TouchableOpacity, BackHandler, Platform } from 'react-native';
import { useTheme } from '@/providers/ThemeProvider';
import Text from './Text';
import * as Linking from 'expo-linking';
import Styles from '@/constants/Styles';

interface ModalUpdateMaintenanceProps {
   visible: boolean;
   type: 'update' | 'maintenance';
   isForceUpdate?: boolean;
   onDismiss?: () => void;
   appName?: string;
   customDescription?: string;
   androidStoreUrl?: string;
   iosStoreUrl?: string;
}

const ModalUpdateMaintenance: React.FC<ModalUpdateMaintenanceProps> = ({
   visible,
   type,
   isForceUpdate = false,
   onDismiss,
   appName = 'Desa+',
   customDescription,
   androidStoreUrl = 'https://play.google.com/store/apps/details?id=mobiledarmasaba.app',
   iosStoreUrl = 'https://apps.apple.com/id/app/desa-plus-desa/id6752375538'
}) => {
   const { colors } = useTheme();

   const handleUpdate = () => {
      const storeUrl = Platform.OS === 'ios' ? iosStoreUrl : androidStoreUrl;
      Linking.openURL(storeUrl);
   };

   const handleCloseApp = () => {
      // For maintenance mode, we might want to exit the app or just keep the modal.
      // React Native doesn't have a built-in "exit" for iOS, but for Android:
      if (Platform.OS === 'android') {
         BackHandler.exitApp();
      }
   };

   return (
      <Modal
         visible={visible}
         animationType="fade"
         transparent={false}
         onRequestClose={() => {
            if (!isForceUpdate && type === 'update') {
               onDismiss?.();
            }
         }}
      >
         <View style={[Styles.modalUpdateContainer, { backgroundColor: colors.primary }]}>
            {/* Background decorative circles could be added here if we had SVGs or images */}
            <View style={Styles.modalUpdateDecorativeCircle1} />
            <View style={Styles.modalUpdateDecorativeCircle2} />

            <View style={Styles.modalUpdateContent}>
               <Image
                  source={require('@/assets/images/logo-dark.png')}
                  style={Styles.modalUpdateLogo}
                  resizeMode="contain"
               />

               <View style={Styles.modalUpdateTextContainer}>
                  <Text style={Styles.modalUpdateTitle}>
                     {type === 'update' ? 'Update Tersedia' : 'Perbaikan'}
                  </Text>
                  <Text style={[Styles.modalUpdateDescription, { opacity: 0.8 }]}>
                     {customDescription ? customDescription :
                        (type === 'update'
                           ? `Versi terbaru dari ${appName} tersedia di Store. Silakan buka Store untuk menginstalnya.`
                           : 'Aplikasi saat ini sedang dalam pemeliharaan untuk peningkatan sistem. Silakan coba kembali beberapa saat lagi.')}
                  </Text>
               </View>

               <View style={Styles.modalUpdateButtonContainer}>
                  {type === 'update' ? (
                     <>
                        <TouchableOpacity
                           style={[Styles.modalUpdatePrimaryButton, { backgroundColor: 'white' }]}
                           onPress={handleUpdate}
                           activeOpacity={0.8}
                        >
                           <Text style={[Styles.modalUpdatePrimaryButtonText, { color: colors.primary }]}>
                              Update
                           </Text>
                        </TouchableOpacity>

                        {!isForceUpdate && (
                           <TouchableOpacity
                              style={Styles.modalUpdateSecondaryButton}
                              onPress={onDismiss}
                              activeOpacity={0.7}
                           >
                              <Text style={Styles.modalUpdateSecondaryButtonText}>Nanti</Text>
                           </TouchableOpacity>
                        )}
                     </>
                  ) : (
                     <></>
                     // <TouchableOpacity
                     //    style={[Styles.modalUpdatePrimaryButton, { backgroundColor: 'white' }]}
                     //    onPress={handleCloseApp}
                     //    activeOpacity={0.8}
                     // >
                     //    <Text style={[Styles.modalUpdatePrimaryButtonText, { color: colors.primary }]}>
                     //       {Platform.OS === 'android' ? 'Close App' : 'Please check back later'}
                     //    </Text>
                     // </TouchableOpacity>
                  )}
               </View>
            </View>
         </View>
      </Modal>
   );
};

export default ModalUpdateMaintenance;