import { AppDatePicker } from '@/components/AppDatePicker';
import PlaceFilter from '@/components/PlaceFilter';
import SupplierFilter from '@/components/SupplierFilter';
import MachineFilter from '@/components/MachineFilter';
import { Machine, Place, Supplier } from '@/types/types';
import { formatPickerDate } from '@/utils/dateTime';
import { X } from 'lucide-react-native';
import React, { useEffect, useState } from 'react';
import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';

interface FilterModalProps {
    visible: boolean;
    places?: Place[];
    currentRange?: { startDate: string | null; endDate: string | null };
    currentPlace?: Place | null;
    currentSupplier?: Supplier | null;
    currentMachine?: Machine | null;
    showDate?: boolean;
    showPlace?: boolean;
    showSupplier?: boolean;
    showMachine?: boolean;
    onClose: () => void;
    onApply: (range: { startDate: string | null; endDate: string | null }, place: Place | null, supplier: Supplier | null, machine: Machine | null) => void;
    onReset: () => void;
}

export default function FilterModal({
    visible,
    places = [],
    currentRange = { startDate: null, endDate: null },
    currentPlace = null,
    currentSupplier = null,
    currentMachine = null,
    showDate = true,
    showPlace = true,
    showSupplier = false,
    showMachine = false,
    onClose,
    onApply,
    onReset,
}: FilterModalProps) {
    const [localRange, setLocalRange] = useState<{ startDate: string | null; endDate: string | null }>(currentRange);
    const [localPlace, setLocalPlace] = useState<any>(currentPlace);
    const [localSupplier, setLocalSupplier] = useState<any>(currentSupplier);
    const [localMachine, setLocalMachine] = useState<any>(currentMachine);

    // Sync local state when modal opens
    useEffect(() => {
        if (visible) {
            setLocalRange(currentRange);
            setLocalPlace(currentPlace);
            setLocalSupplier(currentSupplier);
            setLocalMachine(currentMachine);
        }
    }, [visible, currentRange, currentPlace, currentSupplier, currentMachine]);

    const handleApply = () => {
        onApply(localRange, localPlace, localSupplier, localMachine);
    };

    const handleReset = () => {
        onReset();
    };

    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="slide"
            statusBarTranslucent
        >
            <View className="flex-1 bg-black/60 justify-end sm:justify-center">
                <View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl max-h-[90%]">
                    {/* Modal Header */}
                    <View className="flex-row justify-between items-center mb-6">
                        <Text className="text-2xl font-bold text-gray-800">Filtra Risultati</Text>
                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
                            <X size={24} color="#4b5563" pointerEvents="none" />
                        </TouchableOpacity>
                    </View>

                    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
                        <View className="space-y-6">
                            {/* Date Range Selection */}
                            {showDate && (
                                <View className="mb-6">
                                    <Text className="text-lg font-bold text-gray-700 mb-3">Periodo</Text>
                                    <AppDatePicker
                                        mode="range"
                                        startDate={localRange.startDate}
                                        endDate={localRange.endDate}
                                        onChange={(params: any) => {
                                            setLocalRange({
                                                startDate: params.startDate ? formatPickerDate(params.startDate) : null,
                                                endDate: params.endDate ? formatPickerDate(params.endDate) : null
                                            });
                                        }}
                                    />
                                </View>
                            )}

                            {/* Place Selection */}
                            {showPlace && (
                                <PlaceFilter
                                    places={places}
                                    selectedPlaceId={localPlace}
                                    onPlaceSelect={setLocalPlace}
                                />
                            )}

                            {/* Supplier Selection */}
                            {showSupplier && (
                                <SupplierFilter
                                    selectedSupplierId={localSupplier}
                                    onSupplierSelect={setLocalSupplier}
                                />
                            )}

                            {/* Machine Selection */}
                            {showMachine && (
                                <MachineFilter
                                    selectedMachineId={localMachine}
                                    onMachineSelect={setLocalMachine}
                                />
                            )}

                            {/* Actions */}
                            <View className="flex-row gap-4">
                                <TouchableOpacity
                                    onPress={handleReset}
                                    className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
                                >
                                    <Text className="text-gray-700 text-center font-bold text-lg">Reset</Text>
                                </TouchableOpacity>

                                <TouchableOpacity
                                    onPress={handleApply}
                                    className="flex-1 py-4 bg-[#1071C2] rounded-2xl shadow-lg active:scale-[0.98]"
                                >
                                    <Text className="text-white text-center font-bold text-lg">Applica Filtri</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
}