{#
  Product Card
  ============
  A versatile product card component for e-commerce listings.
  Supports multiple sizes, badges, ratings, and quick actions.

  Parameters:
    - product_var: Alpine.js variable name for the product object (default: 'product')
    - size: 'sm' | 'md' | 'lg' (default: 'md')
    - show_rating: Show star rating (default: true)
    - show_quick_add: Show quick add to cart button (default: true)
    - show_wishlist: Show wishlist heart icon (default: true)
    - show_store: Show store name for marketplace (default: false)
    - add_to_cart_action: Alpine.js action for add to cart (default: 'addToCart(product)')
    - wishlist_action: Alpine.js action for wishlist toggle (default: 'toggleWishlist(product)')
    - product_url_field: Field name for product URL (default: 'url')
    - image_field: Field name for image URL (default: 'image_url')
    - title_field: Field name for product title (default: 'name')
    - price_field: Field name for price (default: 'price')
    - sale_price_field: Field name for sale price (default: 'sale_price')
    - rating_field: Field name for rating (default: 'rating')
    - review_count_field: Field name for review count (default: 'review_count')
    - stock_field: Field name for stock quantity (default: 'stock')
    - store_field: Field name for store name (default: 'store_name')

  Expected product object structure:
    {
      id: number,
      name: string,
      url: string,
      image_url: string,
      price: number,
      sale_price: number | null,
      rating: number (0-5),
      review_count: number,
      stock: number,
      is_new: boolean,
      store_name: string (optional)
    }

  Usage:
    {% from 'shared/macros/storefront/product-card.html' import product_card %}

    <template x-for="product in products" :key="product.id">
        {{ product_card() }}
    </template>

    {# With custom settings #}
    {{ product_card(product_var='featuredProduct', size='lg', show_store=true) }}
#}

{% macro product_card(
    product_var='product',
    size='md',
    show_rating=true,
    show_quick_add=true,
    show_wishlist=true,
    show_store=false,
    add_to_cart_action='addToCart(product)',
    wishlist_action='toggleWishlist(product)',
    product_url_field='url',
    image_field='image_url',
    title_field='name',
    price_field='price',
    sale_price_field='sale_price',
    rating_field='rating',
    review_count_field='review_count',
    stock_field='stock',
    store_field='store_name'
) %}
{% set sizes = {
    'sm': {
        'card': 'max-w-[200px]',
        'image': 'h-32',
        'title': 'text-sm',
        'price': 'text-sm',
        'badge': 'text-xs px-1.5 py-0.5',
        'btn': 'text-xs px-2 py-1',
        'icon': 'w-4 h-4',
        'rating': 'w-3 h-3'
    },
    'md': {
        'card': 'max-w-[280px]',
        'image': 'h-48',
        'title': 'text-base',
        'price': 'text-base',
        'badge': 'text-xs px-2 py-1',
        'btn': 'text-sm px-3 py-2',
        'icon': 'w-5 h-5',
        'rating': 'w-4 h-4'
    },
    'lg': {
        'card': 'max-w-[360px]',
        'image': 'h-64',
        'title': 'text-lg',
        'price': 'text-lg',
        'badge': 'text-sm px-2.5 py-1',
        'btn': 'text-base px-4 py-2.5',
        'icon': 'w-6 h-6',
        'rating': 'w-5 h-5'
    }
} %}
{% set s = sizes[size] %}

<div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden {{ s.card }}">
    {# Image Container #}
    <div class="relative {{ s.image }} overflow-hidden bg-gray-100 dark:bg-gray-700">
        <a :href="{{ product_var }}.{{ product_url_field }}">
            <img
                :src="{{ product_var }}.{{ image_field }}"
                :alt="{{ product_var }}.{{ title_field }}"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                loading="lazy"
            >
        </a>

        {# Badges #}
        <div class="absolute top-2 left-2 flex flex-col gap-1">
            {# Sale Badge #}
            <span
                x-show="{{ product_var }}.{{ sale_price_field }}"
                class="{{ s.badge }} font-semibold text-white bg-red-500 rounded"
            >
                <span x-text="'-' + Math.round((1 - {{ product_var }}.{{ sale_price_field }} / {{ product_var }}.{{ price_field }}) * 100) + '%'"></span>
            </span>
            {# New Badge #}
            <span
                x-show="{{ product_var }}.is_new"
                class="{{ s.badge }} font-semibold text-white bg-green-500 rounded"
            >
                New
            </span>
        </div>

        {# Wishlist Button #}
        {% if show_wishlist %}
        <button
            type="button"
            @click.prevent="{{ wishlist_action.replace('product', product_var) }}"
            class="absolute top-2 right-2 p-1.5 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100"
            :class="{{ product_var }}.in_wishlist ? 'text-red-500' : 'text-gray-400 hover:text-red-500'"
            :aria-label="{{ product_var }}.in_wishlist ? 'Remove from wishlist' : 'Add to wishlist'"
        >
            <span x-html="$icon('heart', '{{ s.icon }}')" :class="{{ product_var }}.in_wishlist && 'fill-current'"></span>
        </button>
        {% endif %}

        {# Out of Stock Overlay #}
        <div
            x-show="{{ product_var }}.{{ stock_field }} === 0"
            class="absolute inset-0 bg-black/50 flex items-center justify-center"
        >
            <span class="text-white font-semibold {{ s.badge }} bg-gray-900 rounded">Out of Stock</span>
        </div>
    </div>

    {# Content #}
    <div class="p-3">
        {# Store Name #}
        {% if show_store %}
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1" x-text="{{ product_var }}.{{ store_field }}"></p>
        {% endif %}

        {# Title #}
        <h3 class="{{ s.title }} font-medium text-gray-900 dark:text-gray-100 mb-1 line-clamp-2">
            <a :href="{{ product_var }}.{{ product_url_field }}" class="hover:text-purple-600 dark:hover:text-purple-400" x-text="{{ product_var }}.{{ title_field }}"></a>
        </h3>

        {# Rating #}
        {% if show_rating %}
        <div class="flex items-center gap-1 mb-2" x-show="{{ product_var }}.{{ rating_field }}">
            <div class="flex">
                <template x-for="i in 5" :key="i">
                    <span
                        x-html="$icon('star', '{{ s.rating }}')"
                        :class="i <= Math.round({{ product_var }}.{{ rating_field }}) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"
                    ></span>
                </template>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + {{ product_var }}.{{ review_count_field }} + ')'"></span>
        </div>
        {% endif %}

        {# Price #}
        <div class="flex items-center gap-2 mb-3">
            <span
                class="{{ s.price }} font-bold"
                :class="{{ product_var }}.{{ sale_price_field }} ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'"
                x-text="'€' + ({{ product_var }}.{{ sale_price_field }} || {{ product_var }}.{{ price_field }}).toFixed(2)"
            ></span>
            <span
                x-show="{{ product_var }}.{{ sale_price_field }}"
                class="text-sm text-gray-400 line-through"
                x-text="'€' + {{ product_var }}.{{ price_field }}.toFixed(2)"
            ></span>
        </div>

        {# Quick Add Button #}
        {% if show_quick_add %}
        <button
            type="button"
            @click="{{ add_to_cart_action.replace('product', product_var) }}"
            :disabled="{{ product_var }}.{{ stock_field }} === 0"
            class="w-full {{ s.btn }} font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
        >
            <span x-html="$icon('shopping-cart', '{{ s.icon }}')"></span>
            <span x-text="{{ product_var }}.{{ stock_field }} === 0 ? 'Out of Stock' : 'Add to Cart'"></span>
        </button>
        {% endif %}
    </div>
</div>
{% endmacro %}


{#
  Product Badge
  =============
  Standalone badge component for product overlays.

  Parameters:
    - type: 'sale' | 'new' | 'bestseller' | 'low_stock' | 'out_of_stock'
    - value: Optional value (e.g., '-20%' for sale, 'Only 3 left' for low_stock)
    - size: 'sm' | 'md' | 'lg' (default: 'md')

  Usage:
    {{ product_badge(type='sale', value='-20%') }}
    {{ product_badge(type='new') }}
    {{ product_badge(type='low_stock', value='Only 3 left') }}
#}
{% macro product_badge(type, value=none, size='md') %}
{% set badge_styles = {
    'sale': 'bg-red-500 text-white',
    'new': 'bg-green-500 text-white',
    'bestseller': 'bg-yellow-500 text-gray-900',
    'low_stock': 'bg-orange-500 text-white',
    'out_of_stock': 'bg-gray-700 text-white'
} %}
{% set badge_labels = {
    'sale': 'Sale',
    'new': 'New',
    'bestseller': 'Bestseller',
    'low_stock': 'Low Stock',
    'out_of_stock': 'Out of Stock'
} %}
{% set sizes = {
    'sm': 'text-xs px-1.5 py-0.5',
    'md': 'text-xs px-2 py-1',
    'lg': 'text-sm px-2.5 py-1'
} %}
<span class="{{ sizes[size] }} font-semibold {{ badge_styles[type] }} rounded">
    {{ value if value else badge_labels[type] }}
</span>
{% endmacro %}