import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
import { PermitType } from '@/types/types';
import { X } from 'lucide-react-native';
import { TimePickerModal } from './TimePickerModal';

interface RequestPermitModalProps {
    visible: boolean;
    onClose: () => void;
    onSubmit: (data: any) => void;
}

export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) {
    const defaultStyles = useDefaultStyles();
    const [type, setType] = useState<PermitType>('Ferie');
    const [date, setDate] = useState<DateType>();
    const [range, setRange] = useState<{
        startDate: DateType;
        endDate: DateType;
    }>({ startDate: undefined, endDate: undefined });

    const [showStartPicker, setShowStartPicker] = useState(false);
    const [showEndPicker, setShowEndPicker] = useState(false);
    const [startTime, setStartTime] = useState('');
    const [endTime, setEndTime] = useState('');

    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 h-[85%] sm:h-auto">
                    {/* Header Modale */}
                    <View className="flex-row justify-between items-center mb-6">
                        <Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
                            <X size={24} color="#4b5563" />
                        </TouchableOpacity>
                    </View>

                    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
                        <View className="space-y-6 gap-6">
                            {/* Tipologia */}
                            <View>
                                <Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
                                <View className="flex-row gap-3">
                                    {(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
                                        <TouchableOpacity
                                            key={t}
                                            onPress={() => setType(t)}
                                            className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${type === t
                                                ? 'border-[#099499] bg-teal-50'
                                                : 'border-gray-100 bg-white'
                                                }`}
                                        >
                                            <Text className={`text-sm font-bold ${type === t ? 'text-[#099499]' : 'text-gray-500'
                                                }`}>
                                                {t}
                                            </Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>

                            {/* Date Selection */}
                            {type !== 'Permesso' ? (
                                <DateTimePicker
                                    mode="range"
                                    startDate={range.startDate}
                                    endDate={range.endDate}
                                    onChange={(params) => setRange(params)}
                                    timeZone='Europe/Rome'
                                    locale='it'
                                    styles={{
                                        ...defaultStyles,
                                        selected: { backgroundColor: '#099499' }
                                    }}
                                />
                            ) : (
                                <View className='flex-column'>
                                    <DateTimePicker
                                        mode="single"
                                        date={date}
                                        onChange={({ date }) => setDate(date)}
                                        timeZone='Europe/Rome'
                                        locale='it'
                                        styles={{
                                            ...defaultStyles,
                                            selected: { backgroundColor: '#099499' }
                                        }}
                                    />

                                    <View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
                                        <View className="flex-1">
                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
                                            <TouchableOpacity onPress={() => setShowStartPicker(true)}>
                                                <TextInput
                                                    placeholder="09:00"
                                                    className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
                                                    value={startTime}
                                                    onChangeText={setStartTime}
                                                    editable={false}
                                                />
                                            </TouchableOpacity>
                                        </View>
                                        <View className="flex-1">
                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
                                            <TouchableOpacity onPress={() => setShowEndPicker(true)}>
                                                <TextInput
                                                    placeholder="18:00"
                                                    className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
                                                    value={endTime}
                                                    onChangeText={setEndTime}
                                                    editable={false}
                                                />
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>
                            )}

                            <TimePickerModal
                                visible={showStartPicker}
                                initialDate={new Date()}
                                onConfirm={(time) => setStartTime(time)}
                                onClose={() => setShowStartPicker(false)}
                            />
                            <TimePickerModal
                                visible={showEndPicker}
                                initialDate={new Date()}
                                onConfirm={(time) => setEndTime(time)}
                                onClose={() => setShowEndPicker(false)}
                            />

                            <View>
                                <TouchableOpacity
                                    onPress={() => {
                                        onSubmit({ type, date, range, startTime, endTime });
                                        onClose();
                                    }}
                                    className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]"
                                >
                                    <Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    onPress={() => {
                                        console.log("Reset pressed");
                                        onClose();
                                        // TODO: deselect dates from calendar
                                    }}
                                    className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
                                >
                                    <Text className="text-gray-700 font-bold text-lg ml-2">Annulla Richiesta</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
};