import React, { useContext, useEffect } from "react";
import {StyleSheet, TouchableOpacity } from "react-native";
import Colors from "../../constants/Colors";
import {Text, View} from '../../components/Themed';
import { useRouter } from "expo-router";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { DeepLinkContext } from "../_layout";
import { HStack } from "@gluestack-ui/themed";

export default function ConfirmScreen() {
    const router = useRouter();
    const params = useContext(DeepLinkContext) as any;

    useEffect(()=>{
        console.log("Deeplink params:",params)
    },[params])

    return (
        <View style={styles.container}>
            {!params.error&&<View style={styles.content}>
                <MaterialCommunityIcons name="check-circle" color={Colors.dark.cyan} size={40}/>
                <Text style={styles.title}>Your email was confirmed!</Text>
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => router.replace('/(home)/home')}
                >
                    <Text style={styles.buttonText}>Continue on!</Text>
                </TouchableOpacity>
            </View>}
            {params.error&&<View style={styles.content}>
                <HStack style={styles.errorHeader}>
                    <MaterialCommunityIcons name="alert-circle" color={Colors.dark.redPastel} size={40}/>
                    <Text style={[styles.title, {marginBottom:0}]}>Urmmm...</Text>
                </HStack>

                <Text style={styles.errorText}>{params.error}</Text>
                <Text>{params.error_description}</Text>
                <Text>({params.error_code})</Text>
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => router.replace('/(auth)/login')}
                >
                    <Text style={styles.buttonText}>Login Manually</Text>
                </TouchableOpacity>
            </View>}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.dark.tabBg,
    },
    content: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: 20,
    },
    title: {
        fontSize: 24,
        fontWeight: "bold",
        color: Colors.dark.cyan,
        marginBottom: 20,
    },
    button: {
        backgroundColor: Colors.dark.redPastel,
        paddingVertical: 12,
        paddingHorizontal: 30,
        borderRadius: 5,
        marginTop: 20,
    },
    buttonText: {
        fontSize: 16,
        color: Colors.dark.redBackgroundText,
        fontWeight: "bold",
    },
    errorHeader:{
        alignItems:'center',
        columnGap:5,
    },
    errorText: {
        color: Colors.dark.redText,
        fontSize: 18,
        textAlign: "center",
    },
});