import { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Alert, TextInput, Button, Modal, TouchableOpacity, Platform, ToastAndroid } from 'react-native';


export default function App() {

  const [showModal, setShowModal] = useState(false);
  const [response, setResponse] = useState(null);
  const [name, setName] = useState("");

  const fetchApi = async () => { 
    try {
      const res = await fetch(`https://api.agify.io?name=${name}`);
      const data = await res.json();

      if (!data.age) {
        Alert.alert("No Prediction Found", "Unable to predict age for this name.");
        return;
      }

      setResponse(data);
      if (Platform.OS === "android") {
        ToastAndroid.show("Prediction was found!", ToastAndroid.SHORT);
      } else {
        Alert.alert("Prediction Found");
      }
      setShowModal(true);
      
    } catch (e) {
      Alert.alert("error", e);
    }
  }

  const hadleGetAge = () => {
    if (!name.trim()) {
      Alert.alert("Validation error", "Enter a name");
      return;
    }

    Alert.alert("Confirm", `Fetch age prediction for "${name}"`, [{text:"Cancel", style:"cancel"}, {text: "Ok", onPress: fetchApi}]);
  } 

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.lable}>Predict Your Age</Text>

      <TextInput
        placeholder="Enter a name"
        value={name}
        onChangeText={setName}
        style={styles.input}
      />

      <Button title="Predict Age" onPress={hadleGetAge}>

      </Button>

      <Modal visible={showModal} animationType="fade">
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            {response && (
              <View>
                <Text style={styles.modalTitle}>Age Prediction</Text>

                <View style={{ marginTop: 10 }}>
                  <Text style={styles.modalText}>Name: {response.name}</Text>
                  <Text style={styles.modalText}>Age: {response.age}</Text>
                  <Text style={styles.modalText}>Count: {response.count}</Text>
                </View>
              </View>
            )}

            <TouchableOpacity
              onPress={() => setShowModal(false)}
              style={styles.closeButton}
            >
              <Text style={styles.closeButtonText}>Close</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  input: {
    width: "80%",
    padding: 12,
    borderWidth: 1,
    borderRadius: 6,
    marginBottom: 12,
    fontSize: 16,
  },
  modalContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalContent: {
    width: "80%",
    backgroundColor: "white",
    padding: 20,
    borderRadius: 10,
    elevation: 10,
  },
  modalTitle: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 15,
  },
  modalText: {
    fontSize: 18,
    marginVertical: 4,
  },
  closeButton: {
    backgroundColor: "#2196F3",
    marginTop: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  closeButtonText: {
    color: "white",
    textAlign: "center",
    fontSize: 18,
    fontWeight: "600",
  },
  lable: {
    fontWeight: 700,
    paddingBottom: 65,
    fontSize: 30,
  }
});