{# app/modules/loyalty/templates/loyalty/storefront/history.html #}
{% extends "storefront/base.html" %}

{% block title %}{{ _('loyalty.storefront.history.title') }} - {{ store.name }}{% endblock %}

{% block i18n_modules %}['loyalty']{% endblock %}

{% block alpine_data %}customerLoyaltyHistory(){% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="mb-8">
        <a href="{{ base_url }}account/loyalty" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-primary mb-4">
            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
            {{ _('loyalty.storefront.history.back_to_loyalty') }}
        </a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ _('loyalty.storefront.history.title') }}</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">{{ _('loyalty.storefront.history.subtitle') }}</p>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex justify-center py-12">
        <span x-html="$icon('spinner', 'w-8 h-8 animate-spin')" style="color: var(--color-primary)"></span>
    </div>

    <!-- Summary Card -->
    <div x-show="!loading && card" class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8 border border-gray-200 dark:border-gray-700">
        <div class="grid grid-cols-3 gap-4 text-center">
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('loyalty.storefront.history.current_balance') }}</p>
                <p class="text-2xl font-bold" style="color: var(--color-primary)" x-text="formatNumber(card?.points_balance || 0)"></p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('loyalty.storefront.history.total_earned') }}</p>
                <p class="text-2xl font-bold text-green-600" x-text="formatNumber(card?.total_points_earned || 0)"></p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('loyalty.storefront.history.total_redeemed') }}</p>
                <p class="text-2xl font-bold text-orange-600" x-text="formatNumber(card?.total_points_redeemed || 0)"></p>
            </div>
        </div>
    </div>

    <!-- Transactions List -->
    <div x-show="!loading" class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
        <template x-if="transactions.length === 0">
            <div class="p-12 text-center">
                <span x-html="$icon('receipt-refund', 'w-12 h-12 mx-auto text-gray-300 dark:text-gray-600')"></span>
                <p class="mt-4 text-gray-500 dark:text-gray-400">{{ _('loyalty.storefront.history.no_transactions') }}</p>
            </div>
        </template>

        <template x-if="transactions.length > 0">
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                <template x-for="tx in transactions" :key="tx.id">
                    <div class="flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <div class="flex items-center">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center"
                                 :class="tx.points_delta > 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-orange-100 dark:bg-orange-900/30'">
                                <span x-html="$icon(tx.points_delta > 0 ? 'plus' : 'gift', 'w-6 h-6')"
                                      :class="tx.points_delta > 0 ? 'text-green-600' : 'text-orange-600'"></span>
                            </div>
                            <div class="ml-4">
                                <p class="font-medium text-gray-900 dark:text-white"
                                   x-text="$t('loyalty.transactions.' + tx.transaction_type)"></p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    <span x-text="formatDateTime(tx.transaction_at)"></span>
                                    <span x-show="tx.store_name" class="ml-2">
                                        at <span x-text="tx.store_name"></span>
                                    </span>
                                </p>
                                <p x-show="tx.notes" class="text-xs text-gray-400 mt-1" x-text="tx.notes"></p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-semibold"
                               :class="tx.points_delta > 0 ? 'text-green-600' : 'text-orange-600'"
                               x-text="(tx.points_delta > 0 ? '+' : '') + formatNumber(tx.points_delta)"></p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ _('loyalty.storefront.history.balance') }} <span x-text="formatNumber(tx.balance_after)"></span>
                            </p>
                        </div>
                    </div>
                </template>
            </div>
        </template>

        <!-- Pagination -->
        <div x-show="pagination.pages > 1" class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <button @click="previousPage()" :disabled="pagination.page <= 1"
                    class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50">
                {{ _('loyalty.storefront.history.previous') }}
            </button>
            <span class="text-sm text-gray-500 dark:text-gray-400"
                  x-text="'{{ _('loyalty.storefront.history.page_x_of_y') }}'.replace('{page}', pagination.page).replace('{pages}', pagination.pages)">
            </span>
            <button @click="nextPage()" :disabled="pagination.page >= pagination.pages"
                    class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50">
                {{ _('loyalty.storefront.history.next') }}
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('loyalty_static', path='storefront/js/loyalty-history.js') }}"></script>
{% endblock %}