import React from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity, FlatList, SafeAreaView } from 'react-native';
import { View as ThemedView } from './Themed';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n';

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

const PHRASES = [
  { tk: 'Salam', ar: 'مرحبا (Marhaban)' },
  { tk: 'Hawa', ar: 'نعم (Na\'am)' },
  { tk: 'Ýok', ar: 'لا (La)' },
  { tk: 'Sag boluň', ar: 'شكرا (Shukran)' },
  { tk: 'Minnetdar', ar: 'شكرا جزيلا (Shukran Gazilan)' },
  { tk: 'Haýyş edýärin', ar: 'من فضلك (Min fadlik)' },
  { tk: 'Bagyşlaň', ar: 'آسف (Asif)' },
  { tk: 'Men size nähili kömek edip bilerin?', ar: 'كيف يمكنني مساعدتك؟ (Kayfa yumkinuni musa\'adatuk?)' },
  { tk: 'Bu näçe?', ar: 'بكم هذا؟ (Bikam hadha?)' },
  { tk: 'Hajathana nirede?', ar: 'أين الحمام؟ (Ayna al-hammam?)' },
  { tk: 'Men ýolumy ýitirdim', ar: 'لقد ضللت طريقي (Laqad dalalt tariqi)' },
  { tk: 'Lukman çagyryň', ar: 'اتصل بطبيب (Ittasil bi-tabib)' },
];

const PhrasebookModal = ({ visible, onClose }: PhrasebookModalProps) => {
  const renderItem = ({ item }: { item: { tk: string; ar: string } }) => (
    <View style={styles.phraseItem}>
      <Text style={styles.turkmenText}>{item.tk}</Text>
      <Text style={styles.arabicText}>{item.ar}</Text>
    </View>
  );

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <ThemedView style={styles.centeredView}>
        <View style={styles.modalView}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <FontAwesome name="close" size={24} color="black" />
          </TouchableOpacity>
          <Text style={styles.modalTitle}>{i18n.t('Phrasebook')}</Text>
          <SafeAreaView style={styles.listContainer}>
            <FlatList
              data={PHRASES}
              renderItem={renderItem}
              keyExtractor={(item, index) => index.toString()}
              ItemSeparatorComponent={() => <View style={styles.separator} />}
            />
          </SafeAreaView>
        </View>
      </ThemedView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 20,
    paddingTop: 40,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    width: '90%',
    height: '80%',
  },
  closeButton: {
    position: 'absolute',
    top: 15,
    right: 15,
    zIndex: 1,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  listContainer: {
    width: '100%',
    flex: 1,
  },
  phraseItem: {
    paddingVertical: 15,
    paddingHorizontal: 10,
  },
  turkmenText: {
    fontSize: 16,
    marginBottom: 5,
  },
  arabicText: {
    fontSize: 18,
    textAlign: 'right',
    color: '#333',
  },
  separator: {
    height: 1,
    backgroundColor: '#eee',
    width: '100%',
  },
});

export default PhrasebookModal;