{#
  Product Info Components
  =======================
  Product details section for product detail pages.

  Usage:
    {% from 'shared/macros/storefront/product-info.html' import product_info, product_price, product_rating, stock_status %}
#}


{#
  Product Info Block
  ==================
  Complete product information section.

  Parameters:
    - product_var: Alpine.js expression for product (default: 'product')
    - show_sku: Show SKU (default: false)
    - show_stock: Show stock status (default: true)
    - show_rating: Show star rating (default: true)
    - show_store: Show store name - for marketplace (default: false)
    - show_category: Show category breadcrumb (default: false)
    - title_tag: HTML tag for title (default: 'h1')

  Expected product object:
    {
      name: 'Product Name',
      sku: 'SKU-123',
      price: 99.99,
      sale_price: 79.99,
      rating: 4.5,
      review_count: 127,
      stock: 15,
      short_description: '...',
      store: { name: 'Store Name', url: '/store/...' },
      category: { name: 'Category', url: '/category/...' }
    }

  Usage:
    {{ product_info(product_var='product', show_store=true) }}
#}
{% macro product_info(
    product_var='product',
    show_sku=false,
    show_stock=true,
    show_rating=true,
    show_store=false,
    show_category=false,
    title_tag='h1'
) %}
<div class="space-y-4">
    {# Category / Store (if marketplace) #}
    {% if show_category or show_store %}
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        {% if show_category %}
        <template x-if="{{ product_var }}.category">
            <a
                :href="{{ product_var }}.category.url || '/category/' + {{ product_var }}.category.slug"
                class="hover:text-purple-600 dark:hover:text-purple-400"
                x-text="{{ product_var }}.category.name"
            ></a>
        </template>
        {% endif %}
        {% if show_category and show_store %}
        <span x-show="{{ product_var }}.category && {{ product_var }}.store">&bull;</span>
        {% endif %}
        {% if show_store %}
        <template x-if="{{ product_var }}.store">
            <a
                :href="{{ product_var }}.store.url || '/store/' + {{ product_var }}.store.slug"
                class="hover:text-purple-600 dark:hover:text-purple-400"
            >
                Sold by <span x-text="{{ product_var }}.store.name" class="font-medium"></span>
            </a>
        </template>
        {% endif %}
    </div>
    {% endif %}

    {# Product Title #}
    <{{ title_tag }}
        class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white"
        x-text="{{ product_var }}.name"
    ></{{ title_tag }}>

    {# Rating and Review Count #}
    {% if show_rating %}
    <div x-show="{{ product_var }}.rating" class="flex items-center gap-3">
        {{ product_rating(product_var=product_var, size='md', clickable=true) }}
    </div>
    {% endif %}

    {# Price #}
    {{ product_price(product_var=product_var, size='lg') }}

    {# Short Description #}
    <div
        x-show="{{ product_var }}.short_description"
        class="text-gray-600 dark:text-gray-400 leading-relaxed"
        x-html="{{ product_var }}.short_description" <!-- noqa: SEC015 sanitized: admin-authored content -->
    ></div>

    {# Stock Status #}
    {% if show_stock %}
    {{ stock_status(product_var=product_var) }}
    {% endif %}

    {# SKU #}
    {% if show_sku %}
    <div x-show="{{ product_var }}.sku" class="text-sm text-gray-500 dark:text-gray-500">
        SKU: <span x-text="{{ product_var }}.sku" class="font-mono"></span>
    </div>
    {% endif %}
</div>
{% endmacro %}


{#
  Product Price
  =============
  Price display with sale price support.

  Parameters:
    - product_var: Alpine.js expression for product
    - size: 'sm' | 'md' | 'lg' (default: 'md')
    - show_discount: Show discount percentage (default: true)

  Usage:
    {{ product_price(product_var='product', size='lg') }}
#}
{% macro product_price(
    product_var='product',
    size='md',
    show_discount=true
) %}
{% set sizes = {
    'sm': {'price': 'text-lg', 'original': 'text-sm', 'badge': 'text-xs px-1.5 py-0.5'},
    'md': {'price': 'text-xl', 'original': 'text-base', 'badge': 'text-xs px-2 py-0.5'},
    'lg': {'price': 'text-2xl md:text-3xl', 'original': 'text-lg', 'badge': 'text-sm px-2 py-1'}
} %}
{% set s = sizes[size] %}

<div class="flex items-center flex-wrap gap-2">
    {# Current Price (sale or regular) #}
    <span
        class="{{ s.price }} font-bold"
        :class="{{ product_var }}.sale_price ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white'"
        x-text="formatCurrency({{ product_var }}.sale_price || {{ product_var }}.price)"
    ></span>

    {# Original Price (if on sale) #}
    <span
        x-show="{{ product_var }}.sale_price"
        class="{{ s.original }} text-gray-500 dark:text-gray-400 line-through"
        x-text="formatCurrency({{ product_var }}.price)"
    ></span>

    {# Discount Badge #}
    {% if show_discount %}
    <span
        x-show="{{ product_var }}.sale_price"
        class="{{ s.badge }} bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full font-medium"
        x-text="'-' + Math.round((1 - {{ product_var }}.sale_price / {{ product_var }}.price) * 100) + '%'"
    ></span>
    {% endif %}
</div>
{% endmacro %}


{#
  Product Rating
  ==============
  Star rating display with review count.

  Parameters:
    - product_var: Alpine.js expression for product
    - size: 'sm' | 'md' | 'lg' (default: 'md')
    - clickable: Make clickable to scroll to reviews (default: false)
    - show_count: Show review count (default: true)

  Usage:
    {{ product_rating(product_var='product', clickable=true) }}
#}
{% macro product_rating(
    product_var='product',
    size='md',
    clickable=false,
    show_count=true
) %}
{% set sizes = {
    'sm': {'star': 'w-4 h-4', 'text': 'text-xs'},
    'md': {'star': 'w-5 h-5', 'text': 'text-sm'},
    'lg': {'star': 'w-6 h-6', 'text': 'text-base'}
} %}
{% set s = sizes[size] %}

<div
    class="flex items-center gap-2 {{ 'cursor-pointer hover:opacity-80' if clickable else '' }}"
    {% if clickable %}@click="document.getElementById('reviews')?.scrollIntoView({ behavior: 'smooth' })"{% endif %}
>
    {# Stars #}
    <div class="flex items-center">
        <template x-for="i in 5" :key="i">
            <span
                x-html="$icon('star', '{{ s.star }}')"
                :class="i <= Math.round({{ product_var }}.rating || 0)
                    ? 'text-yellow-400 fill-current'
                    : 'text-gray-300 dark:text-gray-600'"
            ></span>
        </template>
    </div>

    {# Rating Number #}
    <span class="{{ s.text }} font-medium text-gray-700 dark:text-gray-300" x-text="{{ product_var }}.rating?.toFixed(1)"></span>

    {# Review Count #}
    {% if show_count %}
    <span class="{{ s.text }} text-gray-500 dark:text-gray-400">
        (<span x-text="{{ product_var }}.review_count || 0"></span> reviews)
    </span>
    {% endif %}
</div>
{% endmacro %}


{#
  Stock Status
  ============
  Stock availability indicator.

  Parameters:
    - product_var: Alpine.js expression for product (or stock number)
    - low_stock_threshold: Show warning below this number (default: 10)

  Usage:
    {{ stock_status(product_var='product') }}
    {{ stock_status(product_var='selectedVariant.stock') }}
#}
{% macro stock_status(
    product_var='product',
    low_stock_threshold=10
) %}
<div class="flex items-center gap-2">
    {# In Stock #}
    <template x-if="({{ product_var }}.stock !== undefined ? {{ product_var }}.stock : {{ product_var }}) > {{ low_stock_threshold }}">
        <div class="flex items-center gap-1.5 text-green-600 dark:text-green-400">
            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
            <span class="text-sm font-medium">In Stock</span>
        </div>
    </template>

    {# Low Stock #}
    <template x-if="({{ product_var }}.stock !== undefined ? {{ product_var }}.stock : {{ product_var }}) > 0 && ({{ product_var }}.stock !== undefined ? {{ product_var }}.stock : {{ product_var }}) <= {{ low_stock_threshold }}">
        <div class="flex items-center gap-1.5 text-orange-600 dark:text-orange-400">
            <span x-html="$icon('exclamation', 'w-5 h-5')"></span>
            <span class="text-sm font-medium">
                Only <span x-text="{{ product_var }}.stock !== undefined ? {{ product_var }}.stock : {{ product_var }}"></span> left in stock
            </span>
        </div>
    </template>

    {# Out of Stock #}
    <template x-if="({{ product_var }}.stock !== undefined ? {{ product_var }}.stock : {{ product_var }}) === 0">
        <div class="flex items-center gap-1.5 text-red-600 dark:text-red-400">
            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
            <span class="text-sm font-medium">Out of Stock</span>
        </div>
    </template>
</div>
{% endmacro %}


{#
  Product Badges
  ==============
  Display multiple product badges (new, sale, bestseller, etc.).

  Parameters:
    - product_var: Alpine.js expression for product

  Usage:
    {{ product_badges(product_var='product') }}
#}
{% macro product_badges(product_var='product') %}
<div class="flex flex-wrap gap-2">
    {# Sale Badge #}
    <template x-if="{{ product_var }}.sale_price">
        <span class="px-2 py-1 text-xs font-bold text-white bg-red-500 rounded">
            SALE
        </span>
    </template>

    {# New Badge #}
    <template x-if="{{ product_var }}.is_new">
        <span class="px-2 py-1 text-xs font-bold text-white bg-green-500 rounded">
            NEW
        </span>
    </template>

    {# Bestseller Badge #}
    <template x-if="{{ product_var }}.is_bestseller">
        <span class="px-2 py-1 text-xs font-bold text-white bg-purple-500 rounded">
            BESTSELLER
        </span>
    </template>

    {# Limited Edition Badge #}
    <template x-if="{{ product_var }}.is_limited">
        <span class="px-2 py-1 text-xs font-bold text-white bg-amber-500 rounded">
            LIMITED
        </span>
    </template>
</div>
{% endmacro %}


{#
  Trust Indicators
  ================
  Display trust/shipping information below add to cart.

  Parameters:
    - show_shipping: Show free shipping info (default: true)
    - show_returns: Show returns policy (default: true)
    - show_secure: Show secure checkout badge (default: true)
    - free_shipping_threshold: Amount for free shipping (default: 50)

  Usage:
    {{ trust_indicators(free_shipping_threshold=75) }}
#}
{% macro trust_indicators(
    show_shipping=true,
    show_returns=true,
    show_secure=true,
    free_shipping_threshold=50
) %}
<div class="flex flex-col gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
    {% if show_shipping %}
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <span x-html="$icon('truck', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
        <span>Free shipping on orders over ${{ free_shipping_threshold }}</span>
    </div>
    {% endif %}

    {% if show_returns %}
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <span x-html="$icon('refresh', 'w-5 h-5 text-blue-600 dark:text-blue-400')"></span>
        <span>30-day easy returns</span>
    </div>
    {% endif %}

    {% if show_secure %}
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <span x-html="$icon('shield-check', 'w-5 h-5 text-purple-600 dark:text-purple-400')"></span>
        <span>Secure checkout</span>
    </div>
    {% endif %}
</div>
{% endmacro %}