import { AppDispatch, RootState } from './store';
// src/store/crud.ts
import axiosInstance from '@/services/axiosClient';
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import toast from 'react-hot-toast';


interface Offer { 
    offer_type: string;
    offer_value: string;
    start_Date: string | Date;
    end_Date: string | Date;
}

interface CrudState {
    mainLoader: boolean;
    allVariablesItems: any;
    openOfferModal: boolean;
    openMediaModal: boolean;
    offer: Offer;
    unifiedPrice: string | number;
    isUnifiedOffers: boolean;
    isUnifiedPrice: boolean;
    mainProductId: number | null;
    selectedItem: any;
    selectedDetailed: any;
    product : any;
}

const initialState: CrudState = {
    mainLoader: false,
    allVariablesItems: [],
    openOfferModal: false,
    openMediaModal: false,
    offer: {
        offer_type: "",
        offer_value: "", 
        start_Date: "",
        end_Date: ""
    },
    unifiedPrice: 0,
    isUnifiedOffers: false,
    isUnifiedPrice: false,
    mainProductId: null,
    selectedItem: null,
    selectedDetailed: null,
    product:{}
};


interface CreateProps {
    values: any;
    next?: any;
    id?:any;
}

// Thunk for create Product Step One
export const createProductStepOne = createAsyncThunk(
    'create-product/createProductStepOne',
    async ({values , next,id}:CreateProps,{ rejectWithValue,getState }) => {
        const endpoint = id ? `products/${id}` : `/products`;
        const method = id ? axiosInstance.put : axiosInstance.post;
        const state = getState() as RootState;
        try {
            values.en = {
                description : values.desc_en,
                name:values.name_en
            }
            values.ar = {
                description : values.desc_ar,
                name:values.name_ar
            }
            if(values.main.media){
                delete values.main;
            }
            delete values.name_ar;
            delete values.name_en;
            delete values.desc_ar;
            delete values.desc_en;

            const {data} : any = await method(endpoint,{...values});
            if(data?.data){
                toast.success(data?.message)
                next()
                return data?.data
            }
        } catch (error: any) {
            toast.error(error?.response?.data?.message);
        }
    }
);

const updateFeatures = (allVariablesItems:any) => {
    return allVariablesItems.map((item:any) => {
        const updatedItem = { ...item, features: [] };
        updatedItem.features = item.features.map((featureObj:any) => {
                return {
                    feature_id: featureObj.feature_id || featureObj.id,  
                    feature_value_id:featureObj.feature_value_id || featureObj?.value?.id 
                };
            });
            return updatedItem;  
    });
};

const updateMedia = (allVariablesItems: any[], selectedItem: any) => {
    return allVariablesItems.map((item) => {
        const updatedItem = { ...item,is_active:+item.is_active, media:[] };
      updatedItem.media = item.media?.map((data: any) => data?.media || data);
      if(selectedItem){
          // Remove media if it matches selected item
          selectedItem?.details?.map((initialItem:any) =>{
            if(initialItem.id == item.id && initialItem.media == item.media){
                delete updatedItem.media;
            }
          })
      }
      return updatedItem;
    });
  };

// Thunk for create Product Step Two
export const createProductStepTwo = createAsyncThunk(
    'create-product/createProductStepTwo',
    async ({router,update}:any,{ rejectWithValue, dispatch, getState }) => {
        try {
            // Dispatch generateVariables first to update the state
            await dispatch(generateVariables({ isUpdate: true }));
            const state = getState() as RootState;
            let allVariablesItems = updateMedia(state.ProductConfig.allVariablesItems,state.ProductConfig.selectedItem);
            
            if(update){
                allVariablesItems = updateFeatures(allVariablesItems);
            }

            const values: any = {
                is_same_price: +state.ProductConfig.isUnifiedPrice,
                is_same_discount: +state.ProductConfig.isUnifiedOffers,
                ...(state.ProductConfig.isUnifiedPrice && {
                    price: state.ProductConfig.unifiedPrice,
                }),
                ...(state.ProductConfig.isUnifiedOffers && {
                    offer: {
                        discount_type: state.ProductConfig.offer.offer_type,
                        discount: state.ProductConfig.offer.offer_value,
                        start_at: state.ProductConfig.offer.start_Date,
                        end_at: state.ProductConfig.offer.end_Date,
                    },
                }),
                details: allVariablesItems,
                is_active : update? +state?.ProductConfig?.selectedItem?.is_active : true 
            };

            const {data}: any = await axiosInstance.post(`/products/details`, {...values});

            if (data) {
                console.log("🚀 ~ data:", data)
                toast.success(data?.message);
                router.push("/my-products")
                return data;
            }
        } catch (error: any) {
            console.log("🚀 ~ error:", error)
            toast.error(error?.response?.data?.message);
        }
    }
);

// Reducers
const productSlice = createSlice({
    name: 'productSlice',
    initialState,
    reducers: {
        openOfferModal: (state,action:PayloadAction<any>) => {
            state.openOfferModal = true;
            state.selectedDetailed = action.payload;
        },
        closeOfferModal: (state) => {
            state.openOfferModal = false;
            state.selectedDetailed = null;
        },
        openMediaModal: (state,action:PayloadAction<any>) => {
            state.openMediaModal = true;
            state.selectedDetailed = action.payload;
        },
        closeMediaModal: (state) => {
            state.openMediaModal = false;
            state.selectedDetailed = null;
        },
        setSelectedItem: (state,action:PayloadAction<any>) => {
            state.selectedItem = action.payload;
        },
        setSelectedDetailed: (state,action:PayloadAction<any>) => {
            state.selectedDetailed = action.payload;
        },
        setUnifiedPrice: (state, action: PayloadAction<string | number>) => {
            state.unifiedPrice = action.payload;
        },
        setOffer: (state, action: PayloadAction<Offer>) => {
            state.offer = action.payload;
        },
        toggleUnifiedOffers: (state, action: PayloadAction<boolean>) => {
            state.isUnifiedOffers = action.payload;
            if (!action.payload) {
                state.allVariablesItems = state.allVariablesItems?.map((item: any) => ({
                    ...item,
                    offer: {
                        offer_type: "",
                        offer_value: "",
                        start_Date: "",
                        end_Date: ""
                    }
                }));
            }
        },
        toggleUnifiedPrice: (state, action: PayloadAction<boolean>) => {
            state.isUnifiedPrice = action.payload;
            if(!action.payload){
                state.allVariablesItems = state.allVariablesItems?.map((item: any) => ({
                    ...item,
                    price: 0
                }));
            }
        },
        generateVariables: (state,action: PayloadAction<{ isUpdate?: boolean; combinations?: any[] }> ) => {
            const {unifiedPrice,offer,allVariablesItems,isUnifiedOffers,isUnifiedPrice} = state;
            const { isUpdate = false, combinations = [] } = action.payload;
            

            if (isUpdate) {
                state.allVariablesItems = allVariablesItems?.map((variable: any) => {
                console.log("🚀 ~ variable:", JSON.parse(JSON.stringify(variable)));

                const VariableOffer = JSON.parse(JSON.stringify(variable.offer));
                const computedOffer = {
                    discount_type: isUnifiedOffers ? offer.offer_type : VariableOffer?.offer_type || variable?.offer?.discount_type,
                    discount: isUnifiedOffers ? offer.offer_value : +VariableOffer?.offer_value || +variable?.offer?.discount,
                    start_at: isUnifiedOffers ? offer.start_Date : VariableOffer?.start_date || variable?.offer?.start_at,
                    end_at: isUnifiedOffers ? offer.end_Date : VariableOffer?.end_date || variable?.offer?.end_at,
                };
                const isOfferValid =  computedOffer.discount_type != undefined;

                    return {
                        ...variable,
                        product_id: state?.product?.id,
                        price: isUnifiedPrice ? unifiedPrice : variable?.price,
                        quantity: variable?.quantity,
                        is_default: +variable?.is_default,
                        offer: isOfferValid ? computedOffer : {},
                    };
                });
            } else {
                state.allVariablesItems = [];
                state.allVariablesItems = combinations.map((combination, index) => {
                    const name = Object.keys(combination).filter(key => key.endsWith('_value_label')).sort((a, b) => a.localeCompare(b)).map(labelKey => combination[labelKey]).join(" - ");
                    const features = Object.keys(combination).map((key: string) => {
                        if (key.endsWith('_id')) {
                            const feature_id = combination[key];
                            const feature_value_id = combination[`${key.replace('_id', '_value_id')}`]; 
                            if (feature_id && feature_value_id !== undefined) {
                                return {
                                    feature_id,
                                    feature_value_id
                                };
                            }
                        }
                        return null;
                    }).filter((item: any) => item !== null);
                    
                    console.log("🚀 ~ features ~ features:", features)

                    return {
                        default_key: index,
                        name,
                        media: [],
                        features,
                        price: unifiedPrice,
                        quantity: 0,
                        is_default: index == 0 ? 1 : 0,
                        offer: {
                            discount_type: offer.offer_type,
                            discount: offer.offer_value,
                            start_at: offer.start_Date,
                            end_at: offer.end_Date,
                        },
                        is_active: true,
                        is_returnable:true
                    };
                });
                state.mainProductId = 0;
            }
        },
        updateVariableField: (state, action: PayloadAction<{ id: number; field: string; value: any }>) => {
            const { id, field, value } = action.payload;
            state.allVariablesItems = state.allVariablesItems?.map((item: any) => (item.id === id || item.default_key === id  ) ? { ...item, [field]: value } : item);
        },
        setMainProduct: (state, action: PayloadAction<number>) => {
            state.mainProductId = action.payload;
            state.allVariablesItems = state.allVariablesItems?.map((item:any) => ({
            ...item,
            is_default: item.default_key === action.payload,
            }));
        },
        setVariables: (state, action: PayloadAction<any[]>) => {
            state.allVariablesItems = action.payload;
        },
        },
        extraReducers: (builder) => {
            builder
                .addCase(createProductStepOne.pending, (state) => {
                    state.mainLoader = true;
                })
                .addCase(createProductStepOne.fulfilled,(state,action) => {
                    state.mainLoader = false;
                    state.product = action.payload
                })
                .addCase(createProductStepOne.rejected, (state) => {
                    state.mainLoader = false;
                })
                .addCase(createProductStepTwo.pending, (state) => {
                    state.mainLoader = true;
                })
                .addCase(createProductStepTwo.fulfilled,(state,action) => {
                    state.mainLoader = false;
                    if (action.payload?.status === "success") {
                        state.product = null;
                        state.selectedItem = null;
                        state.allVariablesItems = null;
                        state.isUnifiedOffers = false;
                        state.mainProductId = null;
                        state.offer = {
                            offer_type: "",
                            offer_value: "", 
                            start_Date: "",
                            end_Date: ""
                        };
                        state.isUnifiedPrice = false;
                    }
                })
                .addCase(createProductStepTwo.rejected, (state) => {
                    state.mainLoader = false;
                })
        },
});

export const { 
    openOfferModal,
    closeOfferModal,
    openMediaModal,
    closeMediaModal,
    setUnifiedPrice,
    setOffer,
    toggleUnifiedOffers,
    toggleUnifiedPrice,
    generateVariables,
    updateVariableField ,
    setMainProduct,
    setVariables,
    setSelectedItem,
    setSelectedDetailed
} = productSlice.actions;

export default productSlice.reducer;