// Проблема: много useState, логика разбросана по обработчикам
function ShoppingCart() {
  const [items, setItems] = useState([])
  const [total, setTotal] = useState(0)
  const [discount, setDiscount] = useState(0)
  const [loading, setLoading] = useState(false)

  const addItem = (item) => {
    const newItems = [...items, item]
    setItems(newItems)
    // Нужно вручную синхронизировать total!
    setTotal(newItems.reduce((sum, i) => sum + i.price, 0))
  }
  // ... ещё 10 обработчиков с похожей проблемой
}

reducer(state, action) => newState

// Редьюсер описывает ВСЮ логику изменения состояния в одном месте
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      const newItems = [...state.items, action.payload]
      return {
        ...state,
        items: newItems,
        total: newItems.reduce((sum, i) => sum + i.price, 0)
      }

    case 'REMOVE_ITEM':
      const filtered = state.items.filter(i => i.id !== action.payload)
      return {
        ...state,
        items: filtered,
        total: filtered.reduce((sum, i) => sum + i.price, 0)
      }

    case 'CLEAR':
      return { items: [], total: 0, discount: 0 }

    default:
      return state  // всегда возвращаем state по умолчанию!
  }
}

function ShoppingCart() {
  const initialState = { items: [], total: 0, discount: 0 }

  const [state, dispatch] = useReducer(cartReducer, initialState)

  // Диспетчеризация действий — чисто и явно
  const addItem = (item) => dispatch({ type: 'ADD_ITEM', payload: item })
  const removeItem = (id) => dispatch({ type: 'REMOVE_ITEM', payload: id })
  const clearCart = () => dispatch({ type: 'CLEAR' })

  return (
    <div>
      {state.items.map(item => (
        <CartItem key={item.id} item={item} onRemove={removeItem} />
      ))}
      <p>Итого: {state.total} ₽</p>
      <button onClick={clearCart}>Очистить</button>
    </div>
  )
}

const StoreContext = createContext(null)

function StoreProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState)

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

// В любом компоненте
function CartBadge() {
  const { state } = useContext(StoreContext)
  return <span>{state.cart.items.length}</span>
}

function AddToCartButton({ product }) {
  const { dispatch } = useContext(StoreContext)
  return (
    <button onClick={() => dispatch({ type: 'ADD_ITEM', payload: product })}>
      В корзину
    </button>
  )
}

// Discriminated union — TypeScript автоматически сужает тип
type Action =
  | { type: 'ADD_ITEM'; payload: CartItem }
  | { type: 'REMOVE_ITEM'; payload: number }
  | { type: 'CLEAR' }

interface CartState {
  items: CartItem[]
  total: number
}

function cartReducer(state: CartState, action: Action): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      // TypeScript знает: action.payload — это CartItem
      return { ...state, items: [...state.items, action.payload] }
    case 'REMOVE_ITEM':
      // TypeScript знает: action.payload — это number (id)
      return { ...state, items: state.items.filter(i => i.id !== action.payload) }
    case 'CLEAR':
      return { items: [], total: 0 }
  }
}