import React, { createContext, useContext, useState, useEffect } from 'react';
import { I18nManager, NativeModules } from 'react-native';

// Types for Hala Food Meal Kit Configuration
export type Language = 'en' | 'ar';

export interface RecipeItem {
  id: string;
  titleEn: string;
  titleAr: string;
  calories: number;
  proteinGrams: number;
  basePrice: number;
  dietaryTags: string[];
}

export interface CartState {
  selectedPortions: number; // e.g., 2 or 4 people
  selectedRecipes: RecipeItem[];
  language: Language;
}

interface MealKitContextType {
  cart: CartState;
  setLanguage: (lang: Language) => void;
  setPortions: (portions: number) => void;
  toggleRecipe: (recipe: RecipeItem) => void;
  getTotalPrice: () => number;
  isRTL: boolean;
}

const MealKitContext = createContext<MealKitContextType | undefined>(undefined);

export const MealKitProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [language, setLanguageState] = useState<Language>('en');
  const [portions, setPortions] = useState<number>(2);
  const [selectedRecipes, setSelectedRecipes] = useState<RecipeItem[]>([]);

  const isRTL = language === 'ar';

  // Toggle Language with Native RTL Mirroring Support
  const setLanguage = (lang: Language) => {
    setLanguageState(lang);
    const shouldBeRTL = lang === 'ar';
    if (I18nManager.isRTL !== shouldBeRTL) {
      I18nManager.allowRTL(shouldBeRTL);
      I18nManager.forceRTL(shouldBeRTL);
      // NativeModules.DevSettings.reload(); // Trigger reload if hard layout restart is needed
    }
  };

  const toggleRecipe = (recipe: RecipeItem) => {
    setSelectedRecipes((prev) =>
      prev.some((item) => item.id === recipe.id)
        ? prev.filter((item) => item.id !== recipe.id)
        : [...prev, recipe]
    );
  };

  const getTotalPrice = () => {
    const baseTotal = selectedRecipes.reduce((sum, item) => sum + item.basePrice, 0);
    return baseTotal * (portions / 2); // Portion multiplier calculation
  };

  return (
    <MealKitContext.Provider
      value={{
        cart: { selectedPortions: portions, selectedRecipes, language },
        setLanguage,
        setPortions,
        toggleRecipe,
        getTotalPrice,
        isRTL,
      }}
    >
      {children}
    </MealKitContext.Provider>
  );
};

export const useMealKit = () => {
  const context = useContext(MealKitContext);
  if (!context) {
    throw new Error('useMealKit must be used within a MealKitProvider');
  }
  return context;
};