import React, {useState} from 'react';
import { TextInput, TouchableOpacity, SafeAreaView, StyleSheet, Text, View, Dimensions} from 'react-native';

//importacion de firebase de nuestra configuracion
import { firebase } from "../ConfigFireBa.js/ConfigFireBB";

//importacion de componentes para el manejo de aletras y terminos y condiciones
import AlertasX from '../Componentes/AlertasX';
import ModalTerminosPrivacidad from '../Componentes/ModalTerminosPrivacidad';




const ScreenRegistro = () => {

  //creamos las constantes para campo del resgistro, aqui se guardara cada informacion que ponga el user
  const [nombre, setNombre] = useState('')
  const [apellido, setApellido] = useState('')
  const [email, setEmail] = useState('')
  const [telefono, setTelefono] = useState('')
  const [password, setPassword] = useState('')

  //constantes para el modal de alerta
  const [showAlert, setShowAlert] = useState(false);
  const [alertMessage, setAlertMessage] = useState('');

  //constante para el modal de terminos y condiciones 
  const [showTermsModal, setShowTermsModal] = useState(false);
  const [termsAccepted, setTermsAccepted] = useState(false);

  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;


  //Metodos de registro de usuario y manejo de errores 
  const registerUser = async (nombre, apellido, email, telefono, password) => {
    if (!nombre || !apellido || !email || !telefono || !password) {
      
      setShowAlert(true);
      setAlertMessage('Por favor, completa todos los campos.');
      return;
    }
    if (!termsAccepted) {
      setShowAlert(true);
      setAlertMessage('Debes aceptar los términos y condiciones para continuar.');
      return;
    }
    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
      await firebase.auth().currentUser.sendEmailVerification({
        handleCodeInApp: true,
        url: 'https://eyesapp-3638d.firebaseapp.com',
      });
      await firebase.firestore().collection('Usuarios').doc(firebase.auth().currentUser.uid).set({
        nombre,
        apellido,
        email,
        telefono,
      });
      setShowAlert(true);
      setAlertMessage('Verificación enviada por email');
      } catch (error) {
      setShowAlert(true);
      if (error.code === 'auth/weak-password') {
        setAlertMessage('La contraseña debe tener al menos 6 caracteres.');
      } else if (error.code === 'auth/email-already-in-use') {
        setAlertMessage('El correo electrónico ya está en uso, proporciona otro email.');
      } else {
        setAlertMessage(error.message);
      }
    }
  };




  

  return (
    <SafeAreaView style = {styles.container}>

      <View style = {[styles.containerDos, {width: windowWidth * 0.9, height: windowHeight * 0.95}]}>

        <Text style = {[styles.TextUno, {width: windowWidth * 0.5, height: windowHeight * 0.03}]}
        >¡Comencemos tu registro!</Text>

        <TextInput
        style = {[styles.InDat, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder = 'Ingresa tu nombre'
        onChangeText = {(nombre) => setNombre(nombre)}
        autoCorrect = {false}
        />

        <TextInput
        style = {[styles.InDat2, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder = 'Ingresa tu apellido'
        onChangeText = {(apellido) => setApellido(apellido)}
        autoCorrect = {false}
        />

        <TextInput
        style = {[styles.InDat3, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder = 'Correo electronico'
        onChangeText = {(email) => setEmail(email)}
        autoCapitalize = "none"
        autoCorrect = {false}
        keyboardType = "email-address"
        />

        <TextInput
        style = {[styles.InDat4, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder = 'Ingresa tu numero telefonico'
        onChangeText = {(telefono) => setTelefono(telefono)}
        keyboardType = "phone-pad"
        />

        <TextInput
        style = {[styles.InDat5, {width: windowWidth * 0.8, height: windowHeight * -0.9}]}
        placeholder ='Ingresa tu contraseña'
        onChangeText = {(password) => setPassword(password)}
        autoCapitalize = "none"
        autoCorrect = {false}
        secureTextEntry = {true}
        />

        
       

        <Text style = {[styles.textPass, {width: windowWidth * 0.6, height: windowHeight * 0.02}]}>
           La contraseña deben ser mayor a 6 caracteres</Text>

        <Text style={[styles.recordatorioText, {width: windowWidth * 0.9, height: windowHeight * 0.025}]}>
          Al continuar, aceptas los Términos y Condiciones.
        </Text>

        <TouchableOpacity onPress={() => setShowTermsModal(true)}>
          <Text style={[styles.enlaceTerminos, , {width: windowWidth * 0.9, height: windowHeight * 0.025}]}
          >Ver Términos y Privacidad</Text>
        </TouchableOpacity>
        
        <TouchableOpacity onPress={() => setTermsAccepted(!termsAccepted)}>
          <Text style={styles.aceptarTerminos}>
            {termsAccepted ? '✅ Términos Aceptados' : 'Aceptar Términos'}
          </Text>
        </TouchableOpacity>
       
        <TouchableOpacity 
        onPress = {()=> registerUser(nombre, apellido, email, telefono, password)}
        style = {[styles.Btn1, {width: windowWidth * 0.35, height: windowHeight * 0.08}]}>
        <Text style = {styles.TextUno}> Registrame </Text>
        </TouchableOpacity>

        <AlertasX visible={showAlert} message={alertMessage} onClose={() => setShowAlert(false)} />

        <ModalTerminosPrivacidad visible={showTermsModal} onClose={() => setShowTermsModal(false)} />

      </View>
    </SafeAreaView>
  );
}




const styles = StyleSheet.create({
  container: {                      //Contenedor general
    backgroundColor: "#519ab4",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  containerDos: {                   //Contenedor secundario
    backgroundColor: "#1c6f88",
    borderRadius: 38, 
    alignItems: "center",
    justifyContent: "center",
  },
  TextUno:{                           //Texto de "Comencemos tu registro"
    color: "#D9D9D9",
    fontSize: 15,
    fontWeight: 'bold',
    top: "1%"
  },
  InDat: {                         //Entrada de datos nombre
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    top: "2%"
  },
  InDat2: {                         //Entrada de datos apellidos
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
  },
  InDat3: {                         //Entrada de datos correo electronico
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    top: "-2%"
  },
  InDat4: {                         //Entrada de datos Telefono
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    top: "-4%"
  },
  InDat5: {                         //Entrada de datos Contraseña
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    top: "-6%"
  },
  textPass: {                       //contraseña mayor a 6 caracteres
    color: "#D9D9D9",
    fontSize:11,
    top: "-8.5%",
  },
  recordatorioText: {                //Texto de "Al continuar, aceptas...."
    color: "#D9D9D9",
    right: "0%",
    top: "-6%",
    textAlign: "center"
  },
  enlaceTerminos: {                   //Texto de ver terminos y condiciones 
    color: 'blue',
    textDecorationLine: 'underline',
    right: "0%",
    top: "-180%",
    textAlign: "center"
  },
  Btn1: {                           //Boton de Registar usuario
    backgroundColor: "#6ea9a8",
    padding: 19,
    borderRadius:15,
    alignItems: "center"
  },
  aceptarTerminos: {                 //Aceptar terminos y condiciones 
    color: "#D9D9D9",
    fontWeight: 'bold',
    position: "relative",
    top: "-150%"

  },          
});

export default ScreenRegistro;
