import { useRouter } from 'expo-router';
import { ChevronLeft, LogOut, Mail, Settings, Smartphone, User } from 'lucide-react-native';
import React, { useContext } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MOCK_USER } from '@/data/data';
import { AuthContext } from '@/utils/authContext';

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

    // Genera le iniziali dell'utente
    const initials = `${user?.name?.[0] ?? ''}${user?.surname?.[0] ?? ''}`.toUpperCase();

    return (
        <View className="flex-1 bg-[#099499]">
            {/* --- SEZIONE HEADER (INVARIATA) --- */}
            <View className="pt-16 pb-6 px-6">
                <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>

            <ScrollView
                className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-8"
                contentContainerStyle={{ paddingBottom: 60, gap: 24 }}
                showsVerticalScrollIndicator={false}
            >
                {/* Card info - Testi ingranditi */}
                <View className="bg-white p-7 rounded-3xl shadow-sm border border-gray-100">
                    {/* Titolo sezione ingrandito */}
                    <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">
                            {/* Icona leggermente più grande e container adattato */}
                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
                                <Mail size={24} color="#374151" />
                            </View>
                            <View>
                                {/* Label e valore ingranditi */}
                                <Text className="text-lg text-gray-700 font-bold">Email</Text>
                                <Text className="text-gray-500 text-base">{user?.email}</Text>
                            </View>
                        </View>

                        {/* // TODO: Rimuovere telefono, si potrebbe sostituire con altro dato? */}
                        {/* <View className="flex-row items-center gap-5">
                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
                                <Smartphone size={24} color="#374151" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-700 font-bold">Telefono</Text>
                                <Text className="text-gray-500 text-base">{phone}</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 - Testi e Pulsanti ingranditi */}
                <View>
                    <Text className="text-gray-800 text-2xl font-bold mb-5 px-1">Azioni</Text>

                    <TouchableOpacity onPress={() => router.push('/permits')} 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">
                                <Settings size={26} color="#099499" />
                            </View>
                            <View>
                                <Text className="text-lg text-gray-800 font-bold">I miei permessi</Text>
                                <Text className="text-base text-gray-400 mt-0.5">Richiedi o controlla lo stato</Text>
                            </View>
                        </View>
                        <Text className="text-[#099499] text-base font-bold">Apri</Text>
                    </TouchableOpacity>

                    <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>
    );
}