import { useRouter } from 'expo-router';
import { ChevronLeft, FileText, LogOut, Mail, Settings, User } from 'lucide-react-native';
import React, { useContext } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { AuthContext } from '@/utils/authContext';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function ProfileScreen() {
    const authContext = useContext(AuthContext);
    const { user } = authContext;
    const router = useRouter();

    // Generate user initials
    const initials = `${user?.name?.[0] ?? ''}${user?.surname?.[0] ?? ''}`.toUpperCase();

    return (
        <View className="flex-1 bg-[#099499]">
            <SafeAreaView edges={['top']} className='pt-4'>
                {/* Header Section */}
                <View className="pb-6 px-4">
                    <View className="flex-row justify-start items-center gap-4">
                        <TouchableOpacity
                            onPress={() => router.back()}
                        >
                            <ChevronLeft size={28} color="white" />
                        </TouchableOpacity>
                        <View className="flex-row items-center gap-4">
                            <View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center">
                                <Text className="text-white font-bold text-2xl">{initials}</Text>
                            </View>
                            <View>
                                <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text>
                                <Text className="text-white text-2xl font-bold">{user?.name} {user?.surname}</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </SafeAreaView>

            <ScrollView
                className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-8"
                contentContainerStyle={{ paddingBottom: 60, gap: 24 }}
                showsVerticalScrollIndicator={false}
            >
                {/* Info Card - Enlarged Texts */}
                <View className="bg-white p-7 rounded-3xl shadow-sm border border-gray-100">
                    {/* Section title */}
                    <Text className="text-2xl font-bold text-gray-800">Informazioni</Text>

                    <View className="mt-6 gap-5">
                        <View className="flex-row items-center gap-5">
                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
                                <Mail size={24} color="#374151" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-700 font-bold">Email</Text>
                                <Text className="text-gray-500 text-base">{user?.email}</Text>
                            </View>
                        </View>

                        <View className="flex-row items-center gap-5">
                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
                                <User size={24} color="#374151" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
                                <Text className="text-gray-500 text-base capitalize">{user?.role}</Text>
                            </View>
                        </View>
                    </View>
                </View>

                {/* Actions */}
                <View>
                    <Text className="text-gray-800 text-2xl font-bold mb-5 px-1">Azioni</Text>

                    <TouchableOpacity onPress={() => router.push('/profile/documents')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
                        <View className="flex-row items-center gap-5">
                            <View className="bg-[#099499]/10 p-3.5 rounded-2xl">
                                <FileText size={26} color="#099499" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-800 font-bold">I miei documenti</Text>
                                <Text className="text-base text-gray-400 mt-0.5">Gestisci i tuoi documenti</Text>
                            </View>
                        </View>
                        <Text className="text-[#099499] text-base font-bold">Apri</Text>
                    </TouchableOpacity>

                    {/* TODO: Settings not implemented at the moment */}
                    {/* <TouchableOpacity onPress={() => console.log('Apri impostazioni')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
                        <View className="flex-row items-center gap-5">
                            <View className="bg-gray-100 p-3.5 rounded-2xl">
                                <Settings size={26} color="#374151" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-800 font-bold">Impostazioni</Text>
                                <Text className="text-base text-gray-400 mt-0.5">Preferenze e privacy</Text>
                            </View>
                        </View>
                        <Text className="text-gray-400 text-base font-bold">Apri</Text>
                    </TouchableOpacity> */}

                    <TouchableOpacity onPress={authContext.logOut} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
                        <View className="flex-row items-center gap-5">
                            <View className="bg-red-50 p-3.5 rounded-2xl">
                                <LogOut size={26} color="#ef4444" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-800 font-bold">Esci</Text>
                                <Text className="text-base text-gray-400 mt-0.5">Chiudi la sessione corrente</Text>
                            </View>
                        </View>
                        <Text className="text-red-500 text-base font-bold">Esci</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        </View>
    );
}