{# app/modules/loyalty/templates/loyalty/admin/analytics.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/inputs.html' import search_autocomplete, selected_item_display %}

{% block title %}{{ _('loyalty.admin.analytics.title') }}{% endblock %}

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

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

{% block content %}
{% call page_header_flex(title=_('loyalty.admin.analytics.title'), subtitle=_('loyalty.admin.analytics.subtitle')) %}
    <div class="flex items-center gap-3">
        {{ refresh_button(loading_var='loading', onclick='loadStats()', variant='secondary') }}
    </div>
{% endcall %}

<!-- Merchant Filter -->
<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">{{ _('loyalty.admin.analytics.filter_by_merchant') }}</label>
    <div x-show="!selectedMerchant">
        {{ search_autocomplete(
            search_var='merchantSearch',
            results_var='merchantResults',
            show_dropdown_var='showMerchantDropdown',
            loading_var='searchingMerchants',
            search_action='searchMerchants()',
            select_action='selectMerchant(item)',
            display_field='merchant_name',
            secondary_field='loyalty_type',
            placeholder=_('loyalty.admin.analytics.search_merchants_placeholder'),
        ) }}
    </div>
    {{ selected_item_display(
        selected_var='selectedMerchant',
        display_field='merchant_name',
        clear_action='clearMerchantFilter()',
        label=_('loyalty.admin.analytics.showing_stats_for')
    ) }}
</div>

{{ loading_state(_('loyalty.admin.analytics.loading')) }}

{{ error_state(_('loyalty.admin.analytics.error_loading')) }}

<!-- Analytics Dashboard -->
<div x-show="!loading">
    {% set show_programs_card = true %}
    {% set show_locations = true %}
    {% set show_merchants_metric = true %}
    {% include "loyalty/shared/analytics-stats.html" %}

    <!-- Wallet Integration Status -->
    <div class="mb-6 px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="walletStatus">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('device-phone-mobile', 'w-5 h-5 inline mr-1')"></span>
            {{ _('loyalty.admin.analytics.wallet_status') }}
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Google Wallet -->
            <div class="p-4 border rounded-lg dark:border-gray-700" x-show="walletStatus?.google_wallet">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.admin.analytics.google_wallet') }}</h4>
                    <template x-if="walletStatus?.google_wallet?.credentials_valid">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:text-green-300 dark:bg-green-900/30">{{ _('loyalty.admin.analytics.connected') }}</span>
                    </template>
                    <template x-if="walletStatus?.google_wallet?.configured && !walletStatus?.google_wallet?.credentials_valid">
                        <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full dark:text-red-300 dark:bg-red-900/30">{{ _('loyalty.admin.analytics.error') }}</span>
                    </template>
                    <template x-if="!walletStatus?.google_wallet?.configured">
                        <span class="px-2 py-1 text-xs font-medium text-gray-500 bg-gray-100 rounded-full dark:text-gray-400 dark:bg-gray-700">{{ _('loyalty.admin.analytics.not_configured') }}</span>
                    </template>
                </div>
                <template x-if="walletStatus?.google_wallet?.configured">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.issuer_id') }}</span>
                            <span class="text-gray-700 dark:text-gray-300" x-text="walletStatus.google_wallet.issuer_id"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.project') }}</span>
                            <span class="text-gray-700 dark:text-gray-300" x-text="walletStatus.google_wallet.project_id || '-'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.wallet_objects') }}</span>
                            <span class="font-medium text-gray-700 dark:text-gray-300" x-text="walletStatus.google_wallet.total_objects || 0"></span>
                        </div>
                        <!-- Class statuses -->
                        <template x-if="walletStatus.google_wallet.classes?.length > 0">
                            <div class="mt-2 pt-2 border-t dark:border-gray-700">
                                <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('loyalty.admin.analytics.loyalty_classes') }}</p>
                                <template x-for="cls in walletStatus.google_wallet.classes" :key="cls.class_id">
                                    <div class="flex justify-between text-xs py-1">
                                        <span class="text-gray-600 dark:text-gray-400" x-text="cls.program_name"></span>
                                        <span class="px-1.5 py-0.5 rounded"
                                              :class="cls.review_status === 'APPROVED' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : cls.review_status === 'DRAFT' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'"
                                              x-text="cls.review_status"></span>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <!-- Errors -->
                        <template x-if="walletStatus.google_wallet.errors?.length > 0">
                            <div class="mt-2 pt-2 border-t dark:border-gray-700">
                                <template x-for="err in walletStatus.google_wallet.errors" :key="err">
                                    <p class="text-xs text-red-600 dark:text-red-400" x-text="err"></p>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>

            <!-- Apple Wallet -->
            <div class="p-4 border rounded-lg dark:border-gray-700" x-show="walletStatus?.apple_wallet">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.admin.analytics.apple_wallet') }}</h4>
                    <template x-if="walletStatus?.apple_wallet?.credentials_valid">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:text-green-300 dark:bg-green-900/30">{{ _('loyalty.admin.analytics.connected') }}</span>
                    </template>
                    <template x-if="walletStatus?.apple_wallet?.configured && !walletStatus?.apple_wallet?.credentials_valid">
                        <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full dark:text-red-300 dark:bg-red-900/30">{{ _('loyalty.admin.analytics.error') }}</span>
                    </template>
                    <template x-if="!walletStatus?.apple_wallet?.configured">
                        <span class="px-2 py-1 text-xs font-medium text-gray-500 bg-gray-100 rounded-full dark:text-gray-400 dark:bg-gray-700">{{ _('loyalty.admin.analytics.not_configured') }}</span>
                    </template>
                </div>
                <template x-if="walletStatus?.apple_wallet?.configured">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.pass_type_id') }}</span>
                            <span class="text-gray-700 dark:text-gray-300" x-text="walletStatus.apple_wallet.pass_type_id"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.team_id') }}</span>
                            <span class="text-gray-700 dark:text-gray-300" x-text="walletStatus.apple_wallet.team_id"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400">{{ _('loyalty.admin.analytics.active_passes') }}</span>
                            <span class="font-medium text-gray-700 dark:text-gray-300" x-text="walletStatus.apple_wallet.total_passes || 0"></span>
                        </div>
                        <template x-if="walletStatus.apple_wallet.errors?.length > 0">
                            <div class="mt-2 pt-2 border-t dark:border-gray-700">
                                <template x-for="err in walletStatus.apple_wallet.errors" :key="err">
                                    <p class="text-xs text-red-600 dark:text-red-400" x-text="err"></p>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <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">{{ _('loyalty.admin.analytics.quick_actions') }}</h3>
        <div class="flex flex-wrap gap-3">
            <a href="/admin/loyalty/programs"
               class="inline-flex items-center px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 dark:text-purple-300 dark:bg-purple-900/30 dark:hover:bg-purple-900/50">
                <span x-html="$icon('gift', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.analytics.view_all_programs') }}
            </a>
            <a href="/admin/merchants"
               class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-100 rounded-lg hover:bg-blue-200 dark:text-blue-300 dark:bg-blue-900/30 dark:hover:bg-blue-900/50">
                <span x-html="$icon('office-building', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.analytics.manage_merchants') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}

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