{% extends "base.html" %}
{% block title %}Upgrade Tier{% endblock %}

{% block content %}
<div x-data="upgradePanel()" x-init="init()" class="max-w-4xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex items-center gap-3">
        <a href="{{ tools_base }}/" 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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
            </svg>
            <h1 class="text-2xl font-bold text-white">Upgrade Langganan</h1>
        </div>
    </div>

    <!-- Lock Banner (shown when coming from a locked feature) -->
    {% if feature_slug %}
    <div class="bg-gray-900 border border-amber-700/50 rounded-xl p-5">
        <div class="flex items-start gap-3">
            <div class="p-2 bg-amber-900/30 rounded-lg">
                <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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
                </svg>
            </div>
            <div>
                <h2 class="text-lg font-semibold text-white">
                    Fitur "{{ feature_label }}" Memerlukan Tier {{ required_tier|title }}
                </h2>
                <p class="text-gray-400 text-sm mt-1">
                    Kamu saat ini berada di tier <span class="font-semibold text-koin-400">{{ current_tier|title }}</span>.
                    Upgrade untuk mengakses fitur ini dan {{ 'ratusan' if required_tier == 'ultimate' else 'puluhan' }} fitur premium lainnya.
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Billing Toggle -->
    <div class="flex items-center justify-center gap-3">
        <span class="text-sm" :class="billing === 'monthly' ? 'text-white font-semibold' : 'text-gray-500'">Bulanan</span>
        <button @click="billing = billing === 'monthly' ? 'yearly' : 'monthly'"
                class="relative w-14 h-7 rounded-full transition-colors"
                :class="billing === 'yearly' ? 'bg-koin-600' : 'bg-gray-700'">
            <span class="absolute top-0.5 w-6 h-6 rounded-full bg-white shadow transition-transform"
                  :class="billing === 'yearly' ? 'translate-x-7' : 'translate-x-0.5'"></span>
        </button>
        <span class="text-sm" :class="billing === 'yearly' ? 'text-white font-semibold' : 'text-gray-500'">
            Tahunan
            <span class="ml-1 text-xs text-emerald-400 font-semibold">Hemat ~17%</span>
        </span>
    </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>
        <p class="text-gray-500 text-sm mt-3">Memuat harga...</p>
    </div>

    <!-- Pricing Cards -->
    <div x-show="!loading && !selectedTier" x-cloak class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <template x-for="tier in tiers" :key="tier.tier">
            <div class="bg-gray-900 border rounded-xl p-5 cursor-pointer transition-all hover:border-koin-500 hover:-translate-y-1"
                 :class="tier.tier === 'pro' ? 'border-koin-500 ring-1 ring-koin-500/30' : 'border-gray-800'"
                 @click="selectTier(tier)">
                <!-- Popular badge -->
                <div x-show="tier.tier === 'pro'" class="text-center mb-3">
                    <span class="text-xs font-bold text-koin-400 bg-koin-900/40 px-3 py-1 rounded-full uppercase tracking-wider">
                        Populer
                    </span>
                </div>

                <h3 class="text-lg font-bold text-white text-center" x-text="tier.label"></h3>
                <p class="text-gray-500 text-sm text-center mt-1" x-text="tier.description"></p>

                <!-- Price -->
                <div class="text-center mt-4">
                    <template x-if="billing === 'monthly'">
                        <div>
                            <span class="text-3xl font-bold text-white" x-text="formatRp(tier.upgrade_monthly)"></span>
                            <span class="text-gray-500 text-sm">/bulan</span>
                        </div>
                    </template>
                    <template x-if="billing === 'yearly'">
                        <div>
                            <span class="text-3xl font-bold text-white" x-text="formatRp(tier.upgrade_yearly)"></span>
                            <span class="text-gray-500 text-sm">/tahun</span>
                            <p class="text-xs text-emerald-400 mt-1" x-text="'= ' + formatRp(Math.round(tier.upgrade_yearly / 12)) + '/bulan'"></p>
                        </div>
                    </template>
                </div>

                <!-- CTA -->
                <button class="w-full mt-5 py-2.5 rounded-lg font-semibold transition"
                        :class="tier.tier === 'pro'
                            ? 'bg-koin-600 hover:bg-koin-500 text-white'
                            : 'bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-700'">
                    Pilih <span x-text="tier.label"></span>
                </button>
            </div>
        </template>
    </div>

    <!-- No tiers available -->
    <div x-show="!loading && tiers.length === 0 && !selectedTier" x-cloak
         class="bg-gray-900 border border-gray-800 rounded-xl p-8 text-center">
        <svg class="w-12 h-12 text-emerald-400 mx-auto" 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>
        <p class="text-white font-semibold mt-3">Kamu sudah di tier tertinggi!</p>
        <p class="text-gray-500 text-sm mt-1">Semua fitur sudah terbuka untukmu.</p>
    </div>

    <!-- ═══ PAYMENT SECTION (shown after selecting tier) ═══ -->
    <div x-show="selectedTier && !paymentCreated" x-cloak class="space-y-4">
        <!-- Back to pricing -->
        <button @click="selectedTier = null" class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
            <svg class="w-4 h-4" 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>
            Kembali ke pilihan tier
        </button>

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-5">
            <h2 class="text-lg font-bold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-koin-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>
                Detail Pembayaran
            </h2>

            <!-- Summary -->
            <div class="bg-gray-800/50 rounded-lg p-4 space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-400">Upgrade</span>
                    <span class="text-white">
                        <span x-text="currentTier"></span> &rarr; <span class="font-semibold text-koin-400" x-text="selectedTier.label"></span>
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Periode</span>
                    <span class="text-white" x-text="billing === 'monthly' ? 'Bulanan' : 'Tahunan'"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Harga</span>
                    <span class="text-white" x-text="formatRp(getPrice()) + (billing === 'monthly' ? '/bulan' : '/tahun')"></span>
                </div>
            </div>

            <!-- QRIS Image -->
            <div x-show="qrisUrl" class="text-center space-y-3">
                <p class="text-gray-300 text-sm font-semibold">Scan QRIS untuk pembayaran:</p>
                <img :src="qrisUrl" alt="QRIS" class="mx-auto max-w-[250px] rounded-lg border border-gray-700">
            </div>

            <!-- Transfer Amount (bold, prominent) -->
            <div class="bg-gray-800 border border-koin-700/50 rounded-lg p-4 text-center">
                <p class="text-gray-400 text-sm mb-2">Transfer tepat sebesar:</p>
                <p class="text-3xl font-bold text-koin-400" x-text="'Rp ' + formatRp(getPrice())"></p>
                <p class="text-gray-500 text-xs mt-2">
                    3 digit terakhir adalah kode unik untuk verifikasi otomatis
                </p>
            </div>

            <!-- Confirm Button -->
            <button @click="createPayment()"
                    :disabled="submitting"
                    class="w-full py-3 rounded-lg font-semibold transition bg-koin-600 hover:bg-koin-500 text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                <div x-show="submitting" class="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div>
                <span x-text="submitting ? 'Memproses...' : 'Saya Sudah Transfer'"></span>
            </button>

            <p class="text-gray-600 text-xs text-center">
                Setelah klik, admin akan memverifikasi pembayaranmu (biasanya &lt;24 jam).
            </p>
        </div>
    </div>

    <!-- ═══ PAYMENT SUBMITTED (waiting for admin verification) ═══ -->
    <div x-show="paymentCreated" x-cloak class="space-y-4">
        <div class="bg-gray-900 border border-emerald-700/50 rounded-xl p-6 text-center space-y-4">
            <div class="w-16 h-16 bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto">
                <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold text-white">Pembayaran Sedang Diverifikasi</h2>
            <p class="text-gray-400 text-sm max-w-md mx-auto">
                Admin akan memeriksa transfermu dan melakukan upgrade tier.
                Proses biasanya selesai dalam <span class="text-white font-semibold">&lt;24 jam</span>.
            </p>

            <div class="bg-gray-800/50 rounded-lg p-4 text-sm space-y-2 max-w-sm mx-auto">
                <div class="flex justify-between">
                    <span class="text-gray-400">ID Pembayaran</span>
                    <span class="text-white font-mono" x-text="'#' + paymentId"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Total Transfer</span>
                    <span class="text-koin-400 font-semibold" x-text="'Rp ' + formatRp(paymentTotal)"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Status</span>
                    <span class="text-amber-400 font-semibold" x-text="paymentStatus"></span>
                </div>
            </div>

            <div class="flex gap-3 justify-center pt-2">
                <a href="{{ tools_base }}/"
                   class="px-5 py-2 rounded-lg bg-gray-800 border border-gray-700 hover:border-gray-600 text-gray-300 text-sm transition">
                    Kembali ke Tools
                </a>
                <button @click="checkStatus()"
                        class="px-5 py-2 rounded-lg bg-koin-600 hover:bg-koin-500 text-white text-sm font-semibold transition flex items-center gap-2">
                    <svg class="w-4 h-4" :class="polling && '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>
                    Cek Status
                </button>
            </div>
        </div>

        <!-- Status changed notification -->
        <div x-show="paymentStatus === 'verified'" x-cloak
             class="bg-emerald-900/30 border border-emerald-700/50 rounded-xl p-5 text-center">
            <svg class="w-10 h-10 text-emerald-400 mx-auto" 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>
            <p class="text-emerald-400 font-bold text-lg mt-2">Upgrade Berhasil!</p>
            <p class="text-gray-300 text-sm mt-1">Tiermu sudah diupgrade. Refresh halaman untuk mengakses semua fitur.</p>
            <a href="{{ tools_base }}/" class="inline-block mt-3 px-5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg font-semibold text-sm transition">
                Mulai Gunakan Fitur
            </a>
        </div>

        <div x-show="paymentStatus === 'rejected'" x-cloak
             class="bg-red-900/30 border border-red-700/50 rounded-xl p-5 text-center">
            <svg class="w-10 h-10 text-red-400 mx-auto" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
            </svg>
            <p class="text-red-400 font-bold text-lg mt-2">Pembayaran Ditolak</p>
            <p class="text-gray-300 text-sm mt-1" x-text="rejectReason || 'Silakan hubungi admin untuk informasi lebih lanjut.'"></p>
            <button @click="paymentCreated = false; selectedTier = null; paymentId = null"
                    class="mt-3 px-5 py-2 bg-gray-800 border border-gray-700 hover:border-gray-600 text-gray-300 rounded-lg text-sm transition">
                Coba Lagi
            </button>
        </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 upgradePanel() {
    return {
        loading: true,
        billing: 'monthly',
        tiers: [],
        qrisUrl: '',
        currentTier: '{{ current_tier|default("free") }}',
        selectedTier: null,
        submitting: false,
        paymentCreated: false,
        paymentId: null,
        paymentTotal: 0,
        paymentStatus: 'pending',
        rejectReason: '',
        polling: false,
        error: '',

        async init() {
            try {
                const r = await fetch('/api/v1/subscription/pricing');
                const d = await r.json();
                this.tiers = d.available_tiers || [];
                this.qrisUrl = d.qris_url || '';
                this.currentTier = d.current_tier || 'free';
            } catch (e) {
                this.error = 'Gagal memuat harga: ' + e.message;
            } finally {
                this.loading = false;
            }
        },

        selectTier(tier) {
            this.selectedTier = tier;
            this.error = '';
        },

        getPrice() {
            if (!this.selectedTier) return 0;
            return this.billing === 'monthly'
                ? this.selectedTier.upgrade_monthly
                : this.selectedTier.upgrade_yearly;
        },

        formatRp(n) {
            if (n == null) return '0';
            return Number(n).toLocaleString('id-ID');
        },

        async createPayment() {
            if (this.submitting || !this.selectedTier) return;
            this.submitting = true;
            this.error = '';

            try {
                const r = await fetch('/api/v1/subscription/upgrade-request', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        to_tier: this.selectedTier.tier,
                        billing_cycle: this.billing,
                    }),
                });
                const d = await r.json();
                if (!r.ok) {
                    this.error = d.error || 'Gagal membuat permintaan upgrade';
                    return;
                }
                this.paymentCreated = true;
                this.paymentId = d.payment_id;
                this.paymentTotal = d.total_amount;
                this.paymentStatus = 'pending';
            } catch (e) {
                this.error = 'Gagal: ' + e.message;
            } finally {
                this.submitting = false;
            }
        },

        async checkStatus() {
            if (!this.paymentId || this.polling) return;
            this.polling = true;
            try {
                const r = await fetch('/api/v1/subscription/payment-status/' + this.paymentId);
                const d = await r.json();
                this.paymentStatus = d.status || 'pending';
                this.rejectReason = d.reject_reason || '';
            } catch (e) {
                console.error('Status check failed:', e);
            } finally {
                this.polling = false;
            }
        },
    }
}
</script>
{% endblock %}