import { useAlert } from '@/components/AlertComponent';
import api from '@/utils/api';
import { ArrowLeft, Mail, Send } from 'lucide-react-native';
import { useState } from 'react';
import { Image, Platform, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
import { useRouter } from 'expo-router';

export default function ForgotPasswordScreen() {
    const alert = useAlert();
    const router = useRouter();
    const [identifier, setIdentifier] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async () => {
        if (!identifier.trim()) {
            alert.showAlert('error', 'Attenzione', 'Inserisci email o username');
            return;
        }
        setIsLoading(true);

        try {
            await api.post('/user/forgot-password', { identifier: identifier.trim() });
            alert.showAlert(
                'success',
                'Richiesta Inviata',
                'Se l\'account esiste, riceverai un\'email con il link per reimpostare la password.'
            );
            router.back();
        } catch (error: any) {
            let message = 'Si è verificato un errore. Riprova più tardi.';

            if (error.request && !error.response) {
                message = 'Impossibile contattare il server. Controlla la connessione.';
            } else if (error.response) {
                message = `Errore Server: ${error.response.data?.message || error.response.status}`;
            }

            alert.showAlert('error', 'Errore', message);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <View className="flex-1 bg-[#099499] h-screen overflow-hidden">
            {/* Header with Logo */}
            <View className="h-[35%] flex-column justify-center items-center">
                <Image
                    source={require('@/assets/images/mariani-logo.png')}
                    className='h-24 w-80'
                    resizeMode="contain"
                />
            </View>

            {/* Form Container */}
            <View className="flex-1 bg-white rounded-t-[2.5rem] px-8 pt-10 shadow-xl w-full">
                <KeyboardAwareScrollView
                    bottomOffset={Platform.OS === 'ios' ? 50 : 80}
                    keyboardShouldPersistTaps="handled"
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{ paddingBottom: 40, flexGrow: 1 }}
                    className="flex-1"
                >
                    <View className="gap-6 flex flex-col" style={{ gap: '1.5rem' }}>
                        {/* Title */}
                        <View>
                            <Text className="text-gray-800 text-2xl font-bold mb-2">Recupero Password</Text>
                            <Text className="text-gray-500 text-base">
                                Inserisci la tua email o username. Ti invieremo un link per reimpostare la password.
                            </Text>
                        </View>

                        {/* Input Email / Username */}
                        <View>
                            <Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Email o Username</Text>
                            <View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
                                <Mail size={24} color="#9ca3af" pointerEvents="none" />
                                <TextInput
                                    className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
                                    placeholder="mario.rossi@esempio.com"
                                    placeholderTextColor="#9ca3af"
                                    value={identifier}
                                    onChangeText={setIdentifier}
                                    autoCapitalize="none"
                                    keyboardType="email-address"
                                    autoFocus
                                />
                            </View>
                        </View>

                        {/* Submit Button */}
                        <TouchableOpacity
                            onPress={handleSubmit}
                            activeOpacity={0.8}
                            className={`bg-[#099499] h-16 rounded-2xl flex-row justify-center items-center shadow-md mt-4 flex ${isLoading ? 'opacity-70' : ''}`}
                            disabled={isLoading}
                        >
                            <Text className="text-white text-xl font-bold mr-2">
                                {isLoading ? 'Invio in corso...' : 'Invia Link'}
                            </Text>
                            {!isLoading && <Send size={24} color="white" pointerEvents="none" />}
                        </TouchableOpacity>

                        {/* Back to Login */}
                        <TouchableOpacity
                            onPress={() => router.back()}
                            className="flex-row justify-center items-center mt-2"
                            activeOpacity={0.7}
                        >
                            <ArrowLeft size={18} color="#099499" pointerEvents="none" />
                            <Text className="text-[#099499] font-bold text-base ml-1">Torna al Login</Text>
                        </TouchableOpacity>
                    </View>
                </KeyboardAwareScrollView>
            </View>
        </View>
    );
}