import { useState, useEffect } from "react";
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    ActivityIndicator,
    RefreshControl,
    Alert,
} from "react-native";
import { useAuth } from "@clerk/clerk-expo";
import { Ionicons } from "@expo/vector-icons";
import { fitnessGoalsService, type FitnessGoal, type CreateGoalData } from "../../services/fitnessGoals";
import { GoalProgressCard } from "../../components/GoalProgressCard";
import { GoalCreationModal } from "../../components/GoalCreationModal";

export default function GoalsScreen() {
    const { userId, getToken } = useAuth();
    const [goals, setGoals] = useState<FitnessGoal[]>([]);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [showCreateModal, setShowCreateModal] = useState(false);

    const fetchGoals = async () => {
        if (!userId) return;
        try {
            const token = await getToken();
            const data = await fitnessGoalsService.getGoals(userId, token);
            setGoals(data);
        } catch (error) {
            console.error("Error fetching fitness goals:", error);
            Alert.alert("Error", "Failed to load goals. Please try again.");
        } finally {
            setLoading(false);
            setRefreshing(false);
        }
    };

    useEffect(() => {
        fetchGoals();
    }, [userId]);

    const onRefresh = () => {
        setRefreshing(true);
        fetchGoals();
    };

    const handleCreateGoal = async (goalData: CreateGoalData) => {
        try {
            const token = await getToken();
            const newGoal = await fitnessGoalsService.createGoal(goalData, token);
            setGoals(prev => [newGoal, ...prev]);
            Alert.alert("Success", "Goal created successfully!");
        } catch (error) {
            console.error("Error creating goal:", error);
            throw error;
        }
    };

    const handleCompleteGoal = async (goalId: string) => {
        try {
            const token = await getToken();
            const updatedGoal = await fitnessGoalsService.completeGoal(goalId, token);
            setGoals(prev => prev.map(g => g.id === goalId ? updatedGoal : g));
            Alert.alert("Success", "Goal completed! 🎉");
        } catch (error) {
            console.error("Error completing goal:", error);
            Alert.alert("Error", "Failed to complete goal. Please try again.");
        }
    };

    const handleDeleteGoal = async (goalId: string) => {
        try {
            const token = await getToken();
            await fitnessGoalsService.deleteGoal(goalId, token);
            setGoals(prev => prev.filter(g => g.id !== goalId));
            Alert.alert("Success", "Goal deleted");
        } catch (error) {
            console.error("Error deleting goal:", error);
            Alert.alert("Error", "Failed to delete goal. Please try again.");
        }
    };

    const activeGoals = goals.filter(g => g.status === 'active');
    const completedGoals = goals.filter(g => g.status === 'completed');

    if (loading && !refreshing) {
        return (
            <View style={styles.center}>
                <ActivityIndicator size="large" color="#2563eb" />
            </View>
        );
    }

    return (
        <View style={styles.container}>
            <ScrollView
                refreshControl={
                    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
                }
            >
                <View style={styles.header}>
                    <View>
                        <Text style={styles.headerTitle}>My Fitness Goals</Text>
                        <Text style={styles.headerSubtitle}>
                            Track your fitness journey progress
                        </Text>
                    </View>
                </View>

                {/* Stats Summary */}
                {goals.length > 0 && (
                    <View style={styles.statsContainer}>
                        <View style={styles.statCard}>
                            <Text style={styles.statValue}>{activeGoals.length}</Text>
                            <Text style={styles.statLabel}>Active</Text>
                        </View>
                        <View style={styles.statCard}>
                            <Text style={styles.statValue}>{completedGoals.length}</Text>
                            <Text style={styles.statLabel}>Completed</Text>
                        </View>
                        <View style={styles.statCard}>
                            <Text style={styles.statValue}>
                                {activeGoals.length > 0
                                    ? Math.round(
                                        activeGoals.reduce((sum, g) => sum + g.progress, 0) /
                                        activeGoals.length
                                    )
                                    : 0}%
                            </Text>
                            <Text style={styles.statLabel}>Avg Progress</Text>
                        </View>
                    </View>
                )}

                {/* Active Goals */}
                <View style={styles.section}>
                    <Text style={styles.sectionTitle}>
                        Active Goals ({activeGoals.length})
                    </Text>
                    {activeGoals.length === 0 ? (
                        <View style={styles.emptyState}>
                            <Ionicons name="flag-outline" size={48} color="#d1d5db" />
                            <Text style={styles.emptyText}>No active goals yet</Text>
                            <Text style={styles.emptySubtext}>
                                Tap the + button to create your first goal
                            </Text>
                        </View>
                    ) : (
                        activeGoals.map((goal) => (
                            <GoalProgressCard
                                key={goal.id}
                                goal={goal}
                                onComplete={() => handleCompleteGoal(goal.id)}
                                onDelete={() => handleDeleteGoal(goal.id)}
                            />
                        ))
                    )}
                </View>

                {/* Completed Goals */}
                {completedGoals.length > 0 && (
                    <View style={styles.section}>
                        <Text style={styles.sectionTitle}>
                            Completed Goals ({completedGoals.length})
                        </Text>
                        {completedGoals.map((goal) => (
                            <GoalProgressCard
                                key={goal.id}
                                goal={goal}
                                onDelete={() => handleDeleteGoal(goal.id)}
                            />
                        ))}
                    </View>
                )}

                <View style={styles.footer} />
            </ScrollView>

            {/* Floating Action Button */}
            <TouchableOpacity
                style={styles.fab}
                onPress={() => setShowCreateModal(true)}
            >
                <Ionicons name="add" size={28} color="#fff" />
            </TouchableOpacity>

            {/* Create Goal Modal */}
            <GoalCreationModal
                visible={showCreateModal}
                onClose={() => setShowCreateModal(false)}
                onSubmit={handleCreateGoal}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#f3f4f6",
    },
    center: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    header: {
        padding: 20,
        backgroundColor: "#fff",
        marginBottom: 10,
    },
    headerTitle: {
        fontSize: 28,
        fontWeight: "bold",
        color: "#111827",
    },
    headerSubtitle: {
        fontSize: 16,
        color: "#6b7280",
        marginTop: 4,
    },
    statsContainer: {
        flexDirection: "row",
        padding: 16,
        gap: 12,
    },
    statCard: {
        flex: 1,
        backgroundColor: "#fff",
        padding: 16,
        borderRadius: 12,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.05,
        shadowRadius: 2,
        elevation: 2,
    },
    statValue: {
        fontSize: 24,
        fontWeight: "bold",
        color: "#2563eb",
        marginBottom: 4,
    },
    statLabel: {
        fontSize: 12,
        color: "#6b7280",
        fontWeight: "500",
    },
    section: {
        padding: 20,
        paddingTop: 10,
    },
    sectionTitle: {
        fontSize: 18,
        fontWeight: "600",
        color: "#374151",
        marginBottom: 12,
    },
    emptyState: {
        alignItems: "center",
        paddingVertical: 40,
    },
    emptyText: {
        fontSize: 16,
        fontWeight: "500",
        color: "#6b7280",
        marginTop: 12,
    },
    emptySubtext: {
        fontSize: 14,
        color: "#9ca3af",
        marginTop: 4,
    },
    footer: {
        height: 100,
    },
    fab: {
        position: "absolute",
        right: 20,
        bottom: 20,
        width: 56,
        height: 56,
        borderRadius: 28,
        backgroundColor: "#2563eb",
        justifyContent: "center",
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
        elevation: 8,
    },
});