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

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

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

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

{% block content %}
{% call page_header_flex(title=_('loyalty.store.program.title'), subtitle=_('loyalty.store.program.subtitle')) %}
    <div class="flex items-center gap-3">
        {% if user.role == 'merchant_owner' %}
        <a href="/store/{{ store_code }}/loyalty/program/edit"
           class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
           x-show="program">
            <span x-html="$icon('pencil', 'w-4 h-4 mr-2')"></span>
            {{ _('loyalty.store.program.edit_program') }}
        </a>
        {% endif %}
    </div>
{% endcall %}

{{ loading_state(_('loyalty.store.program.loading')) }}
{{ error_state(_('loyalty.store.program.error_loading')) }}

<!-- No Program State -->
<div x-show="!loading && !program" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span x-html="$icon('gift', 'w-12 h-12 mx-auto text-gray-400')"></span>
    <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">{{ _('loyalty.store.program.no_program') }}</h3>
    <p class="mt-2 text-gray-500 dark:text-gray-400">
        {{ _('loyalty.common.program_not_setup_desc') }}
    </p>
    {% if user.role == 'merchant_owner' %}
    <a href="/store/{{ store_code }}/loyalty/program/edit"
       class="inline-flex items-center mt-4 px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
        {{ _('loyalty.store.program.create_program') }}
    </a>
    {% else %}
    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">{{ _('loyalty.store.program.contact_admin') }}</p>
    {% endif %}
</div>

<!-- Program View -->
<div x-show="!loading && program">
    {% set edit_url = '/store/' ~ store_code ~ '/loyalty/program/edit' %}
    {% if user.role == 'merchant_owner' %}
    {% set show_edit_button = true %}
    {% else %}
    {% set show_edit_button = false %}
    {% endif %}
    {% include "loyalty/shared/program-view.html" %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function storeLoyaltyProgram() {
    return {
        ...data(),
        currentPage: 'program',

        program: null,
        loading: false,
        error: null,

        async init() {
            if (window._storeLoyaltyProgramInitialized) return;
            window._storeLoyaltyProgramInitialized = true;

            const parentInit = data().init;
            if (parentInit) {
                await parentInit.call(this);
            }

            await this.loadProgram();
        },

        async loadProgram() {
            this.loading = true;
            this.error = null;

            try {
                const response = await apiClient.get('/store/loyalty/program');
                if (response) {
                    this.program = response;
                }
            } catch (error) {
                if (error.status !== 404) {
                    this.error = error.message || 'Failed to load program';
                }
            } finally {
                this.loading = false;
            }
        },
    };
}
</script>
{% endblock %}