import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, Image } from 'react-native';
import { useNavigation, NavigationProp, Link } from '@react-navigation/native';
// Update the import path to the correct one
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';
import config from '../../components/data/config.json';

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){
      })
    }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 (
    <>
      <GestureHandlerRootView>
        <ScrollView style={{backgroundColor:"white"}}>
          <View style={{ flex: 1, backgroundColor:'white'}}>
            <View style={{
              flexDirection: "row"
              , height: 140
              , alignItems: "flex-end"
              , paddingHorizontal: 30
              , marginBottom: 20
            }}>
              <View style={{ flex: 1 }}>

              </View>
              <View style={{
                width: "auto",
                backgroundColor: "white",
                padding: 10,
                borderRadius: 20
              }}>
                <Image
                  source={require('../../assets/images/login/logo.png')}
                  style={{
                    width: 60
                    , height: 60
                  }}
                  resizeMode="contain"  // You can adjust this based on how you want the image to scale
                />
              </View>
            </View>
            <View style={[styles.container]}>
              <View style={{marginBottom:40}}>
                <Text style={{
                  fontSize:20
                  , fontWeight:'bold'
                  , color:config.color.textbiru
                }}>Hi !</Text> 
                <Text style={{
                  fontSize:20
                  , fontWeight:'bold'
                  , marginVertical:5
                  , color: config.color.textbiru
                }}>Selamat datang kembali,</Text>
              </View>
              {/* <Text style={{
                textAlign:"left"
                , fontSize:18
                , fontWeight:'bold'
                , color:"#777"
                , marginTop:10
                , marginBottom: 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"
              , marginBottom: 10
              , marginTop: 10
              , width: '100%'
            }}>PASSWORD</Text> */}
              <TextInput
                style={styles.input}
                placeholder="******"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
              />
              <View style={{
                flexDirection:"row",
                marginBottom:50
              }}>
                <View style={{flex:1}}>

                </View>
                <TouchableOpacity onPress={handleForgotPassword}>
                  <Text style={styles.forgotPasswordText}>Lupa Password?</Text>
                </TouchableOpacity>
              </View>
              <TouchableOpacity style={styles.button} onPress={handleLogin}>
                <Text style={styles.buttonText}>LOGIN</Text>
              </TouchableOpacity>
              <View style={{
                flexDirection:"row"
                , justifyContent:"center"
                , marginTop: 30
              }}>
                <Text>Belum memiliki akun?</Text>
                <TouchableOpacity onPress={handleSignUp} style={{marginHorizontal:10}}>
                  <Text style={{
                    color:"blue",
                    fontWeight:"bold"
                  }}>Daftar disini!</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ScrollView>
      </GestureHandlerRootView>
    </>
  );
};

const styles = StyleSheet.create({
  primary:{
    backgroundColor:"#2563eb"
  },
  container: {
    flex: 1,
    paddingVertical:50,
    backgroundColor: 'white',
    justifyContent: 'center',
    paddingHorizontal: 50
  },
  appName: {
    fontSize: 36,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 10,
  },
  title: {
    fontSize: 32,
    color: '#fff',
    marginBottom: 20,
  },
  input: {
    width: '100%',
    borderBottomWidth: 2,
    borderBottomColor: config.color.line,
    borderRadius: 10,
    padding: 15,
    shadowColor: "#000",
    marginBottom: 20,
    fontSize: 16,
  },
  button: {
    backgroundColor: '#2563eb',
    padding: 15,
    borderRadius: 30,
    width: '100%',
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonSecondary: {
    borderWidth: 1,
    borderColor: '#fff',
  },
  buttonText: {
    fontSize: 20,
    color: 'white',
    fontWeight:"bold"
  },
  buttonTextSecondary: {
    color: '#fff',
  },
  forgotPasswordText: {
    color: "#0f48a1",
    fontSize: 16,
    marginBottom: 20,
    textDecorationLine: 'underline',
  },
});

export default LoginScreen;