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

{% block content %}
<div x-data="tierManagement()" 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="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <h1 class="text-2xl font-bold text-white">Tier Management</h1>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="flex border-b border-gray-800 gap-1">
        <button @click="tab = 'features'" class="px-4 py-2.5 text-sm font-semibold transition rounded-t-lg"
                :class="tab === 'features' ? 'text-koin-400 border-b-2 border-koin-400 bg-gray-900' : 'text-gray-500 hover:text-gray-300'">
            Feature Tiers
        </button>
        <button @click="tab = 'pricing'" class="px-4 py-2.5 text-sm font-semibold transition rounded-t-lg"
                :class="tab === 'pricing' ? 'text-koin-400 border-b-2 border-koin-400 bg-gray-900' : 'text-gray-500 hover:text-gray-300'">
            Pricing
        </button>
        <button @click="tab = 'qris'" class="px-4 py-2.5 text-sm font-semibold transition rounded-t-lg"
                :class="tab === 'qris' ? 'text-koin-400 border-b-2 border-koin-400 bg-gray-900' : 'text-gray-500 hover:text-gray-300'">
            QRIS
        </button>
    </div>

    <!-- ═══ TAB 1: Feature Tier Mapping ═══ -->
    <div x-show="tab === 'features'" class="space-y-4">
        <!-- Bulk actions -->
        <div class="flex flex-wrap gap-2 items-center text-sm">
            <span class="text-gray-400">Bulk set wave</span>
            <input type="number" x-model.number="bulkWave" min="1" max="22" placeholder="Wave"
                   class="w-20 px-2 py-1.5 bg-gray-900 border border-gray-700 rounded text-white text-sm">
            <span class="text-gray-400">ke tier</span>
            <select x-model="bulkTier" class="px-2 py-1.5 bg-gray-900 border border-gray-700 rounded text-white text-sm">
                <option value="free">Free</option>
                <option value="starter">Starter</option>
                <option value="pro">Pro</option>
                <option value="ultimate">Ultimate</option>
            </select>
            <button @click="bulkUpdate()" class="px-3 py-1.5 bg-koin-600 hover:bg-koin-500 text-white rounded text-sm font-semibold">
                Apply
            </button>
            <span x-show="bulkMsg" x-text="bulkMsg" class="text-emerald-400 text-xs ml-2" x-cloak></span>
        </div>

        <!-- Search -->
        <div class="relative">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" x-model="featureSearch" placeholder="Cari feature..."
                   class="w-full max-w-sm pl-10 pr-4 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-600 focus:border-koin-500 focus:outline-none">
        </div>

        <!-- Features table -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-800 text-gray-500 text-xs uppercase">
                            <th class="px-4 py-3 text-left">Feature</th>
                            <th class="px-4 py-3 text-left">Category</th>
                            <th class="px-4 py-3 text-center">Wave</th>
                            <th class="px-4 py-3 text-center">Min Tier</th>
                            <th class="px-4 py-3 text-center">Active</th>
                            <th class="px-4 py-3 text-center">Save</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="feat in filteredFeatures" :key="feat.feature_slug">
                            <tr class="border-b border-gray-800/50 hover:bg-gray-800/30">
                                <td class="px-4 py-2.5">
                                    <span class="text-white font-medium" x-text="feat.feature_label"></span>
                                    <span class="text-gray-600 text-xs ml-1" x-text="feat.feature_slug"></span>
                                </td>
                                <td class="px-4 py-2.5 text-gray-400 capitalize" x-text="feat.category"></td>
                                <td class="px-4 py-2.5 text-center text-gray-400" x-text="feat.wave"></td>
                                <td class="px-4 py-2.5 text-center">
                                    <select :value="feat.min_tier" @change="feat._newTier = $event.target.value; feat._dirty = true"
                                            class="px-2 py-1 bg-gray-800 border border-gray-700 rounded text-xs text-white">
                                        <option value="free">Free</option>
                                        <option value="starter">Starter</option>
                                        <option value="pro">Pro</option>
                                        <option value="ultimate">Ultimate</option>
                                    </select>
                                </td>
                                <td class="px-4 py-2.5 text-center">
                                    <span :class="feat.is_active ? 'text-emerald-400' : 'text-red-400'" x-text="feat.is_active ? 'Yes' : 'No'"></span>
                                </td>
                                <td class="px-4 py-2.5 text-center">
                                    <button x-show="feat._dirty" @click="saveFeature(feat)"
                                            class="px-2 py-1 bg-koin-600 hover:bg-koin-500 text-white rounded text-xs font-semibold">
                                        Save
                                    </button>
                                    <span x-show="feat._saved" x-cloak class="text-emerald-400 text-xs">&#10003;</span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
        <p class="text-gray-600 text-xs" x-text="features.length + ' features total'"></p>
    </div>

    <!-- ═══ TAB 2: Pricing ═══ -->
    <div x-show="tab === 'pricing'" x-cloak class="space-y-4">
        <template x-for="tp in pricing" :key="tp.tier">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-bold text-white" x-text="tp.label"></h3>
                    <span class="text-xs font-bold uppercase px-2 py-1 rounded"
                          :class="{
                              'bg-sky-900/60 text-sky-300': tp.tier === 'starter',
                              'bg-violet-900/60 text-violet-300': tp.tier === 'pro',
                              'bg-amber-900/60 text-amber-300': tp.tier === 'ultimate',
                          }" x-text="tp.tier"></span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">Harga Bulanan (IDR)</label>
                        <input type="number" :value="tp.price_monthly_idr" @input="tp._monthly = +$event.target.value; tp._dirty = true"
                               class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-koin-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">Harga Tahunan (IDR)</label>
                        <input type="number" :value="tp.price_yearly_idr" @input="tp._yearly = +$event.target.value; tp._dirty = true"
                               class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-koin-500 focus:outline-none">
                    </div>
                </div>

                <div>
                    <label class="block text-xs text-gray-500 mb-1">Label</label>
                    <input type="text" :value="tp.label" @input="tp._label = $event.target.value; tp._dirty = true"
                           class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Deskripsi</label>
                    <input type="text" :value="tp.description" @input="tp._desc = $event.target.value; tp._dirty = true"
                           class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-koin-500 focus:outline-none">
                </div>

                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">
                        Bulanan: <span class="text-white" x-text="'Rp ' + (tp._monthly || tp.price_monthly_idr).toLocaleString('id-ID')"></span>
                        &middot; Tahunan: <span class="text-white" x-text="'Rp ' + (tp._yearly || tp.price_yearly_idr).toLocaleString('id-ID')"></span>
                    </span>
                    <button x-show="tp._dirty" @click="savePricing(tp)"
                            class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white rounded-lg text-sm font-semibold transition">
                        Save
                    </button>
                    <span x-show="tp._saved" x-cloak class="text-emerald-400 text-sm font-semibold">Saved &#10003;</span>
                </div>
            </div>
        </template>
    </div>

    <!-- ═══ TAB 3: QRIS Upload ═══ -->
    <div x-show="tab === 'qris'" x-cloak class="space-y-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-5">
            <h3 class="text-lg font-bold text-white">QRIS Payment Image</h3>
            <p class="text-gray-400 text-sm">Upload gambar QRIS yang akan ditampilkan di halaman upgrade pembayaran.</p>

            <!-- Current QRIS preview -->
            <div x-show="qrisUrl" class="text-center space-y-2">
                <p class="text-gray-500 text-xs uppercase tracking-wider">QRIS Saat Ini</p>
                <img :src="qrisUrl" alt="QRIS" class="mx-auto max-w-[300px] rounded-lg border border-gray-700">
            </div>
            <div x-show="!qrisUrl" class="text-center py-6 border-2 border-dashed 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="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/>
                </svg>
                <p class="text-gray-600 text-sm mt-2">Belum ada QRIS diupload</p>
            </div>

            <!-- Upload form -->
            <div>
                <label class="block text-xs text-gray-500 mb-2">Upload QRIS baru (PNG, JPG, WebP)</label>
                <input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadQris($event)"
                       class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-koin-600 file:text-white hover:file:bg-koin-500">
            </div>

            <div x-show="qrisUploading" class="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>
                Uploading...
            </div>
            <div x-show="qrisMsg" x-text="qrisMsg" class="text-sm"
                 :class="qrisMsgType === 'ok' ? 'text-emerald-400' : 'text-red-400'"></div>
        </div>
    </div>

    <!-- Global 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 tierManagement() {
    return {
        tab: 'features',
        features: [],
        pricing: [],
        qrisUrl: '',
        featureSearch: '',
        bulkWave: '',
        bulkTier: 'starter',
        bulkMsg: '',
        qrisUploading: false,
        qrisMsg: '',
        qrisMsgType: '',
        error: '',

        get filteredFeatures() {
            if (!this.featureSearch) return this.features;
            const q = this.featureSearch.toLowerCase();
            return this.features.filter(f =>
                f.feature_slug.includes(q) || f.feature_label.toLowerCase().includes(q)
            );
        },

        async init() {
            await Promise.all([this.loadFeatures(), this.loadPricing(), this.loadQris()]);
        },

        async loadFeatures() {
            try {
                const r = await fetch('/api/v1/admin/tier/features');
                const d = await r.json();
                this.features = (d.features || []).map(f => ({...f, _dirty: false, _saved: false, _newTier: f.min_tier}));
            } catch(e) { this.error = 'Gagal memuat features'; }
        },

        async loadPricing() {
            try {
                const r = await fetch('/api/v1/admin/tier/pricing');
                const d = await r.json();
                this.pricing = (d.pricing || []).map(p => ({...p, _dirty: false, _saved: false}));
            } catch(e) { this.error = 'Gagal memuat pricing'; }
        },

        async loadQris() {
            try {
                const r = await fetch('/api/v1/admin/tier/qris');
                const d = await r.json();
                this.qrisUrl = d.qris_url || '';
            } catch(e) {}
        },

        async saveFeature(feat) {
            try {
                const r = await fetch('/api/v1/admin/tier/features/' + feat.feature_slug, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({min_tier: feat._newTier}),
                });
                if (r.ok) {
                    feat.min_tier = feat._newTier;
                    feat._dirty = false;
                    feat._saved = true;
                    setTimeout(() => feat._saved = false, 2000);
                }
            } catch(e) { this.error = 'Gagal menyimpan'; }
        },

        async bulkUpdate() {
            if (!this.bulkWave || !this.bulkTier) return;
            const updates = this.features
                .filter(f => f.wave === this.bulkWave)
                .map(f => ({slug: f.feature_slug, min_tier: this.bulkTier}));
            if (!updates.length) { this.bulkMsg = 'No features in wave ' + this.bulkWave; return; }
            try {
                const r = await fetch('/api/v1/admin/tier/features/bulk', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({updates}),
                });
                const d = await r.json();
                this.bulkMsg = `Updated ${d.updated} features`;
                await this.loadFeatures();
                setTimeout(() => this.bulkMsg = '', 3000);
            } catch(e) { this.error = 'Bulk update gagal'; }
        },

        async savePricing(tp) {
            const body = {};
            if (tp._monthly != null) body.price_monthly_idr = tp._monthly;
            if (tp._yearly != null) body.price_yearly_idr = tp._yearly;
            if (tp._label) body.label = tp._label;
            if (tp._desc) body.description = tp._desc;
            try {
                const r = await fetch('/api/v1/admin/tier/pricing/' + tp.tier, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(body),
                });
                if (r.ok) {
                    const d = await r.json();
                    Object.assign(tp, d, {_dirty: false, _saved: true});
                    setTimeout(() => tp._saved = false, 2000);
                }
            } catch(e) { this.error = 'Gagal menyimpan pricing'; }
        },

        async uploadQris(evt) {
            const file = evt.target.files?.[0];
            if (!file) return;
            this.qrisUploading = true;
            this.qrisMsg = '';
            const fd = new FormData();
            fd.append('qris', file);
            try {
                const r = await fetch('/api/v1/admin/tier/qris', {method: 'POST', body: fd});
                const d = await r.json();
                if (r.ok) {
                    this.qrisUrl = d.qris_url + '?t=' + Date.now();
                    this.qrisMsg = 'QRIS berhasil diupload!';
                    this.qrisMsgType = 'ok';
                } else {
                    this.qrisMsg = d.error || 'Upload gagal';
                    this.qrisMsgType = 'err';
                }
            } catch(e) {
                this.qrisMsg = 'Upload error: ' + e.message;
                this.qrisMsgType = 'err';
            } finally {
                this.qrisUploading = false;
            }
        },
    }
}
</script>
{% endblock %}