{# app/modules/loyalty/templates/loyalty/shared/pins-list.html #}
{#
  Shared staff PINs list partial. Set these variables before including:
    - pins_api_prefix (str): API base URL for PINs data
    - show_store_filter (bool): Show store/location dropdown filter
    - show_crud (bool): Show create/edit/delete actions (false for admin read-only)
#}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/modals.html' import modal, confirm_modal %}
{% from 'shared/macros/inputs.html' import search_autocomplete %}

<!-- Stats Summary -->
<div x-show="!loading" class="mb-6 flex flex-wrap items-center gap-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex items-center">
        <div class="p-2 mr-3 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
            <span x-html="$icon('key', 'w-4 h-4')"></span>
        </div>
        <div>
            <p class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.pins.total_pins') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(pinStats.total)">0</p>
        </div>
    </div>
    <div class="flex items-center">
        <div class="p-2 mr-3 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
            <span x-html="$icon('check-circle', 'w-4 h-4')"></span>
        </div>
        <div>
            <p class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.pins.active_pins') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(pinStats.active)">0</p>
        </div>
    </div>
    <div class="flex items-center">
        <div class="p-2 mr-3 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
            <span x-html="$icon('lock-closed', 'w-4 h-4')"></span>
        </div>
        <div>
            <p class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.pins.locked_pins') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(pinStats.locked)">0</p>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-wrap items-center gap-4">
        {% if show_store_filter %}
        <select x-model="filters.store_id" @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.common.all_stores') }}</option>
            <template x-for="loc in locations" :key="loc.store_id">
                <option :value="loc.store_id" x-text="loc.store_name"></option>
            </template>
        </select>
        {% endif %}
        <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.shared.pins.all_status') }}</option>
            <option value="active">{{ _('loyalty.common.active') }}</option>
            <option value="inactive">{{ _('loyalty.common.inactive') }}</option>
            <option value="locked">{{ _('loyalty.shared.pins.status_locked') }}</option>
        </select>
    </div>
</div>

<!-- PINs Table -->
<div x-show="!loading">
    {% call table_wrapper() %}
        {% if show_store_filter %}
        {{ table_header([_('loyalty.shared.pins.col_name'), _('loyalty.shared.pins.col_staff_id'), _('loyalty.shared.pins.col_store'), _('loyalty.shared.pins.col_status'), _('loyalty.shared.pins.col_locked'), _('loyalty.shared.pins.col_last_used'), _('loyalty.shared.pins.col_actions')]) }}
        {% else %}
        {{ table_header([_('loyalty.shared.pins.col_name'), _('loyalty.shared.pins.col_staff_id'), _('loyalty.shared.pins.col_status'), _('loyalty.shared.pins.col_locked'), _('loyalty.shared.pins.col_last_used'), _('loyalty.shared.pins.col_actions')]) }}
        {% endif %}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="pins.length === 0">
                <tr>
                    <td :colspan="'{{ '7' if show_store_filter else '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('key', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">{{ _('loyalty.shared.pins.no_pins') }}</p>
                        </div>
                    </td>
                </tr>
            </template>
            <template x-for="pin in pins" :key="pin.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 text-sm font-semibold" x-text="pin.name"></td>
                    <td class="px-4 py-3 text-sm font-mono" x-text="pin.staff_id"></td>
                    {% if show_store_filter %}
                    <td class="px-4 py-3 text-sm" x-text="pin.store_name || '-'"></td>
                    {% endif %}
                    <td class="px-4 py-3 text-xs">
                        <span class="px-2 py-1 font-semibold leading-tight rounded-full"
                              :class="pin.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="pin.is_active ? $t('loyalty.common.active') : $t('loyalty.common.inactive')"></span>
                    </td>
                    <td class="px-4 py-3 text-xs">
                        <span x-show="pin.is_locked" class="px-2 py-1 font-semibold leading-tight rounded-full text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100">{{ _('loyalty.shared.pins.status_locked') }}</span>
                        <span x-show="!pin.is_locked" class="text-sm text-gray-400">-</span>
                    </td>
                    <td class="px-4 py-3 text-sm" x-text="pin.last_used_at ? formatDate(pin.last_used_at) : '-'"></td>
                    <td class="px-4 py-3">
                        {% if show_crud %}
                        <div class="flex items-center gap-2">
                            <button @click="openEditModal(pin)" type="button"
                                    aria-label="{{ _('loyalty.common.edit') }}"
                                    class="text-purple-600 hover:text-purple-700 dark:text-purple-400 text-sm">
                                <span x-html="$icon('pencil', 'w-4 h-4')"></span>
                            </button>
                            <button @click="openDeleteModal(pin)" type="button"
                                    aria-label="{{ _('loyalty.common.delete') }}"
                                    class="text-red-600 hover:text-red-700 dark:text-red-400 text-sm">
                                <span x-html="$icon('trash', 'w-4 h-4')"></span>
                            </button>
                            <button x-show="pin.is_locked" @click="unlockPin(pin)" type="button"
                                    aria-label="{{ _('loyalty.shared.pins.unlock') }}"
                                    class="text-orange-600 hover:text-orange-700 dark:text-orange-400 text-sm">
                                <span x-html="$icon('lock-open', 'w-4 h-4')"></span>
                            </button>
                        </div>
                        {% else %}
                        <span class="text-sm text-gray-400">-</span>
                        {% endif %}
                    </td>
                </tr>
            </template>
        </tbody>
    {% endcall %}
</div>

{% if show_crud %}
<!-- Create PIN Modal -->
{% call modal('createPinModal', _('loyalty.shared.pins.create_pin'), 'showCreateModal', size='md', show_footer=false) %}
    <form @submit.prevent="createPin()">
        <div class="space-y-4">
            <!-- Staff Member Autocomplete -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
                {{ search_autocomplete(
                    search_var='staffSearch',
                    results_var='staffSearchResults',
                    show_dropdown_var='showStaffDropdown',
                    loading_var='searchingStaff',
                    search_action='searchStaff()',
                    select_action='selectStaffMember(item)',
                    display_field='full_name',
                    secondary_field='email',
                    placeholder=_('loyalty.shared.pins.pin_name'),
                    min_chars=1,
                    no_results_text=_('loyalty.shared.pins.no_staff_found'),
                    loading_text=_('loyalty.common.loading')
                ) }}
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_staff_id') }}</label>
                <input type="text" x-model="pinForm.staff_id"
                       class="w-full px-3 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 bg-gray-50 dark:bg-gray-800"
                       placeholder="{{ _('loyalty.shared.pins.pin_staff_id') }}"
                       :readonly="pinForm.staff_id && staffMembers.length > 0">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_code') }}</label>
                <input type="password" x-model="pinForm.pin" required minlength="4" maxlength="8"
                       class="w-full px-3 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"
                       placeholder="{{ _('loyalty.shared.pins.pin_code_hint') }}">
            </div>
            {% if show_store_filter %}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_store') }}</label>
                <select x-model="pinForm.store_id" required
                        class="w-full px-3 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.shared.pins.select_store') }}</option>
                    <template x-for="loc in locations" :key="loc.store_id">
                        <option :value="loc.store_id" x-text="loc.store_name"></option>
                    </template>
                </select>
            </div>
            {% endif %}
        </div>
        <div class="flex items-center justify-end gap-3 mt-6">
            <button type="button" @click="showCreateModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('loyalty.common.cancel') }}
            </button>
            <button type="submit" :disabled="saving"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-text="saving ? $t('loyalty.common.saving') : $t('loyalty.shared.pins.create_pin')"></span>
            </button>
        </div>
    </form>
{% endcall %}

<!-- Edit PIN Modal -->
{% call modal('editPinModal', _('loyalty.shared.pins.edit_pin'), 'showEditModal', size='md', show_footer=false) %}
    <form @submit.prevent="updatePin()">
        <div class="space-y-4">
            <!-- Staff Member Autocomplete -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
                <input type="text" :value="pinForm.name" readonly
                       class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_staff_id') }}</label>
                <input type="text" :value="pinForm.staff_id" readonly
                       class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_code') }}</label>
                <input type="password" x-model="pinForm.pin" required minlength="4" maxlength="8"
                       class="w-full px-3 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"
                       placeholder="{{ _('loyalty.shared.pins.pin_edit_placeholder') }}">
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ _('loyalty.shared.pins.pin_edit_hint') }}</p>
            </div>
            {% if show_store_filter %}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_store') }}</label>
                <input type="text" :value="locations.find(l => l.store_id == pinForm.store_id)?.store_name || '-'" readonly
                       class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
            </div>
            {% endif %}
        </div>
        <div class="flex items-center justify-end gap-3 mt-6">
            <button type="button" @click="showEditModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('loyalty.common.cancel') }}
            </button>
            <button type="submit" :disabled="saving"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-text="saving ? $t('loyalty.common.saving') : $t('loyalty.shared.pins.save_changes')"></span>
            </button>
        </div>
    </form>
{% endcall %}

<!-- Delete Confirm Modal -->
{{ confirm_modal(
    'deletePinModal',
    _('loyalty.shared.pins.delete_pin'),
    _('loyalty.shared.pins.confirm_delete'),
    'deletePin()',
    'showDeleteModal',
    confirm_text=_('loyalty.common.delete'),
    cancel_text=_('loyalty.common.cancel'),
    variant='danger'
) }}
{% endif %}