import { useRouter } from 'expo-router';
import { AlertTriangle, CalendarDays, CheckCircle2, FileText, QrCode, User, CalendarClock, LayoutDashboard } from 'lucide-react-native';
import React, { useState, useContext, useEffect } from 'react';
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { AuthContext } from '@/utils/authContext';
import { ActivityItem } from '@/types/types';
import api from '@/utils/api';
import LoadingScreen from '@/components/LoadingScreen';

export default function HomeScreen() {
    const router = useRouter();
    const { user } = useContext(AuthContext);
    const [isLoading, setIsLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [incompleteAttendance, setIncompleteAttendance] = useState<string | null>(null);
    const [recentActivities, setRecentActivities] = useState<ActivityItem[]>([]);

    const fetchDashboardData = async () => {
        try {
            if (!refreshing) setIsLoading(true);
            // Fetch incomplete attendance data from API
            const attendance = await api.get('/attendance/incomplete');
            setIncompleteAttendance(attendance.data);

            // Fetch recent activities data from API
            const activities = await api.get('/user/recent-activities');
            setRecentActivities(activities.data);
        } catch (error) {
            console.error('Errore nel recupero dei dati della dashboard:', error);
        } finally {
            setIsLoading(false);
            setRefreshing(false);
        }
    };

    const getActivityConfig = (type: string) => {
        switch (type) {
            case 'document':
                return { icon: FileText, bg: 'bg-gray-100', color: '#4b5563' };
            case 'attendance':
                return { icon: CheckCircle2, bg: 'bg-[#099499]/10', color: '#099499' };
            case 'permit':
                return { icon: CalendarClock, bg: 'bg-[#2563eb]/10', color: '#2563eb' };
            default:
                return { icon: LayoutDashboard, bg: 'bg-gray-100', color: '#9ca3af' };
        }
    };

    useEffect(() => {
        fetchDashboardData();
    }, []);

    const onRefresh = () => {
        setRefreshing(true);
        fetchDashboardData();
    };

    if (isLoading && !refreshing) {
        return (
            <LoadingScreen />
        );
    }

    return (
        <View className="flex-1 bg-[#099499]">
            {/* Banner Custom */}
            <View className="pt-16 pb-6 px-6 shadow-sm z-10">
                <View className="flex-row justify-between items-start">
                    <View className="flex-row items-center gap-4 flex-1 mr-4">
                        <View className="flex-1">
                            <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
                            <Text className="text-white text-3xl font-bold leading-tight">
                                {user?.name} {user?.surname}
                            </Text>
                            <Text className="text-xl text-teal-200">{user?.role}</Text>
                        </View>
                    </View>
                    <View className="flex-row gap-4 flex-shrink-0">
                        <TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
                            <User size={28} color="white" />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

            {/* Contenuto Scrollabile */}
            <ScrollView
                className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-6"
                contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
                showsVerticalScrollIndicator={false}
                refreshControl={
                    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} />
                }
            >

                {/* Warning Card */}
                {incompleteAttendance && (
                    <View className="bg-white p-6 rounded-3xl shadow-md border-l-8 border-orange-500 flex-row items-center justify-between">
                        <View className="flex-row items-center gap-5 flex-1">
                            <View className="bg-orange-100 p-4 rounded-full">
                                <AlertTriangle size={32} color="#f97316" />
                            </View>
                            <View className="flex-1">
                                <Text className="font-bold text-gray-800 text-lg">Presenza incompleta</Text>
                                <Text className="text-base text-gray-500 mt-1">{incompleteAttendance}</Text>
                            </View>
                        </View>
                        <TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">
                            <Text className="text-orange-600 text-sm font-bold uppercase tracking-wide">Risolvi</Text>
                        </TouchableOpacity>
                    </View>
                )}

                {/* Quick Actions */}
                <View>
                    <Text className="text-gray-800 text-xl font-bold mb-4 px-1">Azioni Rapide</Text>
                    <View className="flex-row gap-5">
                        <TouchableOpacity
                            onPress={() => router.push('/attendance')}
                            className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
                        >
                            <View className="w-20 h-20 rounded-full bg-teal-50 items-center justify-center mb-1">
                                <QrCode size={40} color="#099499" />
                            </View>
                            <Text className="text-lg font-bold text-gray-700 text-center">Nuova Presenza</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            onPress={() => router.push('/permits')}
                            className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
                        >
                            <View className="w-20 h-20 rounded-full bg-blue-50 items-center justify-center mb-1">
                                <CalendarDays size={40} color="#2563eb" />
                            </View>
                            <Text className="text-lg font-bold text-gray-700 text-center">Gestisci Permessi</Text>
                        </TouchableOpacity>
                    </View>
                </View>

                {/* Recent Activity */}
                <View>
                    <View className="flex-row justify-between items-center px-1 mb-4">
                        <Text className="text-gray-800 text-xl font-bold">Ultime Attività</Text>
                        {/* <TouchableOpacity>
                            <Text className="text-base text-[#099499] font-bold p-1">Vedi tutto</Text>
                        </TouchableOpacity> */}
                    </View>
                    <View className="gap-4">
                        {recentActivities.map((item) => {
                            const config = getActivityConfig(item.type);
                            const IconComponent = config.icon;
                            return (
                                <View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row items-center justify-between">
                                    <View className="flex-row items-center gap-4 flex-1">

                                        {/* Icona */}
                                        <View className={`${config.bg} p-4 rounded-2xl flex-shrink-0`}>
                                            <IconComponent size={24} color={config.color} />
                                        </View>

                                        {/* Titolo e Sottotitolo */}
                                        <View className="flex-1 mr-2">
                                            <Text
                                                className="text-lg font-bold text-gray-800 mb-0.5 leading-tight"
                                                numberOfLines={1}
                                                ellipsizeMode="tail"
                                            >
                                                {item.title}
                                            </Text>
                                            <Text
                                                className="text-base text-gray-400 font-medium"
                                                numberOfLines={1}
                                            >
                                                {item.subtitle}
                                            </Text>
                                        </View>
                                    </View>

                                    {/* Data */}
                                    <View className="flex-shrink-0">
                                        <Text className="text-sm font-bold text-gray-300">{item.date_display}</Text>
                                    </View>
                                </View>
                            );
                        })}

                        {/* Empty State */}
                        {!isLoading && recentActivities.length === 0 && (
                            <View className="bg-white p-8 rounded-3xl border border-gray-100 items-center justify-center border-dashed">
                                <Text className="text-gray-400 font-medium">Nessuna attività recente</Text>
                            </View>
                        )}

                        {/* Loading State */}
                        {isLoading && recentActivities.length === 0 && (
                            <View className="bg-white p-5 rounded-3xl border border-gray-100 h-24 justify-center items-center">
                                <Text className="text-gray-400">Caricamento...</Text>
                            </View>
                        )}
                    </View>
                </View>
            </ScrollView>
        </View>
    );
}