{# app/modules/loyalty/templates/loyalty/shared/card-detail-view.html #}
{#
  Shared loyalty card detail view partial. Set these variables before including:
    - card_detail_api_prefix (str): API base URL for card data
    - card_detail_back_url (str): URL for the back button
    - show_copy_buttons (bool, default false): Show clipboard-copy buttons next to customer name/email/phone/card_number
    - show_category_column (bool, default false): Add a "Category" column to the transaction history table
    - show_pagination (bool, default false): Render pagination after the transaction history table

  The factory exposes `txLabels` (object: transaction_type -> translated label) and
  `txNotes` (object: raw_note -> translated note) — defaults to {} so admin/merchant
  callers that don't provide translations get the raw values shown.
#}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/pagination.html' import pagination %}

<!-- Quick Stats -->
<div 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('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.shared.card_detail.points_balance') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(card?.points_balance)">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('trending-up', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.card_detail.total_earned') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(card?.total_points_earned)">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('gift', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.card_detail.total_redeemed') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(card?.total_points_redeemed)">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('calendar', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.card_detail.member_since') }}</p>
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(card?.created_at)">-</p>
        </div>
    </div>
</div>

<!-- Customer Info + Card Info (2-column) -->
<div class="grid gap-6 mb-8 md:grid-cols-2">
    <!-- Customer Info -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('user', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.shared.card_detail.customer_information') }}
        </h3>
        <div class="space-y-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.name') }}</p>
                {% if show_copy_buttons %}
                <div class="flex items-center gap-2">
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_name || '-'">-</p>
                    <button x-show="card?.customer_name" @click="Utils.copyToClipboard(card.customer_name)" type="button" aria-label="Copy" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <span x-html="$icon('clipboard-copy', 'w-3.5 h-3.5')"></span>
                    </button>
                </div>
                {% else %}
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_name || '-'">-</p>
                {% endif %}
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.email') }}</p>
                {% if show_copy_buttons %}
                <div class="flex items-center gap-2">
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_email || '-'">-</p>
                    <button x-show="card?.customer_email" @click="Utils.copyToClipboard(card.customer_email)" type="button" aria-label="Copy" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <span x-html="$icon('clipboard-copy', 'w-3.5 h-3.5')"></span>
                    </button>
                </div>
                {% else %}
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_email || '-'">-</p>
                {% endif %}
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.phone') }}</p>
                {% if show_copy_buttons %}
                <div class="flex items-center gap-2">
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_phone || '-'">-</p>
                    <button x-show="card?.customer_phone" @click="Utils.copyToClipboard(card.customer_phone)" type="button" aria-label="Copy" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <span x-html="$icon('clipboard-copy', 'w-3.5 h-3.5')"></span>
                    </button>
                </div>
                {% else %}
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_phone || '-'">-</p>
                {% endif %}
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.birthday') }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.customer_birthday || '-'">-</p>
            </div>
        </div>
    </div>

    <!-- Card Info -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('credit-card', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.shared.card_detail.card_details') }}
        </h3>
        <div class="space-y-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.card_number') }}</p>
                {% if show_copy_buttons %}
                <div class="flex items-center gap-2">
                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="card?.card_number">-</p>
                    <button x-show="card?.card_number" @click="Utils.copyToClipboard(card.card_number)" type="button" aria-label="Copy" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <span x-html="$icon('clipboard-copy', 'w-3.5 h-3.5')"></span>
                    </button>
                </div>
                {% else %}
                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="card?.card_number">-</p>
                {% endif %}
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.status') }}</p>
                <span class="px-2 py-1 text-xs font-semibold 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 ? $t('loyalty.common.active') : $t('loyalty.common.inactive')"></span>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.last_activity') }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(card?.last_activity_at) || 'Never'">-</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.shared.card_detail.enrolled_at') }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="card?.enrolled_at_store_name || 'Unknown'">-</p>
            </div>
        </div>
    </div>
</div>

<!-- Transaction History -->
<div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
        <span x-html="$icon('clock', 'inline w-5 h-5 mr-2')"></span>
        {{ _('loyalty.shared.card_detail.transaction_history') }}
    </h3>
    {% set _tx_colspan = 6 if show_category_column else 5 %}
    {% call table_wrapper() %}
        {% if show_category_column %}
        {{ table_header([_('loyalty.shared.card_detail.col_date'), _('loyalty.shared.card_detail.col_type'), _('loyalty.shared.card_detail.col_points'), _('loyalty.shared.card_detail.col_category'), _('loyalty.shared.card_detail.col_location'), _('loyalty.shared.card_detail.col_notes')]) }}
        {% else %}
        {{ table_header([_('loyalty.shared.card_detail.col_date'), _('loyalty.shared.card_detail.col_type'), _('loyalty.shared.card_detail.col_points'), _('loyalty.shared.card_detail.col_location'), _('loyalty.shared.card_detail.col_notes')]) }}
        {% endif %}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="transactions.length === 0">
                <tr>
                    <td colspan="{{ _tx_colspan }}" class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
                        <div class="flex flex-col items-center">
                            <span x-html="$icon('clock', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">{{ _('loyalty.shared.card_detail.no_transactions') }}</p>
                        </div>
                    </td>
                </tr>
            </template>
            <template x-for="tx in transactions" :key="tx.id">
                <tr class="text-gray-700 dark:text-gray-400">
                    <td class="px-4 py-3 text-sm" x-text="formatDateTime(tx.transaction_at)"></td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full"
                              :class="{
                                  'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': tx.points_delta > 0,
                                  'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': tx.points_delta < 0
                              }"
                              x-text="txLabels[tx.transaction_type] || tx.transaction_type.replace(/_/g, ' ')"></span>
                    </td>
                    <td class="px-4 py-3 text-sm font-medium"
                        :class="tx.points_delta > 0 ? 'text-green-600' : 'text-orange-600'"
                        x-text="(tx.points_delta > 0 ? '+' : '') + formatNumber(tx.points_delta)"></td>
                    {% if show_category_column %}
                    <td class="px-4 py-3 text-sm text-gray-500" x-text="tx.category_names?.join(', ') || '-'"></td>
                    {% endif %}
                    <td class="px-4 py-3 text-sm" x-text="tx.store_name || '-'"></td>
                    <td class="px-4 py-3 text-sm text-gray-500" x-text="txNotes[tx.notes] || tx.notes || '-'"></td>
                </tr>
            </template>
        </tbody>
    {% endcall %}

    {% if show_pagination %}
    {{ pagination() }}
    {% endif %}
</div>