// React component with business logic
function OrderSummary({ orderId }: Props) {
  const [order, setOrder] = useState<Order | null>(null)
  const [discount, setDiscount] = useState<number>(0)

  useEffect(() => {
    fetch(`/api/orders/${orderId}`)
      .then(r => r.json())
      .then(data => {
        setOrder(data)
        // Business logic in component - hard to test
        if (data.items.length > 5) {
          setDiscount(data.total * 0.1)
        } else if (data.customer.tier === 'gold') {
          setDiscount(data.total * 0.05)
        }
      })
  }, [orderId])

  const finalTotal = order ? order.total - discount : 0

  return (
    <div>
      <span>Subtotal: ${order?.total}</span>
      <span>Discount: ${discount}</span>
      <span>Total: ${finalTotal}</span>
    </div>
  )
}

// Testing requires React Testing Library + mocked fetch

// Presenter - pure function, easy to test
interface OrderViewModel {
  subtotal: string
  discount: string
  total: string
  hasDiscount: boolean
}

function presentOrder(order: Order): OrderViewModel {
  const discount = calculateDiscount(order)
  const finalTotal = order.total - discount

  return {
    subtotal: formatCurrency(order.total),
    discount: formatCurrency(discount),
    total: formatCurrency(finalTotal),
    hasDiscount: discount > 0
  }
}

function calculateDiscount(order: Order): number {
  if (order.items.length > 5) return order.total * 0.1
  if (order.customer.tier === 'gold') return order.total * 0.05
  return 0
}

// Humble view - no logic, just renders data
function OrderSummary({ viewModel }: { viewModel: OrderViewModel }) {
  return (
    <div>
      <span>Subtotal: {viewModel.subtotal}</span>
      {viewModel.hasDiscount && <span>Discount: {viewModel.discount}</span>}
      <span>Total: {viewModel.total}</span>
    </div>
  )
}

// Container handles data fetching - also humble
function OrderSummaryContainer({ orderId }: Props) {
  const { data: order } = useQuery(['order', orderId], fetchOrder)
  if (!order) return <Loading />
  return <OrderSummary viewModel={presentOrder(order)} />
}

// Test presenter without React
test('applies bulk discount for 6+ items', () => {
  const order = { items: [1,2,3,4,5,6], total: 100, customer: { tier: 'standard' } }
  const vm = presentOrder(order)
  expect(vm.discount).toBe('$10.00')
})