import AddDocumentModal from '@/components/AddDocumentModal';
import { useAlert } from '@/components/AlertComponent';
import LoadingScreen from '@/components/LoadingScreen';
import { RangePickerModal } from '@/components/RangePickerModal';
import { DocumentItem } from '@/types/types';
import api from '@/utils/api';
import { formatTimestamp, parseTimestamp } from '@/utils/dateTime';
import { downloadAndShareDocument, uploadDocument } from '@/utils/documentUtils';
import dayjs from 'dayjs';
import { useRouter } from 'expo-router';
import { CalendarIcon, ChevronLeft, Download, FileText, MapPin, Plus, Search } from 'lucide-react-native';
import React, { useEffect, useState } from 'react';
import { RefreshControl, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function DocumentsScreen() {
    const router = useRouter();
    const alert = useAlert();
    const [documents, setDocuments] = useState<DocumentItem[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [showUploadModal, setShowUploadModal] = useState(false);
    const [isUploading, setIsUploading] = useState(false);

    const [showRangePicker, setShowRangePicker] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [range, setRange] = useState<{ startDate: any; endDate: any }>({
        startDate: null,
        endDate: null
    });

    const fetchUserDocuments = async () => {
        try {
            if (!refreshing) setIsLoading(true);

            // Fetch User Documents
            const response = await api.get(`/attachment/get-user-attachments`);
            setDocuments(response.data);
        } catch (error) {
            console.error('Errore nel recupero dei documenti utente:', error);
            alert.showAlert('error', 'Errore', 'Impossibile recuperare i documenti. Riprova più tardi.');
        } finally {
            setIsLoading(false);
            setRefreshing(false);
        }
    };

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

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

    // Filter Documents based on searchTerm and range
    const filteredDocs = documents.filter(doc => {
        // Text Filter
        const matchesSearch = doc.title.toLowerCase().includes(searchTerm.toLowerCase());
        if (!matchesSearch) return false;

        // Date Range Filter
        if (range.startDate || range.endDate) {
            const docDate = parseTimestamp(doc.updated_at); // doc.date è "DD/MM/YYYY"

            // Start Date Check
            if (range.startDate) {
                // dayjs(range.startDate).toDate() converts to standard JS Date object
                const start = dayjs(range.startDate).startOf('day').toDate();
                if (docDate < start) return false;
            }

            // End Date Check
            if (range.endDate) {
                const end = dayjs(range.endDate).endOf('day').toDate();
                if (docDate > end) return false;
            }
        }

        return true;
    });

    // Document Upload Handling
    const handleUploadDocument = async (file: any, customTitle?: string) => {
        setIsUploading(true);
        try {
            await uploadDocument(file, null, customTitle);
            alert.showAlert('success', 'Successo', 'Documento caricato con successo!');
            setShowUploadModal(false);
            fetchUserDocuments();
        } catch (error) {
            console.error('Errore nel caricamento del documento:', error);
            alert.showAlert('error', 'Errore', 'Impossibile caricare il documento. Riprova più tardi.');
        } finally {
            setIsUploading(false);
        }
    };

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

    return (
        <View className="flex-1 bg-gray-50">
            {/* Header */}
            <View className="bg-white px-4 pb-6 shadow-sm border-b border-gray-100">
                <SafeAreaView edges={['top']} className='pt-5'>
                    <View className='flex-row items-center gap-4'>
                        <TouchableOpacity onPress={() => router.back()} className="p-2 rounded-full active:bg-gray-100">
                            <ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
                        </TouchableOpacity>
                        <View className="flex-1">
                            <Text className="text-3xl font-bold text-gray-800">Documenti</Text>
                            <Text className="text-base text-gray-500">Gestisci i tuoi documenti</Text>
                        </View>
                    </View>
                </SafeAreaView>
            </View>

            <View className="p-5 gap-6 flex-1">
                {/* Search + Date Row */}
                <View className="flex-row gap-2">
                    {/* Search Bar */}
                    <View className={`flex-1 relative justify-center`}>
                        <View className="absolute left-4 z-10">
                            <Search size={24} color="#9ca3af" pointerEvents="none" />
                        </View>
                        <TextInput
                            placeholder="Cerca nome del documento..."
                            placeholderTextColor="#9ca3af"
                            className={`w-full pl-12 pr-4 py-4 bg-white shadow-sm rounded-2xl text-gray-800 text-lg border shadow-sm ${searchTerm ? 'border-[#099499]' : 'border-gray-200'}`}
                            value={searchTerm}
                            onChangeText={setSearchTerm}
                        />
                    </View>

                    {/* Date Filter Button */}
                    <TouchableOpacity
                        onPress={() => setShowRangePicker(true)}
                        className={`p-4 bg-white rounded-2xl shadow-sm border ${range.startDate ? 'border-[#099499]' : 'border-gray-200'}`}
                    >
                        <CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} pointerEvents="none" />
                    </TouchableOpacity>
                </View>

                {/* Range Picker Modal */}
                <RangePickerModal
                    visible={showRangePicker}
                    onClose={() => setShowRangePicker(false)}
                    currentRange={range}
                    onApply={setRange}
                />

                {/* Documents List */}
                <ScrollView
                    contentContainerStyle={{ gap: 16, paddingBottom: 100 }}
                    showsVerticalScrollIndicator={false}
                    refreshControl={
                        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} />
                    }
                >
                    {filteredDocs.map((doc) => (
                        <View key={doc.id} className="bg-white p-5 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
                            <View className="flex-row items-center gap-5 flex-1">
                                <View className="bg-red-50 p-4 rounded-2xl">
                                    <FileText size={32} color="#ef4444" pointerEvents="none" />
                                </View>
                                <View className="flex-1">
                                    <Text className="font-bold text-gray-800 text-lg mb-1">{doc.title}</Text>
                                    <View className="flex-row items-center mt-1">
                                        <MapPin size={16} color="#9ca3af" pointerEvents="none" />
                                        <Text className="text-sm text-gray-400 ml-1 font-medium">{formatTimestamp(doc.updated_at)}</Text>
                                    </View>
                                </View>
                            </View>
                            <TouchableOpacity
                                onPress={() => downloadAndShareDocument(doc.mimetype, doc.title, doc.url)}
                                className="p-4 bg-gray-50 rounded-2xl active:bg-gray-100">
                                <Download size={24} color="#6b7280" pointerEvents="none" />
                            </TouchableOpacity>
                        </View>
                    ))}

                    {filteredDocs.length === 0 && (
                        <Text className="text-center text-gray-400 mt-10">Nessun documento trovato</Text>
                    )}
                </ScrollView>
            </View>

            {/* FAB */}
            <TouchableOpacity
                onPress={() => setShowUploadModal(true)}
                className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
            >
                <Plus size={32} color="white" pointerEvents="none" />
            </TouchableOpacity>

            {/* Document Upload Modal */}
            <AddDocumentModal
                visible={showUploadModal}
                onClose={() => setShowUploadModal(false)}
                onUpload={handleUploadDocument}
                isUploading={isUploading}
            />
        </View>
    );
}