import React, { useEffect, useState } from 'react';
import { 
    KeyboardAvoidingView, 
    Modal, 
    Platform, 
    Text, 
    TextInput, 
    TouchableOpacity, 
    View, 
    Keyboard,
    ScrollView 
} from 'react-native';
import { X } from 'lucide-react-native';

interface SetDescriptionModalProps {
    visible: boolean;
    initialDescription: string;
    onClose: () => void;
    onSave: (desc: string) => void;
}

export default function SetDescriptionModal({
    visible,
    initialDescription,
    onClose,
    onSave
}: SetDescriptionModalProps) {
    const [desc, setDesc] = useState(initialDescription);

    useEffect(() => {
        if (visible) {
            setDesc(initialDescription || '');
        }
    }, [visible, initialDescription]);

    return (
        <Modal 
            visible={visible} 
            transparent 
            animationType="slide" 
            statusBarTranslucent
            onRequestClose={onClose}
        >
            <KeyboardAvoidingView 
                behavior={Platform.OS === 'ios' ? 'padding' : 'padding'} 
                className="flex-1"
            >
                <View className="flex-1 bg-black/60 justify-end">
                    
                    {/* Backdrop */}
                    <TouchableOpacity 
                        className="flex-1 w-full" 
                        onPress={() => {
                            Keyboard.dismiss();
                            onClose();
                        }} 
                        activeOpacity={1} 
                    />
                    
                    <View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl max-h-[85%]">

                        {/* Header */}
                        <View className="flex-row justify-between items-center mb-6">
                            <Text className="text-2xl font-bold text-gray-800">Descrizione Foto</Text>
                            <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
                                <X size={24} color="#4b5563" />
                            </TouchableOpacity>
                        </View>

                        {/* Text Area with Scroll */}
                        <ScrollView 
                            className="mb-6"
                            showsVerticalScrollIndicator={false}
                            keyboardShouldPersistTaps="handled"
                            bounces={false}
                        >
                            <TextInput
                                className="bg-gray-50 border border-gray-200 rounded-2xl p-4 text-base text-gray-800"
                                placeholder="Inserisci una descrizione... (max 250 caratteri)"
                                placeholderTextColor="#9ca3af"
                                multiline
                                maxLength={250}
                                value={desc}
                                onChangeText={setDesc}
                                style={{ minHeight: 120, maxHeight: 200, textAlignVertical: 'top' }}
                            />
                            <Text className={`text-right mt-2 text-sm font-medium ${desc.length >= 250 ? 'text-red-500' : 'text-gray-500'}`}>
                                {desc.length}/250
                            </Text>
                        </ScrollView>

                        {/* Actions */}
                        <View className="flex-row gap-4 mb-4">
                            <TouchableOpacity
                                onPress={onClose}
                                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">Annulla</Text>
                            </TouchableOpacity>

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