umra-app/components/TranslatorModal.tsx

import React, { useState } from 'react';
import { Modal, View, Text, TextInput, Button, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
import { View as ThemedView } from './Themed';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n';

type TranslatorModalProps = {
  visible: boolean;
  onClose: () => void;
};

const TranslatorModal = ({ visible, onClose }: TranslatorModalProps) => {
  const [turkmenText, setTurkmenText] = useState('');
  const [arabicText, setArabicText] = useState('');

  const handleTranslate = async () => {
    if (turkmenText.trim() === '') {
      setArabicText('');
      return;
    }

    // --- Placeholder for Translation API call ---
    // You would replace this with your actual translation logic.
    // For example, calling a function that makes an API request to a translation service.
    try {
      // const translated = await translateText(turkmenText, 'tk', 'ar');
      // setArabicText(translated);
      setArabicText(`(Translation for: ${turkmenText})`); // Mock response
    } catch (error) {
      console.error("Translation error:", error);
      setArabicText("Error: Could not translate.");
    }
    // -----------------------------------------
  };

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.keyboardAvoidingContainer}
      >
        <ThemedView style={styles.centeredView}>
          <ScrollView contentContainerStyle={styles.scrollViewContent}>
            <View style={styles.modalView}>
              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <FontAwesome name="close" size={24} color="black" />
              </TouchableOpacity>
              <Text style={styles.modalTitle}>{i18n.t('Translator')}</Text>

              <View style={styles.inputContainer}>
                <Text style={styles.label}>Türkmençe</Text>
                <TextInput
                  style={[styles.textInput, styles.turkmenInput]}
                  placeholder="Hat yaz"
                  placeholderTextColor="#888" // slightly grey
                  onChangeText={setTurkmenText}
                  value={turkmenText}
                  multiline
                />
              </View>

              <View style={styles.inputContainer}>
                <Text style={styles.label}>Arapça</Text>
                <View style={styles.arabicOutputContainer}>
                  <Text style={styles.arabicText}>{arabicText}</Text>
                </View>
              </View>
              
              <TouchableOpacity onPress={handleTranslate} style={styles.translateButton}>
                <Text style={styles.translateButtonText}>{i18n.t('Translate')}</Text>
              </TouchableOpacity>

            </View>
          </ScrollView>
        </ThemedView>
      </KeyboardAvoidingView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  keyboardAvoidingContainer: {
    flex: 1,
    width: '100%',
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    width: '100%',
  },
  scrollViewContent: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    width: '100%',
    minWidth: '90%',
  },
  closeButton: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    marginBottom: 15,
    minWidth: '90%',
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
    color: '#333',
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
    minWidth: '90%',
  },
  turkmenInput: {
    height: 100,
    textAlignVertical: 'top',
  },
  arabicOutputContainer: {
    height: 100,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
    padding: 10,
    backgroundColor: '#f9f9f9',
    justifyContent: 'center',
  },
  arabicText: {
    fontSize: 18,
    textAlign: 'right', // For RTL text
  },
  translateButton: {
    marginTop: 15,
  },
  translateButtonText: {
    color: '#D4AF37',
    fontSize: 18,
    fontWeight: '500',
  },
});

export default TranslatorModal;