import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { theme } from '../styles/theme';

interface AddWaterModalProps {
    visible: boolean;
    onClose: () => void;
    onAdd: (amount: number) => void;
    onResetData?: () => void;
}

const QUICK_AMOUNTS = [
    { label: 'Small Glass', amount: 250, icon: 'water-outline' },
    { label: 'Large Glass', amount: 500, icon: 'water' },
    { label: 'Bottle', amount: 750, icon: 'flask' },
];

export function AddWaterModal({ visible, onClose, onAdd, onResetData }: AddWaterModalProps) {
    const [customAmount, setCustomAmount] = useState('');

    useEffect(() => {
        if (visible) {
            setCustomAmount('');
        }
    }, [visible]);

    const handleReset = () => {
        setCustomAmount('');
        if (onResetData) {
            onResetData();
        }
    };

    const handleAdd = (amount: number) => {
        onAdd(amount);
        setCustomAmount('');
    };

    const handleCustomAdd = () => {
        const amount = parseInt(customAmount, 10);
        if (amount > 0) {
            handleAdd(amount);
        }
    };

    return (
        <Modal
            visible={visible}
            transparent
            animationType="slide"
            onRequestClose={onClose}
        >
            <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                style={styles.modalContainer}
            >
                <View style={styles.contentContainer}>
                    <View style={styles.header}>
                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                            <Ionicons name="close" size={24} color={theme.colors.gray500} />
                        </TouchableOpacity>
                        <Text style={styles.title}>Add Water</Text>
                        <TouchableOpacity onPress={handleReset}>
                            <Text style={styles.resetText}>Reset</Text>
                        </TouchableOpacity>
                    </View>

                    <Text style={styles.subtitle}>Quick Add</Text>
                    <View style={styles.quickAddContainer}>
                        {QUICK_AMOUNTS.map((item) => (
                            <TouchableOpacity
                                key={item.amount}
                                onPress={() => handleAdd(item.amount)}
                                style={styles.quickAddItem}
                            >
                                <View style={styles.quickAddIcon}>
                                    <Ionicons name={item.icon as any} size={24} color={theme.colors.primary} />
                                </View>
                                <Text style={styles.quickAddLabel}>{item.label}</Text>
                                <Text style={styles.quickAddAmount}>{item.amount}ml</Text>
                            </TouchableOpacity>
                        ))}
                    </View>

                    <Text style={styles.subtitle}>Custom Amount</Text>
                    <View style={styles.customInputContainer}>
                        <TextInput
                            style={styles.input}
                            placeholder="e.g., 300"
                            value={customAmount}
                            onChangeText={setCustomAmount}
                            keyboardType="number-pad"
                            placeholderTextColor={theme.colors.gray400}
                        />
                        <Text style={styles.unit}>ml</Text>
                    </View>

                    <TouchableOpacity onPress={handleCustomAdd} style={styles.addButtonContainer}>
                        <LinearGradient
                            colors={theme.gradients.ocean}
                            style={styles.addButton}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 0 }}
                        >
                            <Text style={styles.addButtonText}>Add Water</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </Modal>
    );
}

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    contentContainer: {
        backgroundColor: '#fff',
        borderTopLeftRadius: 32,
        borderTopRightRadius: 32,
        padding: 24,
        paddingBottom: 40,
        ...theme.shadows.strong,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 24,
    },
    title: {
        fontSize: 24,
        fontWeight: '700',
        color: theme.colors.gray900,
    },
    closeButton: {
        padding: 4,
    },
    resetText: {
        fontSize: 16,
        color: theme.colors.primary,
        fontWeight: '600',
    },
    subtitle: {
        fontSize: 16,
        fontWeight: '600',
        color: theme.colors.gray700,
        marginBottom: 16,
    },
    quickAddContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 32,
        gap: 12,
    },
    quickAddItem: {
        flex: 1,
        alignItems: 'center',
        padding: 16,
        backgroundColor: theme.colors.gray50,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: theme.colors.gray200,
    },
    quickAddIcon: {
        width: 48,
        height: 48,
        borderRadius: 24,
        backgroundColor: '#e0f2fe',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 8,
    },
    quickAddLabel: {
        fontSize: 12,
        fontWeight: '600',
        color: theme.colors.gray800,
        marginBottom: 2,
        textAlign: 'center',
    },
    quickAddAmount: {
        fontSize: 12,
        color: theme.colors.gray500,
    },
    customInputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 32,
    },
    input: {
        flex: 1,
        backgroundColor: theme.colors.gray50,
        borderWidth: 1,
        borderColor: theme.colors.gray200,
        borderRadius: 16,
        padding: 16,
        fontSize: 16,
        color: theme.colors.gray900,
        marginRight: 12,
    },
    unit: {
        fontSize: 16,
        fontWeight: '600',
        color: theme.colors.gray500,
    },
    addButtonContainer: {
        marginTop: 8,
    },
    addButton: {
        paddingVertical: 16,
        borderRadius: 20,
        alignItems: 'center',
    },
    addButtonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: '700',
    },
});
