import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../styles/theme';

const { width } = Dimensions.get('window');
const ITEM_WIDTH = (width - 40 - 16) / 2; // (Screen width - padding - gap) / 2

interface QuickActionProps {
    icon: keyof typeof Ionicons.glyphMap;
    label: string;
    gradient: readonly [string, string, ...string[]];
    onPress?: () => void;
}

function QuickActionItem({ icon, label, gradient, onPress }: QuickActionProps) {
    return (
        <TouchableOpacity onPress={onPress} activeOpacity={0.8} style={styles.itemContainer}>
            <LinearGradient
                colors={['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.6)']}
                style={[styles.item, theme.shadows.subtle]}
            >
                <LinearGradient
                    colors={gradient}
                    style={styles.iconContainer}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                >
                    <Ionicons name={icon} size={24} color="#fff" />
                </LinearGradient>
                <Text style={styles.label}>{label}</Text>
                <Ionicons name="chevron-forward" size={16} color={theme.colors.gray400} style={styles.arrow} />
            </LinearGradient>
        </TouchableOpacity>
    );
}

interface QuickActionGridProps {
    onTrackMealPress?: () => void;
    onAddWaterPress?: () => void;
    onScanFoodPress?: () => void;
}

export function QuickActionGrid({ onTrackMealPress, onAddWaterPress, onScanFoodPress }: QuickActionGridProps) {
    return (
        <View style={styles.container}>
            <Text style={styles.sectionTitle}>Quick Actions</Text>
            <View style={styles.grid}>
                <QuickActionItem
                    icon="barbell"
                    label="Log Workout"
                    gradient={theme.gradients.primary}
                />
                <QuickActionItem
                    icon="restaurant"
                    label="Track Meal"
                    gradient={theme.gradients.success}
                    onPress={onTrackMealPress}
                />
                <QuickActionItem
                    icon="water"
                    label="Add Water"
                    gradient={theme.gradients.ocean}
                    onPress={onAddWaterPress}
                />
                <QuickActionItem
                    icon="scan"
                    label="Scan Food"
                    gradient={theme.gradients.purple}
                    onPress={onScanFoodPress}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 20,
        marginBottom: 24,
    },
    sectionTitle: {
        fontSize: 18,
        fontWeight: '700',
        color: theme.colors.gray900,
        marginBottom: 16,
    },
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 16,
    },
    itemContainer: {
        width: ITEM_WIDTH,
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        borderRadius: 20,
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.6)',
    },
    iconContainer: {
        width: 40,
        height: 40,
        borderRadius: 14,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 12,
    },
    label: {
        fontSize: 14,
        fontWeight: '600',
        color: theme.colors.gray800,
        flex: 1,
    },
    arrow: {
        opacity: 0.5,
    },
});