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

interface ScanFoodModalProps {
    visible: boolean;
    onClose: () => void;
    onAddFood: (calories: number) => void;
}

// Mock food database
const FOOD_DATABASE: { [key: string]: { name: string; calories: number; servingSize: string } } = {
    '0123456789': { name: 'Apple', calories: 95, servingSize: '1 medium' },
    '9876543210': { name: 'Banana', calories: 105, servingSize: '1 medium' },
    '5555555555': { name: 'Protein Bar', calories: 200, servingSize: '1 bar' },
    '1111111111': { name: 'Greek Yogurt', calories: 150, servingSize: '1 cup' },
};

export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProps) {
    const [permission, requestPermission] = useCameraPermissions();
    const [scanned, setScanned] = useState(false);
    const [foodData, setFoodData] = useState<{ name: string; calories: number; servingSize: string } | null>(null);
    const [servings, setServings] = useState('1');

    useEffect(() => {
        if (visible) {
            setScanned(false);
            setFoodData(null);
            setServings('1');
        }
    }, [visible]);

    const handleBarCodeScanned = ({ data }: { data: string }) => {
        if (scanned) return;

        setScanned(true);

        // Look up food in database
        const food = FOOD_DATABASE[data];

        if (food) {
            setFoodData(food);
        } else {
            // Mock data for unknown barcodes
            setFoodData({
                name: 'Unknown Food',
                calories: 150,
                servingSize: '1 serving'
            });
        }
    };

    const handleConfirm = () => {
        if (foodData) {
            const totalCalories = foodData.calories * parseFloat(servings || '1');
            onAddFood(totalCalories);
            onClose();
        }
    };

    const handleRescan = () => {
        setScanned(false);
        setFoodData(null);
        setServings('1');
    };

    if (!permission) {
        return null;
    }

    if (!permission.granted) {
        return (
            <Modal visible={visible} transparent animationType="slide">
                <View style={styles.permissionContainer}>
                    <View style={styles.permissionContent}>
                        <Ionicons name="camera-outline" size={64} color={theme.colors.primary} />
                        <Text style={styles.permissionTitle}>Camera Permission Required</Text>
                        <Text style={styles.permissionText}>
                            We need access to your camera to scan food barcodes.
                        </Text>
                        <TouchableOpacity onPress={requestPermission} style={styles.permissionButtonContainer}>
                            <LinearGradient
                                colors={theme.gradients.primary}
                                style={styles.permissionButton}
                            >
                                <Text style={styles.permissionButtonText}>Grant Permission</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={onClose} style={styles.cancelButton}>
                            <Text style={styles.cancelButtonText}>Cancel</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        );
    }

    return (
        <Modal visible={visible} animationType="slide">
            <View style={styles.container}>
                {!foodData ? (
                    <>
                        <View style={styles.header}>
                            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                                <Ionicons name="close" size={28} color="#fff" />
                            </TouchableOpacity>
                            <Text style={styles.title}>Scan Food Barcode</Text>
                            <View style={{ width: 28 }} />
                        </View>

                        <CameraView
                            style={styles.camera}
                            facing="back"
                            onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
                            barcodeScannerSettings={{
                                barcodeTypes: ['ean13', 'ean8', 'upc_a', 'upc_e', 'code128', 'code39'],
                            }}
                        >
                            <View style={styles.scanOverlay}>
                                <View style={styles.scanFrame} />
                                <Text style={styles.scanText}>Position barcode within frame</Text>
                            </View>
                        </CameraView>
                    </>
                ) : (
                    <View style={styles.resultContainer}>
                        <View style={styles.resultHeader}>
                            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                                <Ionicons name="close" size={28} color={theme.colors.gray900} />
                            </TouchableOpacity>
                            <Text style={styles.resultTitle}>Food Details</Text>
                            <View style={{ width: 28 }} />
                        </View>

                        <View style={styles.foodCard}>
                            <View style={styles.foodIconContainer}>
                                <LinearGradient
                                    colors={theme.gradients.success}
                                    style={styles.foodIcon}
                                >
                                    <Ionicons name="restaurant" size={32} color="#fff" />
                                </LinearGradient>
                            </View>

                            <Text style={styles.foodName}>{foodData.name}</Text>
                            <Text style={styles.servingSize}>{foodData.servingSize}</Text>

                            <View style={styles.caloriesBadge}>
                                <Text style={styles.caloriesValue}>{foodData.calories}</Text>
                                <Text style={styles.caloriesLabel}>kcal per serving</Text>
                            </View>

                            <View style={styles.servingsContainer}>
                                <Text style={styles.label}>Number of Servings</Text>
                                <View style={styles.servingsInput}>
                                    <TouchableOpacity
                                        onPress={() => setServings(String(Math.max(0.5, parseFloat(servings || '1') - 0.5)))}
                                        style={styles.servingsButton}
                                    >
                                        <Ionicons name="remove" size={20} color={theme.colors.primary} />
                                    </TouchableOpacity>
                                    <TextInput
                                        style={styles.servingsValue}
                                        value={servings}
                                        onChangeText={setServings}
                                        keyboardType="decimal-pad"
                                    />
                                    <TouchableOpacity
                                        onPress={() => setServings(String(parseFloat(servings || '1') + 0.5))}
                                        style={styles.servingsButton}
                                    >
                                        <Ionicons name="add" size={20} color={theme.colors.primary} />
                                    </TouchableOpacity>
                                </View>
                            </View>

                            <View style={styles.totalCalories}>
                                <Text style={styles.totalLabel}>Total Calories</Text>
                                <Text style={styles.totalValue}>
                                    {Math.round(foodData.calories * parseFloat(servings || '1'))} kcal
                                </Text>
                            </View>
                        </View>

                        <View style={styles.buttonRow}>
                            <TouchableOpacity onPress={handleRescan} style={styles.rescanButton}>
                                <Text style={styles.rescanButtonText}>Scan Again</Text>
                            </TouchableOpacity>

                            <TouchableOpacity onPress={handleConfirm} style={styles.confirmButtonContainer}>
                                <LinearGradient
                                    colors={theme.gradients.success}
                                    style={styles.confirmButton}
                                >
                                    <Text style={styles.confirmButtonText}>Add to Diary</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                        </View>
                    </View>
                )}
            </View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 20,
        paddingTop: 60,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
    },
    closeButton: {
        padding: 4,
    },
    title: {
        fontSize: 18,
        fontWeight: '700',
        color: '#fff',
    },
    camera: {
        flex: 1,
    },
    scanOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
    },
    scanFrame: {
        width: 250,
        height: 250,
        borderWidth: 2,
        borderColor: '#fff',
        borderRadius: 20,
        backgroundColor: 'transparent',
    },
    scanText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
        marginTop: 24,
        textAlign: 'center',
    },
    resultContainer: {
        flex: 1,
        backgroundColor: theme.colors.background,
    },
    resultHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 20,
        paddingTop: 60,
        backgroundColor: '#fff',
    },
    resultTitle: {
        fontSize: 18,
        fontWeight: '700',
        color: theme.colors.gray900,
    },
    foodCard: {
        margin: 20,
        padding: 24,
        backgroundColor: '#fff',
        borderRadius: 24,
        alignItems: 'center',
        ...theme.shadows.medium,
    },
    foodIconContainer: {
        marginBottom: 16,
    },
    foodIcon: {
        width: 80,
        height: 80,
        borderRadius: 40,
        justifyContent: 'center',
        alignItems: 'center',
    },
    foodName: {
        fontSize: 24,
        fontWeight: '700',
        color: theme.colors.gray900,
        marginBottom: 8,
        textAlign: 'center',
    },
    servingSize: {
        fontSize: 16,
        color: theme.colors.gray600,
        marginBottom: 24,
    },
    caloriesBadge: {
        backgroundColor: theme.colors.gray50,
        paddingHorizontal: 24,
        paddingVertical: 16,
        borderRadius: 16,
        alignItems: 'center',
        marginBottom: 32,
    },
    caloriesValue: {
        fontSize: 32,
        fontWeight: '700',
        color: theme.colors.primary,
    },
    caloriesLabel: {
        fontSize: 14,
        color: theme.colors.gray600,
        marginTop: 4,
    },
    servingsContainer: {
        width: '100%',
        marginBottom: 24,
    },
    label: {
        fontSize: 16,
        fontWeight: '600',
        color: theme.colors.gray700,
        marginBottom: 12,
    },
    servingsInput: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 16,
    },
    servingsButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        backgroundColor: theme.colors.gray100,
        justifyContent: 'center',
        alignItems: 'center',
    },
    servingsValue: {
        fontSize: 24,
        fontWeight: '700',
        color: theme.colors.gray900,
        textAlign: 'center',
        minWidth: 60,
    },
    totalCalories: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: 24,
        borderTopWidth: 1,
        borderTopColor: theme.colors.gray200,
    },
    totalLabel: {
        fontSize: 16,
        fontWeight: '600',
        color: theme.colors.gray700,
    },
    totalValue: {
        fontSize: 20,
        fontWeight: '700',
        color: theme.colors.gray900,
    },
    buttonRow: {
        flexDirection: 'row',
        padding: 20,
        gap: 12,
    },
    rescanButton: {
        flex: 1,
        paddingVertical: 16,
        borderRadius: 20,
        backgroundColor: theme.colors.gray100,
        alignItems: 'center',
    },
    rescanButtonText: {
        fontSize: 16,
        fontWeight: '700',
        color: theme.colors.gray700,
    },
    confirmButtonContainer: {
        flex: 1,
    },
    confirmButton: {
        paddingVertical: 16,
        borderRadius: 20,
        alignItems: 'center',
    },
    confirmButtonText: {
        fontSize: 16,
        fontWeight: '700',
        color: '#fff',
    },
    permissionContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    permissionContent: {
        backgroundColor: '#fff',
        borderRadius: 24,
        padding: 32,
        margin: 20,
        alignItems: 'center',
        ...theme.shadows.strong,
    },
    permissionTitle: {
        fontSize: 20,
        fontWeight: '700',
        color: theme.colors.gray900,
        marginTop: 16,
        marginBottom: 8,
    },
    permissionText: {
        fontSize: 16,
        color: theme.colors.gray600,
        textAlign: 'center',
        marginBottom: 24,
    },
    permissionButtonContainer: {
        width: '100%',
        marginBottom: 12,
    },
    permissionButton: {
        paddingVertical: 16,
        borderRadius: 20,
        alignItems: 'center',
    },
    permissionButtonText: {
        fontSize: 16,
        fontWeight: '700',
        color: '#fff',
    },
    cancelButton: {
        paddingVertical: 12,
    },
    cancelButtonText: {
        fontSize: 16,
        fontWeight: '600',
        color: theme.colors.gray600,
    },
});
