{% extends "base.html" %}
{% block title %}Subscription Payments{% endblock %}

{% block content %}
<div x-data="paymentAdmin()" x-init="init()" class="space-y-5">

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/admin/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div class="flex items-center gap-2">
                <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/>
                </svg>
                <h1 class="text-2xl font-bold text-white">Subscription Payments</h1>
            </div>
        </div>
        <button @click="loadPayments()" class="p-2 rounded-lg bg-gray-800 border border-gray-700 hover:border-koin-700 text-gray-400 hover:text-koin-400 transition" title="Refresh">
            <svg class="w-4 h-4" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
        </button>
    </div>

    <!-- Status filter tabs -->
    <div class="flex gap-2">
        <template x-for="s in ['pending', 'verified', 'rejected', 'all']" :key="s">
            <button @click="statusFilter = s; loadPayments()"
                    class="px-3 py-1.5 rounded-lg text-xs font-semibold transition capitalize"
                    :class="statusFilter === s
                        ? 'bg-koin-600 text-white'
                        : 'bg-gray-900 border border-gray-800 text-gray-400 hover:text-white'">
                <span x-text="s"></span>
                <span x-show="s === 'pending' && pendingCount > 0"
                      class="ml-1 px-1.5 py-0.5 text-[10px] bg-red-600 text-white rounded-full" x-text="pendingCount"></span>
            </button>
        </template>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="text-center py-10">
        <div class="animate-spin w-8 h-8 border-2 border-koin-400 border-t-transparent rounded-full mx-auto"></div>
    </div>

    <!-- Payments list -->
    <div x-show="!loading" class="space-y-3">
        <template x-for="p in payments" :key="p.id">
            <div class="bg-gray-900 border rounded-xl p-4"
                 :class="p.status === 'pending' ? 'border-amber-700/50' : 'border-gray-800'">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <!-- Left: user + tier info -->
                    <div class="space-y-1">
                        <div class="flex items-center gap-2">
                            <span class="text-white font-semibold" x-text="p.username || 'User #' + p.user_id"></span>
                            <span class="text-xs px-1.5 py-0.5 rounded font-bold uppercase"
                                  :class="{
                                      'bg-amber-900/60 text-amber-300': p.status === 'pending',
                                      'bg-emerald-900/60 text-emerald-300': p.status === 'verified',
                                      'bg-red-900/60 text-red-300': p.status === 'rejected',
                                  }" x-text="p.status"></span>
                        </div>
                        <div class="text-sm text-gray-400">
                            <span x-text="p.from_tier" class="uppercase"></span>
                            <span class="text-gray-600">&rarr;</span>
                            <span x-text="p.to_tier" class="uppercase text-koin-400 font-semibold"></span>
                            <span class="text-gray-600">&middot;</span>
                            <span x-text="p.billing_cycle"></span>
                        </div>
                        <div class="text-xs text-gray-600">
                            ID: #<span x-text="p.id"></span>
                            &middot; <span x-text="timeAgo(p.created_at)"></span>
                            <template x-if="p.expires_at">
                                <span>
                                    &middot; Expires: <span x-text="new Date(p.expires_at).toLocaleDateString('id-ID')"></span>
                                </span>
                            </template>
                        </div>
                    </div>

                    <!-- Right: amount -->
                    <div class="text-right">
                        <p class="text-lg font-bold text-koin-400">
                            Rp <span x-text="p.total_amount?.toLocaleString('id-ID')"></span>
                        </p>
                        <p class="text-xs text-gray-600">
                            Base: <span x-text="p.base_amount?.toLocaleString('id-ID')"></span>
                            + code: <span class="text-amber-400 font-mono" x-text="String(p.unique_code).padStart(3,'0')"></span>
                        </p>
                    </div>
                </div>

                <!-- Actions (only for pending) -->
                <div x-show="p.status === 'pending'" class="mt-3 pt-3 border-t border-gray-800 flex flex-wrap gap-2">
                    <button @click="approvePayment(p)"
                            :disabled="p._processing"
                            class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-semibold transition disabled:opacity-50 flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Approve &amp; Upgrade
                    </button>
                    <button @click="p._showReject = !p._showReject"
                            class="px-4 py-2 bg-gray-800 border border-gray-700 hover:border-red-700 text-gray-300 hover:text-red-400 rounded-lg text-sm transition flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                        </svg>
                        Reject
                    </button>

                    <!-- Reject reason -->
                    <div x-show="p._showReject" x-cloak class="w-full flex gap-2 mt-2">
                        <input type="text" x-model="p._rejectReason" placeholder="Alasan penolakan (opsional)"
                               class="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-white placeholder-gray-600 focus:border-red-500 focus:outline-none">
                        <button @click="rejectPayment(p)"
                                :disabled="p._processing"
                                class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white rounded-lg text-sm font-semibold transition disabled:opacity-50">
                            Confirm Reject
                        </button>
                    </div>
                </div>

                <!-- Verified/Rejected info -->
                <div x-show="p.status === 'verified' && p.verified_at" x-cloak class="mt-2 text-xs text-emerald-400">
                    Verified at <span x-text="new Date(p.verified_at).toLocaleString('id-ID')"></span>
                </div>
                <div x-show="p.status === 'rejected' && p.reject_reason" x-cloak class="mt-2 text-xs text-red-400">
                    Reason: <span x-text="p.reject_reason"></span>
                </div>

                <!-- Processing indicator -->
                <div x-show="p._processing" x-cloak class="mt-2 text-koin-400 text-sm flex items-center gap-2">
                    <div class="animate-spin w-4 h-4 border-2 border-koin-400 border-t-transparent rounded-full"></div>
                    Processing...
                </div>
            </div>
        </template>

        <!-- Empty state -->
        <div x-show="!loading && payments.length === 0" x-cloak class="text-center py-10 bg-gray-900 border border-gray-800 rounded-xl">
            <svg class="w-10 h-10 text-gray-700 mx-auto" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
            </svg>
            <p class="text-gray-500 mt-3" x-text="'Tidak ada payment ' + statusFilter"></p>
        </div>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="bg-red-900/30 border border-red-800 rounded-xl p-4 text-red-300 text-sm" x-text="error"></div>
</div>

<script>
function paymentAdmin() {
    return {
        loading: true,
        payments: [],
        statusFilter: 'pending',
        pendingCount: 0,
        error: '',

        async init() {
            await this.loadPayments();
        },

        async loadPayments() {
            this.loading = true;
            this.error = '';
            try {
                const r = await fetch('/api/v1/admin/tier/payments?status=' + this.statusFilter);
                const d = await r.json();
                this.payments = (d.payments || []).map(p => ({
                    ...p, _processing: false, _showReject: false, _rejectReason: ''
                }));
                // Also get pending count
                if (this.statusFilter !== 'pending') {
                    const r2 = await fetch('/api/v1/admin/tier/payments?status=pending');
                    const d2 = await r2.json();
                    this.pendingCount = (d2.payments || []).length;
                } else {
                    this.pendingCount = this.payments.length;
                }
            } catch(e) {
                this.error = 'Gagal memuat payments: ' + e.message;
            } finally {
                this.loading = false;
            }
        },

        async approvePayment(p) {
            if (p._processing) return;
            p._processing = true;
            try {
                const r = await fetch('/api/v1/admin/tier/payments/' + p.id + '/approve', {method: 'POST'});
                const d = await r.json();
                if (r.ok) {
                    p.status = 'verified';
                    p.verified_at = new Date().toISOString();
                    this.pendingCount = Math.max(0, this.pendingCount - 1);
                } else {
                    this.error = d.error || 'Approve gagal';
                }
            } catch(e) {
                this.error = 'Error: ' + e.message;
            } finally {
                p._processing = false;
            }
        },

        async rejectPayment(p) {
            if (p._processing) return;
            p._processing = true;
            try {
                const r = await fetch('/api/v1/admin/tier/payments/' + p.id + '/reject', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({reason: p._rejectReason || ''}),
                });
                const d = await r.json();
                if (r.ok) {
                    p.status = 'rejected';
                    p.reject_reason = p._rejectReason;
                    this.pendingCount = Math.max(0, this.pendingCount - 1);
                } else {
                    this.error = d.error || 'Reject gagal';
                }
            } catch(e) {
                this.error = 'Error: ' + e.message;
            } finally {
                p._processing = false;
            }
        },

        timeAgo(dateStr) {
            if (!dateStr) return '';
            const now = Date.now();
            const then = new Date(dateStr).getTime();
            const diff = Math.floor((now - then) / 1000);
            if (diff < 60) return diff + ' detik lalu';
            if (diff < 3600) return Math.floor(diff / 60) + ' menit lalu';
            if (diff < 86400) return Math.floor(diff / 3600) + ' jam lalu';
            return Math.floor(diff / 86400) + ' hari lalu';
        },
    }
}
</script>
{% endblock %}