import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';
import * as SecureStore from 'expo-secure-store';
import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated';
import { Feather } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button } from '@/components/ui/button';
import { Colors, Spacing, Typography, Radius } from '@/constants/theme';
import { BlurView } from 'expo-blur';

export default function BiometricsScreen() {
    const router = useRouter();
    const insets = useSafeAreaInsets();

    async function handleAccept() {
        await SecureStore.setItemAsync('yaba_use_biometrics', 'true');
        router.replace('/');
    }

    function handleDecline() {
        router.replace('/');
    }

    return (
        <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>

            <View style={styles.content}>
                <Animated.View entering={FadeInDown.duration(600).delay(100)} style={styles.iconContainer}>
                    <View style={styles.iconBackground}>
                        <Feather size={64} color={Colors.primary} />
                    </View>
                </Animated.View>

                <Animated.View entering={FadeInUp.duration(600).delay(200)} style={styles.textContainer}>
                    <Text style={styles.title}>Login por Biometria</Text>
                    <Text style={styles.subtitle}>
                        Deseja utilizar sua biometria (Face ID / Digital) para acessar o app mais rapidamente nas próximas vezes?
                    </Text>
                </Animated.View>
            </View>

            <Animated.View entering={FadeInUp.duration(600).delay(400)} style={styles.footer}>
                <BlurView intensity={80} tint="dark" style={styles.blurContainer}>
                    <Button
                        label="Sim, usar biometria"
                        onPress={handleAccept}
                        fullWidth
                        style={styles.primaryButton}
                    />
                    <Button
                        label="Não, manter acesso livre"
                        variant="ghost"
                        onPress={handleDecline}
                        fullWidth
                    />
                </BlurView>
            </Animated.View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.background,
        justifyContent: 'space-between',
    },
    content: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: Spacing.xl,
        gap: Spacing.xxl,
    },
    iconContainer: {
        alignItems: 'center',
    },
    iconBackground: {
        width: 120,
        height: 120,
        borderRadius: 60,
        backgroundColor: 'rgba(238, 250, 13, 0.1)',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        borderColor: 'rgba(238, 250, 13, 0.2)',
    },
    textContainer: {
        alignItems: 'center',
        gap: Spacing.sm,
    },
    title: {
        ...Typography.h1,
        color: Colors.textPrimary,
        textAlign: 'center',
    },
    subtitle: {
        ...Typography.bodyLarge,
        color: Colors.textSecondary,
        textAlign: 'center',
        lineHeight: 24,
    },
    footer: {
        paddingHorizontal: Spacing.lg,
        paddingBottom: Spacing.lg,
    },
    blurContainer: {
        padding: Spacing.lg,
        borderRadius: Radius.lg,
        gap: Spacing.md,
        backgroundColor: 'rgba(22, 27, 34, 0.6)',
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.08)',
        overflow: 'hidden',
    },
    primaryButton: {
        height: 56,
    }
});