import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { PermitType } from '@/types/types';
import { X } from 'lucide-react-native';

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

export default function RequestPermitModal({ visible, onClose, onSubmit}: RequestPermitModalProps) {
    const [type, setType] = useState<PermitType>('Ferie');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    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 */}
                            <View className="flex-row gap-4">
                                <View className={`flex-1 ${type === 'Permesso' ? 'w-full' : ''}`}>
                                    <Text className="text-sm font-bold text-gray-700 mb-2">
                                        {type === 'Permesso' ? 'Data' : 'Dal'}
                                    </Text>
                                    <TextInput 
                                        placeholder="YYYY-MM-DD"
                                        className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
                                        value={startDate}
                                        onChangeText={setStartDate}
                                    />
                                </View>
                                {type !== 'Permesso' && (
                                    <View className="flex-1">
                                        <Text className="text-sm font-bold text-gray-700 mb-2">Al</Text>
                                        <TextInput 
                                            placeholder="YYYY-MM-DD"
                                            className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
                                            value={endDate}
                                            onChangeText={setEndDate}
                                        />
                                    </View>
                                )}
                            </View>

                            {/* Time Selection (Solo Permessi) */}
                            {type === 'Permesso' && (
                                <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>
                                        <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}
                                        />
                                    </View>
                                    <View className="flex-1">
                                        <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
                                        <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}
                                        />
                                    </View>
                                </View>
                            )}

                            <TouchableOpacity 
                                onPress={() => {
                                    onSubmit({ type, startDate, endDate, startTime, endTime });
                                    onClose();
                                }}
                                className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg mt-4 active:scale-[0.98]"
                            >
                                <Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
                            </TouchableOpacity>
                        </View>
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
};