import { createContext, useContext, useReducer } from 'react'

// State & Actions
type CartItem = { id: number; name: string; qty: number }
type CartState = { items: CartItem[] }
type CartAction =
  | { type: "ADD"; payload: CartItem }
  | { type: "REMOVE"; payload: number }
  | { type: "CLEAR" }

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "ADD":
      return { items: [...state.items, action.payload] }
    case "REMOVE":
      return { items: state.items.filter(i => i.id !== action.payload) }
    case "CLEAR":
      return { items: [] }
  }
}

// Context
const CartContext = createContext<{
  state: CartState
  dispatch: React.Dispatch<CartAction>
} | null>(null)

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] })

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const ctx = useContext(CartContext)
  if (!ctx) throw new Error("useCart doit être dans CartProvider")
  return ctx
}

// Utilisation
function Panier() {
  const { state, dispatch } = useCart()
  return (
    <div>
      <h2>Panier ({state.items.length})</h2>
      {state.items.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => dispatch({ type: "REMOVE", payload: item.id })}>
            Retirer
          </button>
        </div>
      ))}
      <button onClick={() => dispatch({ type: "CLEAR" })}>
        Vider le panier
      </button>
    </div>
  )
}