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

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

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

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

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

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

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

<!-- No Program State -->
<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('gift', '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.merchant.analytics.no_program') }}</h3>
            <p class="mt-1 text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.merchant.analytics.no_program_desc') }}</p>
            <a href="/merchants/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('plus', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.merchant.analytics.create_program') }}
            </a>
        </div>
    </div>
</div>

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

    <!-- 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.merchant.analytics.quick_actions') }}</h3>
        <div class="flex flex-wrap gap-3">
            <a href="/merchants/loyalty/program"
               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('eye', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.merchant.analytics.view_program') }}
            </a>
            <a href="/merchants/loyalty/program/edit"
               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('pencil', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.merchant.analytics.edit_program') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}

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