@extends('layouts.app')

@section('immersive', '1')

@push('styles')
<style>
.inv-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.inv-back{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);text-decoration:none}

.inv-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:'Inter',sans-serif}
.inv-btn{
    padding:12px;font-size:14px;font-weight:600;border-radius:var(--r-lg);border:none;
    cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
    gap:6px;text-decoration:none;transition:opacity 140ms,transform 80ms;
}
.inv-btn:active{transform:scale(.97)}
.inv-btn-check{background:var(--accent);color:#fff}
.inv-btn-check:hover{background:var(--accent-d)}
.inv-btn-cancel{background:var(--elevated);color:var(--text2);border:1px solid var(--border2)}
.inv-btn-cancel:hover{background:var(--overlay)}
.inv-btn-full{grid-column:1 / -1;background:var(--accent);color:#fff}
.inv-btn-full:hover{background:var(--accent-d)}

/* ── Animasi masuk struk ─────────────────────────────────────── */
@keyframes invFadeUp{
    from{opacity:0;transform:translateY(14px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes invFadeIn{
    from{opacity:0}
    to{opacity:1}
}
.inv-enter{animation:invFadeUp .45s cubic-bezier(.22,1,.36,1) both}
.inv-enter-delay{animation:invFadeIn .4s ease both;animation-delay:.15s}

/* ── Skeleton sekilas sebelum struk tampil ──────────────────── */
@keyframes invShimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
.inv-skeleton{
    border-radius:var(--r-xl);overflow:hidden;height:320px;margin-bottom:14px;
    background:linear-gradient(110deg,var(--elevated) 35%,var(--overlay) 50%,var(--elevated) 65%);
    background-size:200% 100%;animation:invShimmer 1.4s ease-in-out infinite;
    border:1px solid var(--border);
}

/* ── Indikator polling ─────────────────────────────────────── */
.inv-poll-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
    color:var(--warning);background:var(--warning-l);border:1px solid rgba(245,158,11,.2);
    border-radius:20px;padding:5px 12px;margin:10px auto 14px;width:max-content;
    font-family:'Inter',sans-serif;
}
.inv-poll-dot{width:6px;height:6px;border-radius:50%;background:var(--warning);animation:invPollPulse 1.4s ease-in-out infinite}
@keyframes invPollPulse{
    0%,100%{opacity:.3;transform:scale(.8)}
    50%{opacity:1;transform:scale(1.1)}
}
.inv-poll-badge.checking .inv-poll-dot{animation-duration:.5s}

/* ── Panel pembayaran ───────────────────────────────────────── */
.pay-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:14px;text-align:center}
.pay-timer{font-size:12px;color:var(--warning);margin-bottom:8px}
.pay-total{font-size:12px;color:var(--muted);margin-bottom:12px}
.pay-total b{display:block;font-size:22px;color:var(--text);margin-top:2px}
.pay-total span{font-size:11px}
.pay-qr{background:#fff;border-radius:12px;padding:10px;display:inline-block}
.pay-qr img{width:210px;height:210px;max-width:100%;display:block}
.pay-hint{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:8px}
.pay-va{background:var(--elevated);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-top:8px;text-align:left}
.pay-va-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.pay-va-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pay-va-row span{font-family:ui-monospace,monospace;font-size:16px;font-weight:700;color:var(--text);word-break:break-all}
.pay-copy{border:none;background:var(--accent-l);color:var(--accent);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0}

@media (prefers-reduced-motion: reduce) {
    .inv-enter, .inv-enter-delay, .inv-skeleton, .inv-poll-dot { animation: none !important; }
}
</style>
@endpush

@section('content')

@include('partials.app-bar', ['back' => auth()->check() ? route('topup.history') : route('home')])

<div class="inv-head">
    @auth
    <a href="{{ route('topup.history') }}" class="inv-back">
        <i class="fas fa-arrow-left" style="font-size:10px"></i> Riwayat Top Up
    </a>
    @else
    <a href="{{ route('home') }}" class="inv-back">
        <i class="fas fa-arrow-left" style="font-size:10px"></i> Beranda
    </a>
    @endauth
</div>

@php
    $awaiting  = $tx->isAwaitingPayment();
    $statusKey = $tx->isSuccess() ? 'success' : ($tx->isFailed() ? 'failed' : ($awaiting ? 'waiting_payment' : 'pending'));

    $rcptNote = null;
    if ($awaiting) {
        $rcptNote = 'Selesaikan pembayaran sebelum batas waktu. Pesanan diproses otomatis setelah pembayaran diterima.';
    } elseif ($tx->isFailed() && $tx->isRefunded()) {
        $rcptNote = 'Dana sebesar Rp ' . number_format($tx->price, 0, ',', '.') . ' sudah otomatis dikembalikan ke saldo akunmu.';
    } elseif ($tx->isFailed() && $tx->payment_status === 'paid' && $tx->isGuest()) {
        $rcptNote = 'Pembayaran sudah kami terima namun pesanan gagal. Hubungi CS dengan nomor invoice ini untuk refund / proses ulang.';
    } elseif ($tx->isFailed() && $tx->message) {
        $rcptNote = $tx->message;
    } elseif ($tx->isPending()) {
        $rcptNote = 'Pembayaran diterima. Mohon tunggu, transaksi sedang diproses ke server game.';
    }

    $payTotal = $tx->payment_total ?: $tx->price;
    $csWa = preg_replace('/[^0-9]/', '', (string) \App\Models\Setting::getValue('cs_whatsapp', ''));
    $stQuery = $invoiceKey ? ('?k=' . $invoiceKey) : '';
@endphp

<div id="invSkeleton" class="inv-skeleton"></div>
<script>setTimeout(function(){ var s=document.getElementById('invSkeleton'), c=document.getElementById('invContent'); if(s&&s.style.display!=='none'){s.style.display='none'; if(c) c.style.display='block';} }, 2000);</script>

<noscript>
    <style>#invSkeleton{display:none!important}#invContent{display:block!important}</style>
</noscript>

<div id="invContent" class="inv-enter" style="display:none">
    @include('components.receipt', [
        'status'        => $statusKey,
        'logo_image'    => $game?->image,
        'logo_icon'     => 'fa-gamepad',
        'merchant_name' => $tx->game_name,
        'merchant_sub'  => $tx->product_name,
        'full_bleed'    => true,
        'date'          => $tx->created_at,
        'ref_label'     => 'No. Invoice',
        'ref_value'     => $tx->invoice_number ?? $tx->ref_id,
        'amount'        => $tx->price,
        'amount_label'  => 'Total Bayar',
        'method'        => $tx->paymentMethodLabel(),
        'note'          => $rcptNote,
        'rows'          => array_filter([
            ['label' => 'Tujuan', 'value' => $tx->customer_no . ($tx->zone_id ? ' ('.$tx->zone_id.')' : '')],
            $tx->sn ? ['label' => 'Serial Number', 'value' => $tx->sn, 'mono' => true] : null,
        ]),
    ])

    @if($awaiting)
    <div class="pay-box" style="margin-top:14px">
        @if($tx->payment_expired_at)
        <div class="pay-timer"><i class="fas fa-clock"></i> Bayar sebelum <b id="payCountdown">--:--</b></div>
        @endif

        <div class="pay-total">Total yang harus dibayar <b>Rp {{ number_format($payTotal, 0, ',', '.') }}</b>
            @if($tx->payment_fee)<span> (termasuk biaya Rp {{ number_format($tx->payment_fee, 0, ',', '.') }})</span>@endif
        </div>

        @if($tx->payment_qr_url)
        <div class="pay-qr"><img src="{{ $tx->payment_qr_url }}" alt="QR Pembayaran"></div>
        <div class="pay-hint">Scan dengan aplikasi e-wallet / mobile banking yang mendukung QRIS.</div>
        @endif

        @if($tx->payment_va)
        <div class="pay-va">
            <div class="pay-va-label">Nomor Virtual Account</div>
            <div class="pay-va-row"><span id="vaNum">{{ $tx->payment_va }}</span>
                <button type="button" class="pay-copy" onclick="copyText('vaNum', this)"><i class="fas fa-copy"></i> Salin</button></div>
        </div>
        @endif

        @if($tx->payment_checkout_url)
        <a href="{{ $tx->payment_checkout_url }}" target="_blank" rel="noopener" class="inv-btn inv-btn-full" style="margin-top:12px">
            <i class="fas fa-arrow-up-right-from-square"></i> Bayar Sekarang
        </a>
        @endif
    </div>
    @endif

    @if($awaiting || $tx->isPending())
    {{-- Badge ini ditampilkan untuk user login (realtime) dan tamu (polling).
         Teks dan animasi akan diperbarui oleh JS sesuai mekanisme yang aktif. --}}
    <div class="inv-poll-badge" id="pollBadge">
        <span class="inv-poll-dot"></span>
        <span id="pollBadgeText">Memantau status...</span>
    </div>
    @endif

    <div class="inv-btns inv-enter-delay" id="actionBtns" style="margin-top:14px">
        @if($awaiting)
            <button class="inv-btn inv-btn-check" onclick="checkStatus(true)"><i class="fas fa-rotate"></i> Cek Pembayaran</button>
            <button class="inv-btn inv-btn-cancel" onclick="cancelOrder()"><i class="fas fa-xmark"></i> Batalkan</button>
        @elseif($tx->isPending())
            <button class="inv-btn inv-btn-check" onclick="checkStatus(true)" @if($tx->isGuest()) style="grid-column:1 / -1" @endif><i class="fas fa-rotate"></i> Cek Status</button>
            @unless($tx->isGuest())
            <button class="inv-btn inv-btn-cancel" onclick="cancelOrder()"><i class="fas fa-xmark"></i> Batalkan</button>
            @endunless
        @else
            <a href="{{ $gameSlug ? route('topup.show', $gameSlug) : route('topup.index') }}" class="inv-btn inv-btn-full">
                <i class="fas fa-rotate"></i> Top Up Lagi
            </a>
        @endif
    </div>

    @if($csWa && ($tx->isFailed() || $tx->isPending()))
    <a href="https://wa.me/{{ $csWa }}?text={{ urlencode('Halo CS, saya butuh bantuan untuk pesanan ' . $tx->invoice_number) }}" target="_blank" rel="noopener"
       class="inv-btn inv-btn-cancel" style="margin-top:8px;width:100%"><i class="fab fa-whatsapp"></i> Hubungi CS</a>
    @endif

    @if($invoiceKey)
    <div class="pay-hint" style="margin-top:12px">Simpan halaman ini (bookmark) atau catat nomor invoice <b>{{ $tx->invoice_number }}</b> untuk mengecek pesanan lagi lewat menu <a href="{{ route('topup.track') }}" style="color:var(--accent)">Cek Pesanan</a>.</div>
    @endif
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.swal2-popup{border:1px solid #1d2330!important;border-radius:14px!important;}
.swal2-title{font-weight:700!important;font-size:16px!important;}
.swal2-html-container{font-size:13px!important;color:#8590a6!important;}
</style>
<script>
/* ─────────────────────────────────────────────────────────────────
   Invoice page — Realtime (Reverb) sebagai mekanisme utama.
   Polling HANYA untuk tamu yang tidak punya WebSocket channel.
   User login: realtime via realtime.js yang sudah diload di layout.
───────────────────────────────────────────────────────────────── */
const CSRF        = '{{ csrf_token() }}';
const STATUS_URL  = '{{ route("topup.status", $tx->id) }}{!! $stQuery !!}';
const CANCEL_URL  = '{{ route("topup.cancel", $tx->id) }}{!! $stQuery !!}';
const IS_AWAITING = {{ $awaiting ? 'true' : 'false' }};
const IS_GUEST    = {{ $tx->isGuest() ? 'true' : 'false' }};
let   isPending   = {{ ($tx->isPending() || $awaiting) ? 'true' : 'false' }};
let   pollTimer   = null;

function getSwalBg()    { return document.documentElement.getAttribute('data-theme') !== 'light' ? '#161b25' : '#ffffff'; }
function getSwalColor() { return document.documentElement.getAttribute('data-theme') !== 'light' ? '#e5e9f0' : '#09090b'; }

/* ── Reveal skeleton ──────────────────────────────────────────── */
function revealInvoice() {
    var skel    = document.getElementById('invSkeleton');
    var content = document.getElementById('invContent');
    if (skel)    skel.style.display    = 'none';
    if (content) content.style.display = 'block';
}

/* ── Badge helper ─────────────────────────────────────────────── */
function setBadgeText(text) {
    var el = document.getElementById('pollBadgeText');
    if (el) el.textContent = text;
}
function setBadgeChecking(on) {
    var badge = document.getElementById('pollBadge');
    if (badge) badge.classList.toggle('checking', on);
}

/* ── Realtime: dengarkan event dari realtime.js ───────────────── */
window.addEventListener('realtime:transaction', function (e) {
    var d = e.detail;
    /* Hanya proses event milik transaksi ini */
    if (d.category !== 'topup' || Number(d.id) !== {{ $tx->id }}) return;

    /* Status berubah ATAU pembayaran diterima → reload penuh agar
       receipt, SN, status, refund info semuanya sinkron */
    var statusChanged  = d.status  !== '{{ $tx->status }}';
    var paymentUpdated = d.payment_status === 'paid';
    if (statusChanged || paymentUpdated) {
        if (pollTimer) clearInterval(pollTimer);
        window.location.reload();
    }
});

/* ── Indikator koneksi WebSocket ──────────────────────────────── */
window.addEventListener('realtime:connected', function () {
    if (!isPending) return;
    setBadgeText('Terhubung realtime ✓');
    /* Hentikan polling jika sebelumnya berjalan sebagai fallback */
    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
});
window.addEventListener('realtime:disconnected', function () {
    if (!isPending) return;
    setBadgeText('Koneksi terputus, memulai polling...');
    /* Fallback: aktifkan polling jika WebSocket putus */
    if (!pollTimer) startPolling(true);
});

/* ── Polling ──────────────────────────────────────────────────
   Diaktifkan dalam dua skenario:
   1. Tamu (tidak punya WebSocket channel) — selalu polling.
   2. User login tapi WebSocket putus (fallback dari disconnect event).
   Parameter `isFallback` membedakan log/pesan saja.
─────────────────────────────────────────────────────────────── */
function startPolling(isFallback) {
    if (!isPending) return;
    if (pollTimer)  return; /* sudah jalan */
    var interval = IS_AWAITING ? 5000 : 15000;
    setBadgeText(isFallback ? 'Fallback polling aktif...' : 'Memantau status...');
    pollTimer = setInterval(function () { checkStatus(false); }, interval);
}

async function checkStatus(manual) {
    setBadgeChecking(true);
    if (manual) setBadgeText('Mengecek status...');

    try {
        var r = await fetch(STATUS_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } });
        if (!r.ok) { setBadgeChecking(false); return; }
        var d = await r.json();

        setBadgeChecking(false);

        var sameStatus  = d.status === '{{ $tx->status }}';
        var samePay     = d.payment_status === {!! json_encode($tx->payment_status) !!};
        if (sameStatus && samePay) {
            if (manual) showToast(IS_AWAITING ? 'Pembayaran belum diterima.' : 'Masih diproses, coba lagi sebentar.', 'info');
            setBadgeText(window.rtConnected ? 'Terhubung realtime ✓' : 'Memantau status...');
            return;
        }

        if (pollTimer) clearInterval(pollTimer);
        window.location.reload();
    } catch (e) {
        setBadgeChecking(false);
        if (manual) showToast('Gagal cek status, periksa koneksimu.', 'error');
    }
}

async function cancelOrder() {
    var result = await Swal.fire({
        icon: 'warning', title: 'Batalkan Pesanan?',
        text: IS_AWAITING ? 'Pesanan akan dibatalkan. Jangan bayar setelah dibatalkan.' : 'Saldo akan dikembalikan otomatis ke akun kamu.',
        showCancelButton: true, confirmButtonText: 'Ya, Batalkan',
        cancelButtonText: 'Tidak', confirmButtonColor: '#f43f5e',
        cancelButtonColor: '#586176', background: getSwalBg(), color: getSwalColor()
    });
    if (!result.isConfirmed) return;

    Swal.fire({ title: 'Membatalkan...', allowOutsideClick: false, showConfirmButton: false,
        background: getSwalBg(), color: getSwalColor(), didOpen: function () { Swal.showLoading(); } });
    try {
        var r = await fetch(CANCEL_URL, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' } });
        var d = await r.json();
        if (d.success) {
            window.location.reload();
        } else {
            Swal.fire({ icon: 'error', title: 'Gagal', text: d.error || 'Pesanan tidak dapat dibatalkan.',
                confirmButtonColor: '#6366f1', background: getSwalBg(), color: getSwalColor() });
        }
    } catch (e) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan koneksi.',
            confirmButtonColor: '#6366f1', background: getSwalBg(), color: getSwalColor() });
    }
}

function showToast(msg, type) {
    var colorMap = { success: '#22c55e', error: '#f43f5e', warning: '#f59e0b', info: '#38bdf8' };
    Swal.fire({
        toast: true, position: 'top-end', icon: type || 'info', title: msg,
        showConfirmButton: false, timer: 3000, timerProgressBar: true,
        background: getSwalBg(), color: getSwalColor(), iconColor: colorMap[type] || '#818cf8'
    });
}

function copyText(id, btn) {
    var el = document.getElementById(id);
    if (!el || !navigator.clipboard) return;
    navigator.clipboard.writeText(el.textContent.trim()).then(function () {
        var old = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i> Tersalin';
        setTimeout(function () { btn.innerHTML = old; }, 1500);
    });
}

@if($awaiting && $tx->payment_expired_at)
(function () {
    var exp = {{ $tx->payment_expired_at->timestamp }} * 1000;
    var el  = document.getElementById('payCountdown');
    if (!el) return;
    function tick() {
        var diff = exp - Date.now();
        if (diff <= 0) { el.textContent = 'Kedaluwarsa'; checkStatus(false); return; }
        var h  = Math.floor(diff / 3600000);
        var m  = Math.floor(diff % 3600000 / 60000);
        var sc = Math.floor(diff % 60000 / 1000);
        el.textContent = (h > 0 ? String(h).padStart(2, '0') + ':' : '')
                       + String(m).padStart(2, '0') + ':' + String(sc).padStart(2, '0');
        setTimeout(tick, 1000);
    }
    tick();
})();
@endif

/* ── Inisialisasi ─────────────────────────────────────────────── */
setTimeout(revealInvoice, 280);

if (isPending) {
    if (IS_GUEST) {
        /* Tamu tidak punya WebSocket channel → langsung polling */
        startPolling(false);
    } else if (window.rtConnected) {
        /* User login + sudah tersambung → cukup realtime, tandai badge */
        setBadgeText('Terhubung realtime ✓');
    } else {
        /* User login tapi WebSocket belum/tidak tersambung → polling sementara,
           event 'realtime:connected' akan mematikannya jika koneksi berhasil */
        startPolling(false);
        /* Hentikan polling begitu WebSocket berhasil tersambung */
        window.addEventListener('realtime:connected', function onConn() {
            if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
            setBadgeText('Terhubung realtime ✓');
            window.removeEventListener('realtime:connected', onConn);
        });
    }
}
</script>
@endpush