{# app/modules/loyalty/templates/loyalty/store/analytics.html #}
{% extends "store/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.store.analytics.title') }}{% endblock %}

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

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

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

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

<!-- No Program Setup Notice -->
<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('exclamation-triangle', '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.common.program_not_setup') }}</h3>
            <p class="mt-1 text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.common.program_not_setup_desc') }}</p>
            {% if user.role == 'merchant_owner' %}
            <a href="/store/{{ store_code }}/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('cog', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.common.setup_program') }}
            </a>
            {% else %}
            <p class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.common.contact_admin_setup') }}</p>
            {% endif %}
        </div>
    </div>
</div>

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

    <!-- Advanced Analytics Charts -->
    <div class="grid gap-6 md:grid-cols-2 mb-6">
        <!-- Revenue Chart -->
        <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('chart-bar', 'inline w-5 h-5 mr-2')"></span>
                {{ _('loyalty.store.analytics.revenue_title') }}
            </h3>
            <div x-show="revenueData.monthly.length > 0" style="height: 250px;">
                <canvas id="revenueChart"></canvas>
            </div>
            <p x-show="revenueData.monthly.length === 0" class="text-sm text-gray-500 dark:text-gray-400 py-8 text-center">
                {{ _('loyalty.store.analytics.no_data_yet') }}
            </p>
        </div>

        <!-- Churn / At-Risk Cards -->
        <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('exclamation-triangle', 'inline w-5 h-5 mr-2')"></span>
                {{ _('loyalty.store.analytics.at_risk_title') }}
            </h3>
            <div x-show="churnData.at_risk_count > 0">
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
                    <span class="text-2xl font-bold text-orange-600" x-text="churnData.at_risk_count"></span>
                    {{ _('loyalty.store.analytics.cards_at_risk') }}
                </p>
                <div class="space-y-2 max-h-48 overflow-y-auto">
                    <template x-for="card in churnData.cards?.slice(0, 10)" :key="card.card_id">
                        <div class="flex items-center justify-between text-sm py-1 border-b border-gray-100 dark:border-gray-700">
                            <span class="text-gray-700 dark:text-gray-300" x-text="card.customer_name || card.card_number"></span>
                            <span class="text-orange-600 font-medium" x-text="card.days_inactive + 'd inactive'"></span>
                        </div>
                    </template>
                </div>
            </div>
            <p x-show="churnData.at_risk_count === 0" class="text-sm text-green-600 dark:text-green-400 py-8 text-center">
                {{ _('loyalty.store.analytics.no_at_risk') }}
            </p>
        </div>
    </div>

    <!-- Cohort Retention -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800 mb-6">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('table-cells', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.store.analytics.cohort_title') }}
        </h3>
        <div x-show="cohortData.cohorts?.length > 0" class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr>
                        <th class="px-3 py-2 text-left text-gray-600 dark:text-gray-400">{{ _('loyalty.store.analytics.cohort_month') }}</th>
                        <th class="px-3 py-2 text-center text-gray-600 dark:text-gray-400">{{ _('loyalty.store.analytics.cohort_enrolled') }}</th>
                        <template x-for="(_, i) in Array(6)" :key="i">
                            <th class="px-3 py-2 text-center text-gray-600 dark:text-gray-400" x-text="'M' + i"></th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="cohort in cohortData.cohorts" :key="cohort.month">
                        <tr class="border-t border-gray-100 dark:border-gray-700">
                            <td class="px-3 py-2 font-medium text-gray-900 dark:text-white" x-text="cohort.month"></td>
                            <td class="px-3 py-2 text-center text-gray-600 dark:text-gray-400" x-text="cohort.enrolled"></td>
                            <template x-for="(pct, i) in cohort.retention.slice(0, 6)" :key="i">
                                <td class="px-3 py-2 text-center">
                                    <span class="inline-block px-2 py-1 rounded text-xs font-medium"
                                          :class="pct >= 60 ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : pct >= 30 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'"
                                          x-text="pct + '%'"></span>
                                </td>
                            </template>
                            <template x-for="i in Math.max(0, 6 - cohort.retention.length)" :key="'empty-' + i">
                                <td class="px-3 py-2 text-center text-gray-300">-</td>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <p x-show="!cohortData.cohorts?.length" class="text-sm text-gray-500 dark:text-gray-400 py-8 text-center">
            {{ _('loyalty.store.analytics.no_data_yet') }}
        </p>
    </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.store.analytics.quick_actions') }}</h3>
        <div class="flex flex-wrap gap-3">
            <a href="/store/{{ store_code }}/loyalty/terminal"
               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('device-tablet', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.store.analytics.open_terminal') }}
            </a>
            <a href="/store/{{ store_code }}/loyalty/cards"
               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('users', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.store.analytics.view_members') }}
            </a>
            <a href="/store/{{ store_code }}/loyalty/program"
               class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600">
                <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.store.analytics.view_program') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script defer src="{{ url_for('loyalty_static', path='store/js/loyalty-analytics.js') }}"></script>
{% endblock %}