import React from 'react';
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
import { styles } from '../styles';

export default function BackupModal({
  visible,
  onClose,
  exportJson,
  importJson,
  setImportJson,
  applyImport,
}) {
  return (
    <Modal visible={visible} animationType="slide" transparent>
      <View style={styles.modalBackdrop}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
          <View style={styles.modalCard}>
            <View style={styles.sectionRow}>
              <Text style={styles.sectionTitle}>Backup & Restore</Text>
              <Pressable onPress={onClose}>
                <Text style={styles.closeText}>Close</Text>
              </Pressable>
            </View>

            <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingBottom: 12 }} showsVerticalScrollIndicator={false}>
              <Text style={styles.cardTitle}>Export JSON</Text>
              <Text style={styles.cardMeta}>Copy this JSON and store it safely.</Text>
              <TextInput
                style={styles.inputMultiline}
                multiline
                value={exportJson}
                editable={false}
                selectTextOnFocus
              />
              <Text style={styles.cardTitle}>Import JSON</Text>
              <Text style={styles.cardMeta}>Paste a previous backup. This will replace current data.</Text>
              <TextInput
                style={styles.inputMultiline}
                multiline
                value={importJson}
                onChangeText={setImportJson}
                placeholder="Paste backup JSON here"
                placeholderTextColor="#6b7280"
              />
              <Pressable style={styles.primaryBtn} onPress={applyImport}>
                <Text style={styles.primaryBtnText}>Import & Replace</Text>
              </Pressable>
            </ScrollView>
          </View>
        </KeyboardAvoidingView>
      </View>
    </Modal>
  );
}