import {FlatList, StyleSheet} from "react-native";
import React, {useEffect, useState} from "react";
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {AntDesign} from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import {IGrocery} from "@/hooks/firebase/types/groceryData";
import Ionicons from '@expo/vector-icons/Ionicons';
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import {REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
import {ToDosContextProvider} from "@/contexts/ToDosContext";

const shoppingTodo = {
    id: "",
    title: "Go shopping",
    points: 10,
    date: new Date(),
    rotate: false,
    repeatType: REPEAT_TYPE.NONE,
    assignees: [],
    repeatDays: []
};

const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
    const {
        groceries,
        updateGroceryItem,
        isAddingGrocery,
        setIsAddingGrocery,
        addGrocery,
    } = useGroceryContext();
    const {profileData} = useAuthContext();
    const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
        groceries?.filter((item) => item.approved)
    );
    const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
        groceries?.filter((item) => !item.approved)
    );
    const [category, setCategory] = useState<GroceryCategory>(
        GroceryCategory.None
    );

    const [title, setTitle] = useState<string>("");
    const [submit, setSubmitted] = useState<boolean>(false);

    const [pendingVisible, setPendingVisible] = useState<boolean>(true);
    const [approvedVisible, setApprovedVisible] = useState<boolean>(true);
    const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);

    // Group approved groceries by category
    let approvedGroceriesByCategory = approvedGroceries?.reduce(
        (groups: any, item: IGrocery) => {
          let category = item.category || "Uncategorized";
          if (item.bought) {
              category = "Done";
          }
          if (!groups[category]) {
            groups[category] = [];
          }
          groups[category].push(item);
          
          // Sort items within each category - bought items at bottom
          groups[category].sort((a: IGrocery, b: IGrocery) => {
            if (a.bought === b.bought) return 0;
            return a.bought ? 1 : -1;
          });
          
          return groups;
        },
        {}
      );

    useEffect(() => {
        if (submit) {
            if (title?.length > 2 && title?.length <= 25) {
                addGrocery({
                    id: "",
                    title: title,
                    category: category,
                    approved: profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.CAREGIVER,
                    recurring: false,
                    frequency: GroceryFrequency.Never,
                    bought: false,
                });

                setIsAddingGrocery(false);
                setSubmitted(false);
                setTitle("");
            }
        }
    }, [submit]);

    useEffect(() => {
        setapprovedGroceries(groceries?.filter((item) => item.approved));
        setPendingGroceries(groceries?.filter((item) => !item.approved));
    }, [groceries]);

    const handleCancelAddGrocery = () => {
        setIsAddingGrocery(false);
        setTitle("");
        setCategory(GroceryCategory.None)
    }

    return (
        <View marginH-20 marginB-45>
            <HeaderTemplate
                message={"Welcome to your grocery list"}
                isWelcome={false}
                isGroceries={true}
            >
                <View row centerV>
                    <View
                        paddingH-15
                        paddingV-8
                        centerV
                        style={{borderRadius: 50}}
                    >
                        <Text text70BL color="#46a80a" style={styles.counterText}>
                            {approvedGroceries?.length} list{" "}
                            {approvedGroceries?.length === 1 ? (
                                <Text text70BL color="#46a80a" style={styles.counterText}>
                                    item
                                </Text>
                            ) : (
                                <Text text70BL color="#46a80a" style={styles.counterText}>
                                    items
                                </Text>
                            )}
                        </Text>
                    </View>
                    <View
                        padding-8
                        paddingH-12
                        marginR-15
                        style={{borderRadius: 50}}
                    >
                        <Text text70 style={styles.counterText} color="#e28800">
                            {pendingGroceries?.length} pending
                        </Text>
                    </View>
                    <TouchableOpacity onPress={() => setChoreDialogVisible(true)}>
                        <Ionicons name="person-add-outline" size={24} color="grey" />
                    </TouchableOpacity>
                    <ToDosContextProvider>
                        {choreDialogVisible && <AddChoreDialog
                            isVisible={choreDialogVisible}
                            setIsVisible={setChoreDialogVisible}
                            selectedTodo={shoppingTodo} /> }
                    </ToDosContextProvider>
                </View>
            </HeaderTemplate>

            {/* Pending Approval Section */}
            <View row spread marginT-40 marginB-10 centerV>
                <View row centerV>
                    <TouchableOpacity row centerV onPress={() => {setPendingVisible(!pendingVisible)}}>
                    <Text style={styles.subHeader}>Pending Approval</Text>
                    {pendingVisible && (
                        <AntDesign
                        name="down"
                        size={17}
                        style={styles.dropIcon}
                        color="#9f9f9f"
                        />
                    )}
                    {!pendingVisible && (
                        <AntDesign
                            name="right"
                            size={15}
                            style={styles.dropIcon}
                            color="#9f9f9f"
                            />
                        )}
                    </TouchableOpacity>
                </View>
                <View
                    centerV
                    style={{
                        aspectRatio: 1,
                        width: 35,
                        backgroundColor: "#faead2",
                        borderRadius: 50,
                    }}
                >
                    <Text style={styles.counterNr} center color="#e28800">
                        {pendingGroceries?.length.toString()}
                    </Text>
                </View>
            </View>
            {pendingGroceries?.length > 0
                ? pendingVisible && (
                <FlatList
                    data={pendingGroceries}
                    renderItem={({item}) => (
                        <GroceryItem
                            item={item}
                            handleItemApproved={(id, changes) =>
                                updateGroceryItem({...changes, id: id})
                            }
                            onInputFocus={onInputFocus}
                        />
                    )}
                    keyExtractor={(item) => item.id.toString()}
                />
            )
                : pendingVisible && (
                <Text style={styles.noItemTxt}>No items pending approval.</Text>
            )}

            {/* Approved Section */}
            <View row spread marginT-40 marginB-0 centerV>
                <View row centerV>
                    <TouchableOpacity row centerV onPress={() => {setApprovedVisible(!approvedVisible)}}>
                    <Text style={styles.subHeader}>Shopping List</Text>
                    {approvedVisible && (
                        <AntDesign
                            name="down"
                            size={17}
                            style={styles.dropIcon}
                            color="#9f9f9f"
                        />
                    )}
                    {!approvedVisible && (
                        <AntDesign
                            name="right"
                            size={15}
                            style={styles.dropIcon}
                            color="#9f9f9f"
                        />
                    )}
                    </TouchableOpacity>
                </View>
                <View
                    centerV
                    style={{
                        aspectRatio: 1,
                        width: 35,
                        backgroundColor: "#e2eed8",
                        borderRadius: 50,
                    }}
                >
                    <Text style={styles.counterNr} center color="#46a80a">
                        {approvedGroceries?.length.toString()}
                    </Text>
                </View>
            </View>
            <View style={{marginTop: 8}}>
                <EditGroceryItem
                    editGrocery={{
                        title: title,
                        setCategory: setCategory,
                        category: category,
                        setTitle: setTitle,
                        setSubmit: setSubmitted,
                        closeEdit: handleCancelAddGrocery
                    }}
                    onInputFocus={onInputFocus}
                />
            </View>

            {/* Render Approved Groceries Grouped by Category */}
            {approvedGroceries?.length > 0
                ? approvedVisible && (
                <FlatList
                    data={Object.keys(approvedGroceriesByCategory).sort((a, b) => {
                        if (a !== "Done") return -1;
                        if (b === "Done") return 1;
                        return 0;
                    })}
                    renderItem={({item: category}) => (
                        <View key={category}>
                            {/* Render Category Header */}
                            <Text text80M style={{marginTop: 10}} color="#666">
                                {category}
                            </Text>
                            {/* Render Grocery Items for this Category */}
                            {approvedGroceriesByCategory[category].map(
                                (grocery: IGrocery) => (
                                    <GroceryItem
                                        key={grocery.id}
                                        item={grocery}
                                        handleItemApproved={(id, changes) =>
                                            updateGroceryItem({...changes, id: id})
                                        }
                                        onInputFocus={onInputFocus}
                                    />
                                )
                            )}
                        </View>
                    )}
                    keyExtractor={(category) => category}
                />
            )
                : approvedVisible && (
                <Text style={styles.noItemTxt}>No approved items.</Text>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    dropIcon: {
        marginHorizontal: 10,
    },
    noItemTxt: {
        fontFamily: "Manrope_400Regular",
        fontSize: 14,
    },
    counterText: {
        fontSize: 14,
        fontFamily: "PlusJakartaSans_600SemiBold",
    },
    subHeader: {
        fontSize: 15,
        fontFamily: "Manrope_700Bold",
    },
    counterNr: {
        fontFamily: "PlusJakartaSans_600SemiBold",
        fontSize: 14
    }
});

export default GroceryList;
