Comprehensive comparison for technology in applications

import { component$, useSignal, useTask$, $ } from '@builder.io/qwik';
import { routeLoader$, server$, type RequestHandler } from '@builder.io/qwik-city';
import { z } from 'zod';

// Validation schema for product data
const ProductSchema = z.object({
  id: z.string(),
  name: z.string().min(1),
  price: z.number().positive(),
  stock: z.number().int().nonnegative(),
  category: z.string()
});

type Product = z.infer<typeof ProductSchema>;

// Server-side data loader for initial products
export const useProducts = routeLoader$(async ({ params, query }) => {
  const category = query.get('category') || 'all';
  
  try {
    const response = await fetch(`https://api.example.com/products?category=${category}`);
    
    if (!response.ok) {
      throw new Error('Failed to fetch products');
    }
    
    const data = await response.json();
    return { products: data.products || [], category };
  } catch (error) {
    console.error('Error loading products:', error);
    return { products: [], category, error: 'Failed to load products' };
  }
});

// Server function for adding products to cart
export const addToCart = server$(async function(productId: string, quantity: number) {
  // Access request context for session/cookies
  const session = this.cookie.get('session')?.value;
  
  if (!session) {
    throw new Error('User not authenticated');
  }
  
  if (quantity <= 0) {
    throw new Error('Quantity must be positive');
  }
  
  try {
    const response = await fetch('https://api.example.com/cart', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${session}`
      },
      body: JSON.stringify({ productId, quantity })
    });
    
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || 'Failed to add to cart');
    }
    
    return await response.json();
  } catch (error) {
    console.error('Cart error:', error);
    throw error;
  }
});

// Main component demonstrating Qwik patterns
export default component$(() => {
  const productsData = useProducts();
  const selectedProduct = useSignal<Product | null>(null);
  const quantity = useSignal(1);
  const cartStatus = useSignal<string>('');
  const isLoading = useSignal(false);
  
  // Task that runs on product selection change
  useTask$(({ track }) => {
    track(() => selectedProduct.value);
    
    if (selectedProduct.value) {
      quantity.value = 1;
      cartStatus.value = '';
    }
  });
  
  // Handler for adding to cart with optimistic UI updates
  const handleAddToCart = $(async () => {
    if (!selectedProduct.value) return;
    
    isLoading.value = true;
    cartStatus.value = '';
    
    try {
      await addToCart(selectedProduct.value.id, quantity.value);
      cartStatus.value = 'Product added to cart successfully!';
      quantity.value = 1;
    } catch (error) {
      cartStatus.value = `Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
    } finally {
      isLoading.value = false;
    }
  });
  
  return (
    <div class="product-catalog">
      <h1>Product Catalog - {productsData.value.category}</h1>
      
      {productsData.value.error && (
        <div class="error-banner">
          {productsData.value.error}
        </div>
      )}
      
      <div class="product-grid">
        {productsData.value.products.map((product: Product) => (
          <div key={product.id} class="product-card">
            <h3>{product.name}</h3>
            <p class="price">${product.price.toFixed(2)}</p>
            <p class="stock">Stock: {product.stock}</p>
            <button
              onClick$={() => selectedProduct.value = product}
              disabled={product.stock === 0}
            >
              {product.stock > 0 ? 'Select' : 'Out of Stock'}
            </button>
          </div>
        ))}
      </div>
      
      {selectedProduct.value && (
        <div class="cart-section">
          <h2>Add {selectedProduct.value.name} to Cart</h2>
          <input
            type="number"
            min="1"
            max={selectedProduct.value.stock}
            value={quantity.value}
            onInput$={(e) => quantity.value = parseInt((e.target as HTMLInputElement).value) || 1}
          />
          <button
            onClick$={handleAddToCart}
            disabled={isLoading.value}
          >
            {isLoading.value ? 'Adding...' : 'Add to Cart'}
          </button>
          {cartStatus.value && <p class="status">{cartStatus.value}</p>}
        </div>
      )}
    </div>
  );
});