import React, { createContext, useContext, useEffect, useMemo, useState, useCallback } from 'react';
import { CartItem, fetchCart } from './cartApi';
import { useCustomerAuth } from '../customer/CustomerAuthContext';

interface CartContextValue {
  items: CartItem[];
  itemIds: Set<number>;
  refresh: () => void;
}

const CartContext = createContext<CartContextValue>({ items: [], itemIds: new Set(), refresh: () => {} });

export function useCart() {
  return useContext(CartContext);
}

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([]);
  const { customer } = useCustomerAuth();

  const refresh = useCallback(() => {
    fetchCart()
      .then(data => setItems(data.items))
      .catch(() => setItems([]));
  }, []);

  useEffect(() => {
    if (customer) {
      refresh();
    } else {
      setItems([]);
    }
  }, [customer, refresh]);

  const itemIds = useMemo(() => new Set(items.map(i => i.item_id)), [items]);

  // Memoized because this provider wraps the whole storefront: a new object
  // here re-renders every consumer on any parent render, cart unchanged.
  const value = useMemo(() => ({ items, itemIds, refresh }), [items, itemIds, refresh]);

  return (
    <CartContext.Provider value={value}>
      {children}
    </CartContext.Provider>
  );
}