// ProductCard.tsx - Single component, infinite variations
interface ProductCardProps {
  product: Product
  variant?: 'default' | 'featured' | 'compact' | 'detailed'
  showQuickView?: boolean
  showCompare?: boolean
  imageAspectRatio?: 'square' | 'portrait' | 'landscape'
  priceDisplay?: 'range' | 'from' | 'exact'
}

export function ProductCard({
  product,
  variant = 'default',
  showQuickView = false,
  showCompare = false,
  imageAspectRatio = 'square',
  priceDisplay = 'range'
}: ProductCardProps) {
  let cardClasses = {
    default: 'p-4 border rounded-lg',
    featured: 'p-6 border-2 border-blue-500 rounded-xl shadow-lg',
    compact: 'p-2 border rounded',
    detailed: 'p-6 bg-white shadow-md rounded-lg'
  }[variant]

  return (
    <div className={cardClasses}>
      <ProductImage
        image={product.featuredImage}
        aspectRatio={imageAspectRatio}
        showHoverEffect={variant === 'featured'}
      />

      <ProductInfo
        product={product}
        priceDisplay={priceDisplay}
        showVendor={variant === 'detailed'}
      />

      {(showQuickView || showCompare) && (
        <ProductActions
          productId={product.id}
          showQuickView={showQuickView}
          showCompare={showCompare}
        />
      )}
    </div>
  )
}

// Usage Examples - Same component, different contexts
<ProductCard product={product} variant="featured" showQuickView />
<ProductCard product={product} variant="compact" />
<ProductCard product={product} variant="detailed" showCompare />
<ProductCard product={product} imageAspectRatio="portrait" priceDisplay="from" />

// Collection pages built from composed components
export function CollectionPage({ collection }: { collection: Collection }) {
  return (
    <div className="collection-page">
      <CollectionHero
        collection={collection}
        showDescription={true}
        imagePosition="background"
      />

      <ProductFilters
        collection={collection}
        enablePriceFilter={true}
        enableBrandFilter={true}
        enableAvailabilityFilter={true}
      />

      <ProductGrid
        products={collection.products}
        columns={4}
        loadMore={true}
        sortOptions={['price', 'title', 'created_at']}
      />

      <CollectionFooter
        collection={collection}
        showRelatedCollections={true}
        showNewsletterSignup={true}
      />
    </div>
  )
}

// Each component is independently testable and reusable
// CollectionHero can be used for category pages, brand pages, etc.
// ProductGrid works for search results, recommendations, etc.
// ProductFilters adapt to any product listing context

// ProductGrid.tsx with visual editing capabilities
import { createSchema } from '@weaverse/hydrogen'

export let ProductGrid = forwardRef<HTMLDivElement, ProductGridProps>(
  ({ products, columns = 4, showFilters = true, sortBy = 'title' }, ref) => {
    // Component implementation
    return (
      <div ref={ref} className="product-grid">
        {showFilters && <FilterBar />}
        <div
          className="grid gap-6"
          style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
        >
          {products.map(product => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    )
  }
)

// Weaverse schema makes component visually editable
export let schema = createSchema({
  type: 'product-grid',
  title: 'Product Grid',
  settings: [
    {
      group: 'Layout',
      inputs: [
        {
          type: 'range',
          name: 'columns',
          label: 'Grid Columns',
          min: 1,
          max: 6,
          defaultValue: 4,
        },
        {
          type: 'toggle',
          name: 'showFilters',
          label: 'Show Filter Bar',
          defaultValue: true,
        },
        {
          type: 'select',
          name: 'sortBy',
          label: 'Default Sort Order',
          options: [
            { value: 'title', label: 'Alphabetical' },
            { value: 'price', label: 'Price: Low to High' },
            { value: 'created_at', label: 'Newest First' },
          ],
          defaultValue: 'title',
        },
      ],
    },
  ],
})

// Result: Component works in code AND visual editor
// Developers build once, clients customize infinitely

// ShoppingCart.tsx - Stateful component with visual controls
import { useState, useEffect } from 'react'
import { useCart } from '@shopify/hydrogen'

interface ShoppingCartProps {
  slideDirection?: 'left' | 'right'
  showMiniCart?: boolean
  enableQuickAdd?: boolean
  maxItems?: number
}

export function ShoppingCart({
  slideDirection = 'right',
  showMiniCart = true,
  enableQuickAdd = false,
  maxItems = 50
}: ShoppingCartProps) {
  let { lines, linesAdd, linesRemove, cost } = useCart()
  let [isOpen, setIsOpen] = useState(false)
  let [isLoading, setIsLoading] = useState(false)

  // Smart cart logic
  let canAddMore = lines.length < maxItems
  let cartSlideClass = slideDirection === 'left' ? 'slide-left' : 'slide-right'

  return (
    <>
      {showMiniCart && (
        <CartTrigger
          itemCount={lines.length}
          total={cost.totalAmount}
          onClick={() => setIsOpen(true)}
        />
      )}

      <CartDrawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        className={cartSlideClass}
      >
        <CartItems
          lines={lines}
          onRemove={linesRemove}
          isLoading={isLoading}
        />

        {enableQuickAdd && canAddMore && (
          <QuickAddSection onAdd={linesAdd} />
        )}

        <CartSummary
          cost={cost}
          onCheckout={() => {/* Checkout logic */}}
        />
      </CartDrawer>
    </>
  )
}

// Weaverse schema for visual cart customization
export let schema = createSchema({
  type: 'shopping-cart',
  title: 'Shopping Cart',
  settings: [
    {
      group: 'Behavior',
      inputs: [
        {
          type: 'select',
          name: 'slideDirection',
          label: 'Cart Slide Direction',
          options: [
            { value: 'left', label: 'Slide from Left' },
            { value: 'right', label: 'Slide from Right' },
          ],
          defaultValue: 'right',
        },
        {
          type: 'toggle',
          name: 'enableQuickAdd',
          label: 'Enable Quick Add Products',
          defaultValue: false,
        },
        {
          type: 'range',
          name: 'maxItems',
          label: 'Maximum Cart Items',
          min: 10,
          max: 100,
          defaultValue: 50,
        },
      ],
    },
  ],
})

// ProductGrid.tsx - Optimized for React 19
import { Suspense, memo } from 'react'
import { useOptimistic, useTransition } from 'react'

interface ProductGridProps {
  products: Product[]
  onLoadMore?: () => Promise<Product[]>
}

// React 19 optimizations: No useMemo needed, compiler handles it
export let ProductGrid = memo(function ProductGrid({
  products,
  onLoadMore
}: ProductGridProps) {
  let [isPending, startTransition] = useTransition()
  let [optimisticProducts, addOptimisticProducts] = useOptimistic(
    products,
    (state, newProducts: Product[]) => [...state, ...newProducts]
  )

  let handleLoadMore = () => {
    if (!onLoadMore) return

    startTransition(async () => {
      let newProducts = await onLoadMore()
      addOptimisticProducts(newProducts)
    })
  }

  return (
    <div className="product-grid">
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {optimisticProducts.map(product => (
          <Suspense
            key={product.id}
            fallback={<ProductCardSkeleton />}
          >
            <ProductCard product={product} />
          </Suspense>
        ))}
      </div>

      {onLoadMore && (
        <LoadMoreButton
          onClick={handleLoadMore}
          isPending={isPending}
        />
      )}
    </div>
  )
})

// React Compiler automatically optimizes:
// - Memoization of expensive calculations
// - Effect dependencies
// - Callback stability
// No manual optimization needed!

// ProductCard.test.tsx - Complete testing approach
import { render, screen, fireEvent } from '@testing-library/react'
import { ProductCard } from './ProductCard'

describe('ProductCard Component', () => {
  let mockProduct = {
    id: '123',
    title: 'Test Product',
    featuredImage: { url: 'test.jpg', altText: 'Test' },
    priceRange: { minVariantPrice: { amount: '29.99' } }
  }

  test('renders product information correctly', () => {
    render(<ProductCard product={mockProduct} />)

    expect(screen.getByText('Test Product')).toBeInTheDocument()
    expect(screen.getByText('$29.99')).toBeInTheDocument()
    expect(screen.getByAltText('Test')).toBeInTheDocument()
  })

  test('shows quick view when enabled', () => {
    render(<ProductCard product={mockProduct} showQuickView={true} />)

    expect(screen.getByText('Quick View')).toBeInTheDocument()
  })

  test('handles different variants correctly', () => {
    render(<ProductCard product={mockProduct} variant="featured" />)

    let card = screen.getByTestId('product-card')
    expect(card).toHaveClass('border-2', 'border-blue-500')
  })

  test('supports accessibility requirements', () => {
    render(<ProductCard product={mockProduct} />)

    let link = screen.getByRole('link')
    expect(link).toHaveAttribute('aria-label', 'View Test Product')
  })
})

// Visual regression testing with Playwright
test('ProductCard visual consistency', async ({ page }) => {
  await page.goto('/components/product-card')
  await expect(page.locator('[data-testid="product-card"]')).toHaveScreenshot()
})