import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, Image } from 'react-native';
import { useNavigation, NavigationProp, Link } from '@react-navigation/native';
import { RootStackParamList } from '@/types';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DB } from '@/components/lib/db';
import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';

const LoginScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const [username, setUsername] = useState('sales@rumahjo.com'); 
  const [password, setPassword] = useState('12345678');

  const handleLogin = async () => {
    try{
      DB(`SELECT * FROM "public".hr_employee WHERE work_email = '${username}' AND pin = '${password}'`)
      .then(async function(data){
        if(data && Array.isArray(data) && data.length>0){
          await AsyncStorage.setItem('login', JSON.stringify(data));
          navigation.navigate('home')
        }else{
          Alert.alert("Warning", "Pastikan username atau password sudah benar")
        }
      })
      .catch(function(err){
      })
      // Alert.alert(JSON.stringify(data));
      // if(data.length > 0){ 
      //   await AsyncStorage.setItem('login', JSON.stringify(data));
      // }else{
      //   Alert.alert("Login", "Email atau Password salah")
      // }
    }catch(e){
      Alert.alert(JSON.stringify(e))
    }
  };

  const handleSignUp = () => {
    navigation.navigate('signup');
  };

  const handleForgotPassword = () => {
    Alert.alert("Lupa Password", "Untuk mengganti Password baru, Harap menghubungi admin kantor.");
  };

  return (
    <>
      <View style={{ flex: 1, backgroundColor:'#2563eb'}}>
          <View style={{
              flexDirection:"column"
              , height:300
              , justifyContent:"center"
              , alignItems:"center"
            }}>
              <View style={{
                width:"auto",
                backgroundColor:"white",
                padding: 10,
                borderRadius: 20
              }}>
                <Image
                  source={require('../../assets/images/logo.png')}
                  style={{ 
                    width: 75
                    , height: 75  
                  }}
                  resizeMode="contain"  // You can adjust this based on how you want the image to scale
                />
              </View>
              <Text style={{
                color:"white",
                paddingVertical: 10,
                fontWeight:"bold",
                fontSize: 30
              }}>S.O.R.T</Text>
          </View>
          <View style={[styles.container]}>
            <Text style={{
              textAlign:"center"
              , fontSize:50
              , fontWeight:'bold'
              , color:"#2563eb"
            }}>Login</Text>
            <Text style={{
              textAlign:"center"
              , fontSize:18
              , fontWeight:'bold'
              , color:"#777"
              , marginVertical:20
            }}>Silahkan login ke akun anda</Text>
            <Text style={{
              textAlign:"left"
              , fontSize:18
              , fontWeight:'bold'
              , color:"#777"
              , marginTop:10
              ,width:'100%'
            }}>EMAIL</Text>
            <TextInput
              style={styles.input}
              placeholder="youremail@gmail.com"
              value={username}
              onChangeText={setUsername}
            />
          <Text style={{
            textAlign: "left"
            , fontSize: 18
            , fontWeight: 'bold'
            , color: "#777"
            , marginTop: 10
            , width: '100%'
          }}>PASSWORD</Text>
            <TextInput
              style={styles.input}
              placeholder="******"
              value={password}
              onChangeText={setPassword}
              secureTextEntry
            />
            <TouchableOpacity style={styles.button} onPress={handleLogin}>
              <Text style={styles.buttonText}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={handleForgotPassword}>
              <Text style={styles.forgotPasswordText}>Lupa Password?</Text>
            </TouchableOpacity>
            <View style={{flexDirection:"row"}}>
            <Text>Belum memiliki akun?</Text>
            <TouchableOpacity onPress={handleSignUp} style={{marginHorizontal:5}}>
              <Text style={{
                color:"blue",
                fontWeight:"bold"
              }}>Daftar disini!</Text>
            </TouchableOpacity>
            </View>
          </View>
        </View>
    </>
  );
};

const styles = StyleSheet.create({
  primary:{
    backgroundColor:"#2563eb"
  },
  container: {
    flex: 1,
    paddingVertical:50,
    borderTopRightRadius:80,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 60
  },
  appName: {
    fontSize: 36,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 10,
  },
  title: {
    fontSize: 32,
    color: '#fff',
    marginBottom: 20,
  },
  input: {
    width: '100%',
    borderWidth:1,
    borderColor:"#ddd",
    borderRadius: 10,
    padding: 15,
    marginBottom: 20,
    fontSize: 16,
  },
  button: {
    backgroundColor: '#2563eb',
    padding: 15,
    borderRadius: 10,
    width: '100%',
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonSecondary: {
    borderWidth: 1,
    borderColor: '#fff',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
  },
  buttonTextSecondary: {
    color: '#fff',
  },
  forgotPasswordText: {
    color: '#777',
    fontSize: 16,
    marginBottom: 20,
    textDecorationLine: 'underline',
  },
});

export default LoginScreen;