import React from "react";
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    TouchableOpacity,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RootStackParamList } from "../../../navigation/AppNavigator"; // adjust path
import colors from "../../../components/colors";
import Ionicons from "@react-native-vector-icons/ionicons";

type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;

type Group = {
    id: string;
    name: string;
    members: number;
    collected: number;
    goal: number;
};

const groups: Group[] = [
    { id: "1", name: "Wedding Fund", members: 25, collected: 12000, goal: 20000 },
    { id: "2", name: "Birthday Gift", members: 10, collected: 4500, goal: 6000 },
    { id: "3", name: "Community Event", members: 50, collected: 22000, goal: 30000 },
];

const UserHome = () => {
    const navigation = useNavigation<NavigationProp>();

    const totalGroups = groups.length;
    const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);

    const renderItem = ({ item }: { item: Group }) => {
        const progress = Math.min(item.collected / item.goal, 1) * 100;

        return (
            <TouchableOpacity
                style={styles.card}
                onPress={() => navigation.navigate("GroupDetails", { groupId: item.id })}
            >
                <Text style={styles.groupName}>{item.name}</Text>
                <View style={styles.statsRow}>
                    <Ionicons
                        name="person-circle-outline"
                        size={20}
                        color={colors.primary}
                    />
                    <Text style={styles.detail}> {item.members} members</Text>
                </View>

                {/* Progress Bar */}
                <View style={styles.progressBar}>
                    <View style={[styles.progressFill, { width: `${progress}%` }]} />
                </View>

                <Text style={styles.amount}>
                    ₹{item.collected} / ₹{item.goal}
                </Text>
            </TouchableOpacity>
        );
    };

    return (
        <View>
            {/* Stats */}
            <View style={[styles.statsRow, { marginVertical: 24, }]}>
                <View style={styles.statBox}>
                    <Text style={styles.statValue}>{totalGroups}</Text>
                    <Text style={styles.statLabel}>Groups Joined</Text>
                </View>
                <View style={styles.statBox}>
                    <Text style={styles.statValue}>₹{totalCollected}</Text>
                    <Text style={styles.statLabel}>Total Contributed</Text>
                </View>
            </View>

            {/* Groups List */}
            <Text style={styles.sectionTitle}>Your Groups</Text>
            <FlatList
                data={groups}
                keyExtractor={(item) => item.id}
                renderItem={renderItem}
                contentContainerStyle={{ paddingBottom: 20 }}
            />
        </View>
    );
};

export default UserHome;

const styles = StyleSheet.create({


    statsRow: {
        flexDirection: "row",
        gap: 10
    },
    statBox: {
        flex: 1,
        backgroundColor: "#fff",
        // marginHorizontal: 6,
        padding: 16,
        borderRadius: 12,
        alignItems: "center",
        shadowColor: "#000",
        shadowOpacity: 0.05,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 6,
        elevation: 2,
    },
    statValue: {
        fontSize: 18,
        fontWeight: "700",
        color: colors.Home,
    },
    statLabel: {
        fontSize: 12,
        color: "#64748b",
        marginTop: 4,
    },
    sectionTitle: {
        fontSize: 18,
        fontWeight: "600",
        color: colors.Home,
        marginBottom: 12,
    },
    card: {
        backgroundColor: "#ffffff",
        padding: 16,
        marginBottom: 12,
        borderRadius: 12,
        shadowColor: "#000",
        shadowOpacity: 0.05,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 6,
        elevation: 2,
    },
    groupName: {
        fontSize: 16,
        fontWeight: "600",
        color: colors.Home,
        marginBottom: 6,
    },
    detail: {
        fontSize: 13,
        color: "#475569",
        marginBottom: 8,
    },
    progressBar: {
        height: 6,
        borderRadius: 3,
        backgroundColor: "#e2e8f0",
        marginBottom: 6,
        overflow: "hidden",
    },
    progressFill: {
        backgroundColor: colors.primary,
        height: "100%",
    },
    amount: {
        fontSize: 13,
        color: "#64748b",
    },
});