{# app/modules/loyalty/templates/loyalty/store/cards.html #}
{% extends "store/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}

{% block title %}{{ _('loyalty.store.cards.title') }}{% endblock %}

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

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

{% block content %}
<!-- Page Header -->
{% call page_header_flex(title=_('loyalty.store.cards.title'), subtitle=_('loyalty.store.cards.subtitle')) %}
    <div class="flex items-center gap-3">
        {{ refresh_button(loading_var='loading', onclick='loadCards()', variant='secondary') }}
        <a href="/store/{{ store_code }}/loyalty/enroll"
           class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
            <span x-html="$icon('user-plus', 'w-4 h-4 mr-2')"></span>
            {{ _('loyalty.store.cards.enroll_new') }}
        </a>
    </div>
{% endcall %}

{{ loading_state(_('loyalty.store.cards.loading')) }}

{{ error_state(_('loyalty.store.cards.error_loading')) }}

<!-- No Program Setup Notice -->
<div x-show="!loading && !program" class="mb-6 px-4 py-5 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
    <div class="flex items-start">
        <span x-html="$icon('exclamation-triangle', 'w-6 h-6 text-yellow-500 mr-3 flex-shrink-0')"></span>
        <div>
            <h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200">{{ _('loyalty.common.program_not_setup') }}</h3>
            <p class="mt-1 text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.common.program_not_setup_desc') }}</p>
            {% if user.role == 'merchant_owner' %}
            <a href="/store/{{ store_code }}/loyalty/program/edit"
               class="mt-3 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
                <span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.common.setup_program') }}
            </a>
            {% else %}
            <p class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.common.contact_admin_setup') }}</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div x-show="!loading && program" class="grid gap-6 mb-8 md:grid-cols-4">
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
            <span x-html="$icon('users', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.store.cards.total_members') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_cards)">0</p>
        </div>
    </div>
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.store.cards.active_30d') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.active_cards)">0</p>
        </div>
    </div>
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
            <span x-html="$icon('user-plus', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.store.cards.new_this_month') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.new_this_month)">0</p>
        </div>
    </div>
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
            <span x-html="$icon('currency-dollar', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.store.cards.total_points_balance') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_points_balance)">0</p>
        </div>
    </div>
</div>

<!-- Search and Filters -->
<div x-show="!loading && program" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-wrap items-center gap-4">
        <div class="flex-1 min-w-[200px]">
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
                </span>
                <input type="text"
                       x-model="filters.search"
                       @input="debouncedSearch()"
                       placeholder="{{ _('loyalty.store.cards.search_placeholder') }}"
                       class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
            </div>
        </div>
        <select x-model="filters.status" @change="applyFilter()"
                class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
            <option value="">{{ _('loyalty.store.cards.all_status') }}</option>
            <option value="active">{{ _('loyalty.common.active') }}</option>
            <option value="inactive">{{ _('loyalty.common.inactive') }}</option>
        </select>
    </div>
</div>

<!-- Cards Table -->
<div x-show="!loading && program">
    {% call table_wrapper() %}
        {{ table_header([_('loyalty.store.cards.col_member'), _('loyalty.store.cards.col_card_number'), _('loyalty.store.cards.col_points_balance'), _('loyalty.store.cards.col_last_activity'), _('loyalty.store.cards.col_status'), _('loyalty.store.cards.col_actions')]) }}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="cards.length === 0">
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
                        <div class="flex flex-col items-center">
                            <span x-html="$icon('users', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">{{ _('loyalty.store.cards.no_members') }}</p>
                            <p class="text-xs mt-1" x-text="filters.search ? '{{ _('loyalty.store.cards.adjust_search')|replace("'", "\\'") }}' : '{{ _('loyalty.store.cards.enroll_first')|replace("'", "\\'") }}'"></p>
                        </div>
                    </td>
                </tr>
            </template>
            <template x-for="card in cards" :key="card.id">
                <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3">
                        <div class="flex items-center text-sm">
                            <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
                                 :style="'background-color: ' + (program?.card_color || '#4F46E5') + '20'">
                                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold"
                                      :style="'color: ' + (program?.card_color || '#4F46E5')"
                                      x-text="card.customer_name?.charAt(0).toUpperCase() || '?'"></span>
                            </div>
                            <div>
                                <p class="font-semibold" x-text="card.customer_name || 'Unknown'"></p>
                                <p class="text-xs text-gray-600 dark:text-gray-400" x-text="card.customer_email || card.customer_phone || '-'"></p>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-sm font-mono" x-text="card.card_number"></td>
                    <td class="px-4 py-3 text-sm font-semibold" x-text="formatNumber(card.points_balance)"></td>
                    <td class="px-4 py-3 text-sm" x-text="formatDate(card.last_activity_at)"></td>
                    <td class="px-4 py-3 text-xs">
                        <span class="px-2 py-1 font-semibold leading-tight rounded-full"
                              :class="card.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'"
                              x-text="card.is_active ? '{{ _('loyalty.common.active')|replace("'", "\\'") }}' : '{{ _('loyalty.common.inactive')|replace("'", "\\'") }}'"></span>
                    </td>
                    <td class="px-4 py-3">
                        <a :href="'/store/{{ store_code }}/loyalty/cards/' + card.id"
                           class="text-purple-600 hover:text-purple-700 dark:text-purple-400"
                           >{{ _('loyalty.common.view') }}</a>
                    </td>
                </tr>
            </template>
        </tbody>
    {% endcall %}

    {{ pagination() }}
</div>
{% endblock %}

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