{# app/modules/billing/templates/billing/merchant/subscriptions.html #}
{% extends "merchant/base.html" %}

{% block title %}My Subscriptions{% endblock %}

{% block content %}
<div x-data="merchantSubscriptions()">

    <!-- Page Header -->
    <div class="mb-8 mt-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My Subscriptions</h2>
        <p class="mt-1 text-gray-500 dark:text-gray-400">Manage your platform subscriptions and plans.</p>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
        <p class="text-sm text-red-800 dark:text-red-400" x-text="error"></p>
    </div>

    <!-- Subscriptions Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full whitespace-nowrap">
                <thead>
                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
                        <th class="px-6 py-3">Platform</th>
                        <th class="px-6 py-3">Tier</th>
                        <th class="px-6 py-3">Status</th>
                        <th class="px-6 py-3">Period End</th>
                        <th class="px-6 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    <!-- Loading -->
                    <template x-if="loading">
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                <svg class="inline w-5 h-5 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                </svg>
                                Loading subscriptions...
                            </td>
                        </tr>
                    </template>

                    <!-- Empty -->
                    <template x-if="!loading && subscriptions.length === 0">
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                No subscriptions found.
                            </td>
                        </tr>
                    </template>

                    <!-- Rows -->
                    <template x-for="sub in subscriptions" :key="sub.id">
                        <tr class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4">
                                <p class="font-semibold text-gray-900 dark:text-gray-100" x-text="sub.platform_name"></p>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 text-xs font-semibold rounded-full"
                                      :class="{
                                          'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400': sub.tier === 'essential',
                                          'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400': sub.tier === 'professional',
                                          'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400': sub.tier === 'business',
                                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400': sub.tier === 'enterprise'
                                      }"
                                      x-text="sub.tier.charAt(0).toUpperCase() + sub.tier.slice(1)"></span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 text-xs font-semibold rounded-full"
                                      :class="{
                                          'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400': sub.status === 'active',
                                          'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400': sub.status === 'trial',
                                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400': sub.status === 'past_due',
                                          'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400': sub.status === 'cancelled',
                                          'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': sub.status === 'expired'
                                      }"
                                      x-text="sub.status.replace('_', ' ').toUpperCase()"></span>
                            </td>
                            <td class="px-6 py-4 text-sm" x-text="formatDate(sub.period_end)"></td>
                            <td class="px-6 py-4 text-right">
                                <a :href="'/merchants/billing/subscriptions/' + sub.platform_id"
                                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
                                    View Details
                                </a>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_scripts %}
<script>
function merchantSubscriptions() {
    return {
        loading: true,
        error: null,
        subscriptions: [],

        init() {
            this.loadSubscriptions();
        },

        async loadSubscriptions() {
            try {
                const data = await apiClient.get('/merchants/billing/subscriptions');
                this.subscriptions = data.subscriptions || data.items || [];
            } catch (err) {
                console.error('Error loading subscriptions:', err);
                this.error = 'Failed to load subscriptions. Please try again.';
            } finally {
                this.loading = false;
            }
        },

        formatDate(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
        }
    };
}
</script>
{% endblock %}