"use client";

import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { addCartItem, getOrCreateCart, removeCartItem, type Cart } from "@/lib/store-api";

interface CartContextValue {
  cart: Cart | null;
  loading: boolean;
  itemCount: number;
  addItem: (variantId: number, quantity?: number) => Promise<void>;
  removeItem: (variantId: number) => Promise<void>;
  refresh: () => Promise<void>;
}

const CartContext = createContext<CartContextValue | null>(null);

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [cart, setCart] = useState<Cart | null>(null);
  const [loading, setLoading] = useState(true);

  const refresh = useCallback(async () => {
    const next = await getOrCreateCart();
    setCart(next);
  }, []);

  useEffect(() => {
    refresh().finally(() => setLoading(false));
  }, [refresh]);

  const addItem = useCallback(async (variantId: number, quantity = 1) => {
    const next = await addCartItem(variantId, quantity);
    setCart(next);
  }, []);

  const removeItem = useCallback(async (variantId: number) => {
    const next = await removeCartItem(variantId);
    setCart(next);
  }, []);

  const itemCount = cart?.items.reduce((sum, i) => sum + i.quantity, 0) ?? 0;

  return (
    <CartContext.Provider value={{ cart, loading, itemCount, addItem, removeItem, refresh }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  const ctx = useContext(CartContext);
  if (!ctx) throw new Error("useCart must be used within a CartProvider");
  return ctx;
}