import React, {useState} from 'react';
import {StyleSheet, ActivityIndicator, SafeAreaView, View} from 'react-native';
import {useAuthStore} from '@/store/authStore';
import {useRouter, Link} from 'expo-router';

import {Box} from "@/components/ui/box"
import {Button, ButtonText, ButtonIcon} from "@/components/ui/button"
import {Center} from "@/components/ui/center"
import {Heading} from "@/components/ui/heading"
import {Input, InputField} from "@/components/ui/input"
import {Text} from "@/components/ui/text"
import {VStack} from "@/components/ui/vstack"
import {HStack} from "@/components/ui/hstack"
import {ArrowRightIcon} from "@/components/ui/icon"
import {Divider} from '@/components/ui/divider';
import {Ionicons} from "@expo/vector-icons";

export default function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const {signIn, isLoading} = useAuthStore();
    const router = useRouter();

    const handleInternalLogin = async () => {
        if (!email || !password) {
            alert('Proszę wprowadzić email i hasło.');
            return;
        }

        try {
            await signIn(email, password);
            alert(`Zalogowano jako ${email}`);
            router.replace('/');
        } catch (e) {
            alert("Błąd logowania: " + (e.response?.data?.message || e.message));
        }
    }

    if (isLoading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="large"/>
            </View>
        );
    }

    return (
        <SafeAreaView style={styles.container}>
            <Center>
                <Box className="p-5 max-w-96 border border-background-300 rounded-lg">
                    <VStack className="pb-4" space="xs">
                        <Heading className="leading-[30px]">Logowanie</Heading>
                        <Box className="flex flex-row">
                            <Link href="/registration" asChild>
                                <Button variant="link" size="sm" className="p-0">
                                    <ButtonText style={styles.signupbutton}>Nie masz jeszcze konta? Załóz je
                                        tutaj!</ButtonText>
                                    <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
                                </Button>
                            </Link>
                        </Box>
                    </VStack>
                    <VStack space="xl" className="py-2">
                        <Input>
                            <InputField className="py-2" placeholder="Login" onChangeText={setEmail}/>
                        </Input>
                        <Input>
                            <InputField type="password" className="py-2" placeholder="Hasło"
                                        onChangeText={setPassword}/>
                        </Input>
                    </VStack>
                    <VStack space="lg" className="pt-4">
                        <Button size="sm" onPress={handleInternalLogin}>
                            <ButtonText>Zaloguj się</ButtonText>
                        </Button>
                    </VStack>

                    <HStack alignItems="center" space="sm" className="pt-6 pb-6">
                        <Divider flex={1}/>
                        <Text fontSize="$sm" className="text-gray-300">
                            lub
                        </Text>
                        <Divider flex={1}/>
                    </HStack>
                    <Button size="sm">
                        <Ionicons name="logo-google" color="#fff"/>
                    </Button>
                </Box>
            </Center>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 20,
    },
    input: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 5,
        marginBottom: 15,
        padding: 10,
    },
    errorText: {
        color: 'red',
        marginBottom: 10,
    },
    signupbutton: {
        fontWeight: '300',
    },
});