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

interface GoalProgressCardProps {
    goal: FitnessGoal;
    onPress?: () => void;
    onComplete?: () => void;
    onDelete?: () => void;
}

export function GoalProgressCard({ goal, onPress, onComplete, onDelete }: GoalProgressCardProps) {
    const isCompleted = goal.status === 'completed';
    const progress = goal.progress || 0;

    // Calculate days remaining
    const daysRemaining = goal.targetDate
        ? Math.ceil((new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
        : null;

    const getGoalTypeIcon = (type: string) => {
        switch (type) {
            case 'weight_target': return 'scale-outline';
            case 'strength_milestone': return 'barbell-outline';
            case 'endurance_target': return 'bicycle-outline';
            case 'flexibility_goal': return 'body-outline';
            case 'habit_building': return 'calendar-outline';
            default: return 'flag-outline';
        }
    };

    const getPriorityGradient = (priority: string): readonly [string, string] => {
        switch (priority) {
            case 'high': return theme.gradients.danger;
            case 'medium': return theme.gradients.warning;
            case 'low': return theme.gradients.success;
            default: return theme.gradients.primary;
        }
    };

    const handleDelete = () => {
        Alert.alert(
            'Delete Goal',
            'Are you sure you want to delete this goal?',
            [
                { text: 'Cancel', style: 'cancel' },
                { text: 'Delete', style: 'destructive', onPress: onDelete },
            ]
        );
    };

    return (
        <TouchableOpacity
            onPress={onPress}
            activeOpacity={0.7}
        >
            <LinearGradient
                colors={isCompleted
                    ? ['rgba(16, 185, 129, 0.05)', 'rgba(5, 150, 105, 0.02)'] as const
                    : ['rgba(255, 255, 255, 1)', 'rgba(249, 250, 251, 1)'] as const
                }
                style={[
                    styles.card,
                    theme.shadows.medium,
                    isCompleted && styles.cardCompleted
                ]}
            >
                {/* Priority Accent Bar */}
                <LinearGradient
                    colors={getPriorityGradient(goal.priority)}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                    style={styles.priorityAccent}
                />

                <View style={styles.header}>
                    <View style={styles.titleRow}>
                        <LinearGradient
                            colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
                            style={styles.iconContainer}
                        >
                            <Ionicons
                                name={getGoalTypeIcon(goal.goalType) as any}
                                size={20}
                                color="#fff"
                            />
                        </LinearGradient>
                        <View style={styles.titleContainer}>
                            <Text style={[styles.title, isCompleted && styles.titleCompleted]}>
                                {goal.title}
                            </Text>
                            {goal.description && (
                                <Text style={styles.description} numberOfLines={2}>
                                    {goal.description}
                                </Text>
                            )}
                        </View>
                    </View>

                    <View style={styles.actions}>
                        {!isCompleted && onComplete && (
                            <TouchableOpacity onPress={onComplete} style={styles.actionButton}>
                                <Ionicons name="checkmark-circle-outline" size={24} color={theme.colors.success} />
                            </TouchableOpacity>
                        )}
                        {onDelete && (
                            <TouchableOpacity onPress={handleDelete} style={styles.actionButton}>
                                <Ionicons name="trash-outline" size={22} color={theme.colors.danger} />
                            </TouchableOpacity>
                        )}
                    </View>
                </View>

                {goal.targetValue && (
                    <View style={styles.progressSection}>
                        <View style={styles.progressInfo}>
                            <Text style={styles.progressText}>
                                {goal.currentValue || 0} / {goal.targetValue} {goal.unit || ''}
                            </Text>
                            <Text style={[styles.progressPercentage, isCompleted && { color: theme.colors.success }]}>
                                {progress.toFixed(0)}%
                            </Text>
                        </View>

                        <View style={styles.progressBarContainer}>
                            <LinearGradient
                                colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
                                start={{ x: 0, y: 0 }}
                                end={{ x: 1, y: 0 }}
                                style={[
                                    styles.progressBar,
                                    { width: `${Math.min(progress, 100)}%` }
                                ]}
                            />
                        </View>
                    </View>
                )}

                <View style={styles.footer}>
                    <LinearGradient
                        colors={getPriorityGradient(goal.priority)}
                        style={styles.priorityBadge}
                    >
                        <Text style={styles.priorityText}>{goal.priority.toUpperCase()}</Text>
                    </LinearGradient>

                    {daysRemaining !== null && !isCompleted && (
                        <Text style={[styles.daysRemaining, daysRemaining < 0 && styles.overdue]}>
                            {daysRemaining < 0
                                ? `${Math.abs(daysRemaining)} days overdue`
                                : `${daysRemaining} days remaining`
                            }
                        </Text>
                    )}

                    {isCompleted && goal.completedDate && (
                        <Text style={styles.completedDate}>
                            Completed {new Date(goal.completedDate).toLocaleDateString()}
                        </Text>
                    )}
                </View>
            </LinearGradient>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    card: {
        borderRadius: theme.borderRadius.xl,
        padding: 16,
        marginBottom: 12,
        borderWidth: 1,
        borderColor: 'rgba(59, 130, 246, 0.1)',
        overflow: 'hidden',
    },
    cardCompleted: {
        borderColor: 'rgba(16, 185, 129, 0.2)',
    },
    priorityAccent: {
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        width: 4,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginBottom: 12,
        marginLeft: 8,
    },
    titleRow: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        flex: 1,
    },
    iconContainer: {
        width: 40,
        height: 40,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 12,
    },
    titleContainer: {
        flex: 1,
    },
    title: {
        fontSize: theme.typography.fontSize.lg,
        fontWeight: theme.typography.fontWeight.semibold,
        color: theme.colors.gray900,
        marginBottom: 4,
    },
    titleCompleted: {
        color: theme.colors.gray600,
        textDecorationLine: 'line-through',
    },
    description: {
        fontSize: theme.typography.fontSize.sm,
        color: theme.colors.gray600,
        lineHeight: 18,
    },
    actions: {
        flexDirection: 'row',
        gap: 8,
    },
    actionButton: {
        padding: 4,
    },
    progressSection: {
        marginBottom: 12,
        marginLeft: 8,
    },
    progressInfo: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 8,
    },
    progressText: {
        fontSize: theme.typography.fontSize.sm,
        fontWeight: theme.typography.fontWeight.medium,
        color: theme.colors.gray700,
    },
    progressPercentage: {
        fontSize: theme.typography.fontSize.sm,
        fontWeight: theme.typography.fontWeight.semibold,
        color: theme.colors.primary,
    },
    progressBarContainer: {
        height: 8,
        backgroundColor: theme.colors.gray200,
        borderRadius: 4,
        overflow: 'hidden',
    },
    progressBar: {
        height: '100%',
        borderRadius: 4,
    },
    footer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginLeft: 8,
    },
    priorityBadge: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: theme.borderRadius.md,
    },
    priorityText: {
        fontSize: theme.typography.fontSize.xs,
        fontWeight: theme.typography.fontWeight.semibold,
        color: theme.colors.white,
    },
    daysRemaining: {
        fontSize: theme.typography.fontSize.xs,
        color: theme.colors.gray600,
        fontWeight: theme.typography.fontWeight.medium,
    },
    overdue: {
        color: theme.colors.danger,
        fontWeight: theme.typography.fontWeight.semibold,
    },
    completedDate: {
        fontSize: theme.typography.fontSize.xs,
        color: theme.colors.success,
        fontWeight: theme.typography.fontWeight.medium,
    },
});
