{#
  Product Tabs Components
  =======================
  Tabbed content sections for product detail pages.

  Usage:
    {% from 'shared/macros/storefront/product-tabs.html' import product_tabs, tab_description, tab_specifications, tab_reviews %}
#}


{#
  Product Tabs
  ============
  Tabbed container for product information sections.

  Parameters:
    - product_var: Alpine.js expression for product (default: 'product')
    - tabs: List of tab IDs to show (default: ['description', 'specifications', 'reviews'])
    - default_tab: Initially active tab (default: 'description')
    - tab_var: Alpine.js variable for active tab (default: 'activeProductTab')

  Usage:
    {{ product_tabs(tabs=['description', 'specifications', 'reviews', 'shipping']) }}
#}
{% macro product_tabs(
    product_var='product',
    tabs=['description', 'specifications', 'reviews'],
    default_tab='description',
    tab_var='activeProductTab'
) %}
{% set tab_config = {
    'description': {'label': 'Description', 'icon': 'document-text'},
    'specifications': {'label': 'Specifications', 'icon': 'clipboard-list'},
    'reviews': {'label': 'Reviews', 'icon': 'star'},
    'shipping': {'label': 'Shipping & Returns', 'icon': 'truck'},
    'warranty': {'label': 'Warranty', 'icon': 'shield-check'}
} %}

<div x-data="{ {{ tab_var }}: '{{ default_tab }}' }" class="mt-8">
    {# Tab Navigation #}
    <div class="border-b border-gray-200 dark:border-gray-700">
        <nav class="flex gap-4 -mb-px overflow-x-auto" aria-label="Product information tabs">
            {% for tab_id in tabs %}
            {% set config = tab_config.get(tab_id, {'label': tab_id|capitalize, 'icon': 'document'}) %}
            <button
                type="button"
                @click="{{ tab_var }} = '{{ tab_id }}'"
                class="flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap"
                :class="{{ tab_var }} === '{{ tab_id }}'
                    ? 'border-purple-500 text-purple-600 dark:text-purple-400'
                    : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:border-gray-300'"
                {% if tab_id == 'reviews' %}
                :aria-label="'Reviews (' + ({{ product_var }}.review_count || 0) + ')'"
                {% endif %}
            >
                <span x-html="$icon('{{ config.icon }}', 'w-5 h-5')"></span>
                <span>{{ config.label }}</span>
                {% if tab_id == 'reviews' %}
                <span
                    x-show="{{ product_var }}.review_count"
                    class="px-2 py-0.5 text-xs rounded-full"
                    :class="{{ tab_var }} === 'reviews'
                        ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400'
                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'"
                    x-text="{{ product_var }}.review_count"
                ></span>
                {% endif %}
            </button>
            {% endfor %}
        </nav>
    </div>

    {# Tab Panels #}
    <div class="py-6">
        {% if 'description' in tabs %}
        {{ tab_description(product_var, tab_var) }}
        {% endif %}

        {% if 'specifications' in tabs %}
        {{ tab_specifications(product_var, tab_var) }}
        {% endif %}

        {% if 'reviews' in tabs %}
        {{ tab_reviews(product_var, tab_var) }}
        {% endif %}

        {% if 'shipping' in tabs %}
        {{ tab_shipping(tab_var) }}
        {% endif %}

        {% if 'warranty' in tabs %}
        {{ tab_warranty(product_var, tab_var) }}
        {% endif %}
    </div>
</div>
{% endmacro %}


{#
  Tab: Description
  ================
  Product description content panel.
#}
{% macro tab_description(product_var='product', tab_var='activeProductTab') %}
<div x-show="{{ tab_var }} === 'description'" x-transition>
    <div
        class="prose prose-gray dark:prose-invert max-w-none"
        x-html="{{ product_var }}.description || {{ product_var }}.full_description || '<p class=\'text-gray-500\'>No description available.</p>'" <!-- noqa: SEC015 sanitized: admin-authored content -->
    ></div>

    {# Features List (if available) #}
    <template x-if="{{ product_var }}.features?.length">
        <div class="mt-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Key Features</h3>
            <ul class="space-y-2">
                <template x-for="feature in {{ product_var }}.features" :key="feature">
                    <li class="flex items-start gap-2">
                        <span x-html="$icon('check', 'w-5 h-5 text-green-500 flex-shrink-0 mt-0.5')"></span>
                        <span class="text-gray-600 dark:text-gray-400" x-text="feature"></span>
                    </li>
                </template>
            </ul>
        </div>
    </template>
</div>
{% endmacro %}


{#
  Tab: Specifications
  ===================
  Product specifications table panel.
#}
{% macro tab_specifications(product_var='product', tab_var='activeProductTab') %}
<div x-show="{{ tab_var }} === 'specifications'" x-transition>
    <template x-if="{{ product_var }}.specifications?.length || {{ product_var }}.specs?.length || {{ product_var }}.attributes?.length">
        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    <template x-for="(spec, index) in ({{ product_var }}.specifications || {{ product_var }}.specs || {{ product_var }}.attributes)" :key="spec.name || index">
                        <tr :class="index % 2 === 0 ? 'bg-gray-50 dark:bg-gray-800/50' : 'bg-white dark:bg-gray-800'">
                            <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white w-1/3" x-text="spec.name || spec.key || spec.label"></td>
                            <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400" x-text="spec.value"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>

    <template x-if="!({{ product_var }}.specifications?.length || {{ product_var }}.specs?.length || {{ product_var }}.attributes?.length)">
        <p class="text-gray-500 dark:text-gray-400">No specifications available.</p>
    </template>
</div>
{% endmacro %}


{#
  Tab: Reviews
  ============
  Product reviews list and summary panel.
#}
{% macro tab_reviews(product_var='product', tab_var='activeProductTab') %}
<div x-show="{{ tab_var }} === 'reviews'" x-transition id="reviews">
    {# Reviews Summary #}
    <div class="flex flex-col md:flex-row gap-8 mb-8 pb-8 border-b border-gray-200 dark:border-gray-700">
        {# Overall Rating #}
        <div class="text-center md:text-left">
            <div class="text-5xl font-bold text-gray-900 dark:text-white" x-text="({{ product_var }}.rating || 0).toFixed(1)"></div>
            <div class="flex items-center justify-center md:justify-start gap-1 mt-2">
                <template x-for="i in 5" :key="i">
                    <span
                        x-html="$icon('star', 'w-5 h-5')"
                        :class="i <= Math.round({{ product_var }}.rating || 0)
                            ? 'text-yellow-400 fill-current'
                            : 'text-gray-300 dark:text-gray-600'"
                    ></span>
                </template>
            </div>
            <div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <span x-text="{{ product_var }}.review_count || 0"></span> reviews
            </div>
        </div>

        {# Rating Distribution #}
        <template x-if="{{ product_var }}.rating_distribution">
            <div class="flex-1 space-y-2">
                <template x-for="rating in [5, 4, 3, 2, 1]" :key="rating">
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400 w-8" x-text="rating + '★'"></span>
                        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                            <div
                                class="h-full bg-yellow-400 rounded-full"
                                :style="'width: ' + ({{ product_var }}.rating_distribution?.[rating] || 0) + '%'"
                            ></div>
                        </div>
                        <span
                            class="text-sm text-gray-500 dark:text-gray-400 w-10 text-right"
                            x-text="({{ product_var }}.rating_distribution?.[rating] || 0) + '%'"
                        ></span>
                    </div>
                </template>
            </div>
        </template>
    </div>

    {# Reviews List #}
    <template x-if="{{ product_var }}.reviews?.length">
        <div class="space-y-6">
            <template x-for="review in {{ product_var }}.reviews" :key="review.id">
                {{ review_card() }}
            </template>

            {# Load More Reviews #}
            <template x-if="{{ product_var }}.reviews?.length < {{ product_var }}.review_count">
                <div class="text-center pt-4">
                    <button
                        type="button"
                        class="px-6 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-700 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors"
                    >
                        Load More Reviews
                    </button>
                </div>
            </template>
        </div>
    </template>

    {# No Reviews #}
    <template x-if="!{{ product_var }}.reviews?.length">
        <div class="text-center py-8">
            <span x-html="$icon('chat-alt-2', 'w-12 h-12 mx-auto text-gray-300 dark:text-gray-600')"></span>
            <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No reviews yet</h3>
            <p class="mt-2 text-gray-500 dark:text-gray-400">Be the first to review this product!</p>
            <button
                type="button"
                class="mt-4 px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
            >
                Write a Review
            </button>
        </div>
    </template>
</div>
{% endmacro %}


{#
  Review Card
  ===========
  Individual review display.
#}
{% macro review_card() %}
<div class="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-0">
    {# Header #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center gap-3">
            {# Avatar #}
            <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                <span
                    class="text-sm font-medium text-purple-600 dark:text-purple-400"
                    x-text="(review.author_name || review.author || 'A').charAt(0).toUpperCase()"
                ></span>
            </div>
            <div>
                <div class="flex items-center gap-2">
                    <span class="font-medium text-gray-900 dark:text-white" x-text="review.author_name || review.author || 'Anonymous'"></span>
                    <template x-if="review.verified">
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900/30 rounded">
                            <span x-html="$icon('badge-check', 'w-3 h-3')"></span>
                            Verified
                        </span>
                    </template>
                </div>
                <div class="text-xs text-gray-500 dark:text-gray-400" x-text="formatDate(review.created_at || review.date)"></div>
            </div>
        </div>

        {# Rating #}
        <div class="flex items-center">
            <template x-for="i in 5" :key="i">
                <span
                    x-html="$icon('star', 'w-4 h-4')"
                    :class="i <= review.rating ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"
                ></span>
            </template>
        </div>
    </div>

    {# Title #}
    <template x-if="review.title">
        <h4 class="font-medium text-gray-900 dark:text-white mb-2" x-text="review.title"></h4>
    </template>

    {# Content #}
    <p class="text-gray-600 dark:text-gray-400" x-text="review.content || review.body || review.text"></p>

    {# Review Images #}
    <template x-if="review.images?.length">
        <div class="flex gap-2 mt-3">
            <template x-for="image in review.images.slice(0, 4)" :key="image.id || image">
                <img
                    :src="typeof image === 'string' ? image : image.url"
                    :alt="'Review image'"
                    class="w-16 h-16 object-cover rounded-lg cursor-pointer hover:opacity-80"
                />
            </template>
        </div>
    </template>

    {# Helpful Actions #}
    <div class="flex items-center gap-4 mt-4">
        <button type="button" class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
            <span x-html="$icon('thumb-up', 'w-4 h-4')"></span>
            <span>Helpful (<span x-text="review.helpful_count || 0"></span>)</span>
        </button>
        <button type="button" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
            Report
        </button>
    </div>
</div>
{% endmacro %}


{#
  Tab: Shipping & Returns
  =======================
  Shipping and returns policy panel.
#}
{% macro tab_shipping(tab_var='activeProductTab') %}
<div x-show="{{ tab_var }} === 'shipping'" x-transition>
    <div class="space-y-6">
        {# Shipping Info #}
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                <span x-html="$icon('truck', 'w-5 h-5 text-purple-600')"></span>
                Shipping Information
            </h3>
            <div class="prose prose-gray dark:prose-invert max-w-none">
                <ul>
                    <li>Free standard shipping on orders over $50</li>
                    <li>Standard shipping (3-5 business days): $4.99</li>
                    <li>Express shipping (1-2 business days): $9.99</li>
                    <li>Same-day delivery available in select areas</li>
                </ul>
            </div>
        </div>

        {# Returns Info #}
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                <span x-html="$icon('refresh', 'w-5 h-5 text-purple-600')"></span>
                Returns & Exchanges
            </h3>
            <div class="prose prose-gray dark:prose-invert max-w-none">
                <ul>
                    <li>30-day return policy for unused items</li>
                    <li>Free returns on all orders</li>
                    <li>Items must be in original packaging</li>
                    <li>Refunds processed within 5-7 business days</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Tab: Warranty
  =============
  Product warranty information panel.
#}
{% macro tab_warranty(product_var='product', tab_var='activeProductTab') %}
<div x-show="{{ tab_var }} === 'warranty'" x-transition>
    <div class="space-y-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <span x-html="$icon('shield-check', 'w-5 h-5 text-purple-600')"></span>
            Warranty Information
        </h3>

        <template x-if="{{ product_var }}.warranty">
            <div
                class="prose prose-gray dark:prose-invert max-w-none"
                x-html="{{ product_var }}.warranty" <!-- noqa: SEC015 sanitized: admin-authored content -->
            ></div>
        </template>

        <template x-if="!{{ product_var }}.warranty">
            <div class="prose prose-gray dark:prose-invert max-w-none">
                <p>This product comes with our standard warranty:</p>
                <ul>
                    <li>1-year manufacturer warranty</li>
                    <li>Coverage against manufacturing defects</li>
                    <li>Free repairs or replacement</li>
                    <li>Extended warranty options available at checkout</li>
                </ul>
            </div>
        </template>
    </div>
</div>
{% endmacro %}