@extends('user.layouts.app')
@section('css')
    <style>
        .input-group>.form-control {
            margin-bottom: 1rem;
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <div class="container mt-5">
        <div class="d-flex align-items-center mb-3">
            <h3 class="mb-0">إيداع {{ $symbol }}</h3>
            <div class="ms-auto">
                <div class="btn-group" role="group" aria-label="network">
                    <a href="{{ route('deposits.index', ['network' => 'bep20']) }}"
                        class="btn {{ $network === 'bep20' ? 'btn-primary' : 'btn-outline-primary' }}">BEP20</a>
                    <a href="{{ route('deposits.index', ['network' => 'trc20']) }}"
                        class="btn {{ $network === 'trc20' ? 'btn-primary' : 'btn-outline-primary' }}">TRC20</a>
                </div>
            </div>
        </div>

        @if (config('app.debug'))
            <div class="small text-muted mb-2">Debug:
                single_address_mode={{ config('crypto.single_address_mode') ? 'on' : 'off' }},
                network={{ strtoupper($network) }}</div>
        @endif

        <div id="intentAlert" class="alert alert-success d-none"></div>

        @php($single = config('crypto.single_address_mode'))
        @if ($single)
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12 col-lg-8">
                            <label class="form-label">عنوان الإيداع (موحّد)</label>
                            @php($unifiedAddress = $network === 'bep20' ? config('crypto.bep20.deposit_address') : config('crypto.trc20.deposit_address'))
                            @if (empty($unifiedAddress))
                                <div class="alert alert-warning py-2">لم يتم ضبط عنوان الإيداع لهذه الشبكة. رجاءً ضبط
                                    {{ strtoupper($network) }}_DEPOSIT_ADDRESS في ملف البيئة.</div>
                            @else
                                <div class="input-group">
                                    <input id="depositAddress" dir="ltr"
                                        class="form-control form-control-lg font-monospace" style="letter-spacing:0.3px"
                                        value="{{ $unifiedAddress }}" readonly />
                                    <button id="copyBtn" class="btn btn-outline-secondary btn-lg"
                                        onclick="copyAddress()">نسخ</button>
                                </div>
                                <small class="text-muted">لا ترسل إلا {{ $symbol }} على شبكة
                                    {{ strtoupper($network) }} فقط.</small>
                            @endif
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <label class="form-label">المبلغ الأساسي</label>
                            <div class="input-group">
                                <input id="baseAmount" type="number" min="0.5" step="0.01"
                                    class="form-control form-control-lg" placeholder="0.00" />
                                <span class="input-group-text">{{ $symbol }}</span>
                            </div>
                            <small class="text-muted">أدخل المبلغ الذي تريد شحنه (سيتم توليد مبلغ فريد).</small>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <label class="form-label">المبلغ المطلوب (فريد)</label>
                            <div class="input-group">
                                <input id="uniqueAmount" class="form-control form-control-lg" value="" readonly />
                                <span class="input-group-text">{{ $symbol }}</span>
                            </div>
                            <small class="text-muted">أرسل المبلغ كما هو بالحرف.</small>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="border rounded p-2 h-100">
                                <div class="fw-bold mb-2">حالة العملية</div>
                                <div id="intentStatus">—</div>
                                <div class="small text-muted" id="intentCountdown"></div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="text-center" id="qrWrap">
                                <div id="qrcode"></div>
                            </div>
                        </div>
                        <div class="col-12 d-flex gap-2">
                            <button class="btn btn-primary btn-lg ms-auto" id="startIntent">ابدأ إيداع</button>
                            <button class="btn btn-outline-secondary btn-lg" id="resetIntent" style="display:none">عملية
                                جديدة</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert alert-info">سيتم إضافة الرصيد بعد وصول {{ $minConfirmations }} تأكيدات على الشبكة.</div>
            <h5>أحدث الإيداعات</h5>
            <div id="depositsList" class="list-group mb-4"></div>
        @elseif(!$address)
            <div class="alert alert-warning">لا يوجد عنوان إيداع مخصص لك على هذه الشبكة.</div>
        @else
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-lg-7">
                            <label class="form-label">عنوان الإيداع</label>
                            <div class="input-group">
                                <input id="depositAddress" dir="ltr"
                                    class="form-control form-control-lg font-monospace" value="{{ $address }}"
                                    readonly />
                                <button id="copyBtn" class="btn btn-outline-secondary btn-lg"
                                    onclick="copyAddress()">نسخ</button>
                            </div>
                            <small class="text-muted">أرسل {{ $symbol }} عبر شبكة {{ strtoupper($network) }} فقط. أي
                                شبكة مختلفة لن يتم احتسابها.</small>
                        </div>
                        <div class="col-12 col-lg-5 text-center">
                            <div id="qrcode"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info">سيتم إضافة الرصيد بعد وصول {{ $minConfirmations }} تأكيدات على الشبكة.</div>

            <h5>أحدث الإيداعات</h5>
            <div id="depositsList" class="list-group mb-4"></div>
        @endif
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" referrerpolicy="no-referrer"></script>
    <script>
        const addr = @json($address);
        const network = @json($network);
        const statusUrl = @json(route('deposits.status', ['network' => $network]));
        const single = @json(config('crypto.single_address_mode'));
        const precision = network === 'trc20' ? 6 : 8;

        function copyAddress() {
            const el = document.getElementById('depositAddress');
            el.select();
            el.setSelectionRange(0, 99999);
            document.execCommand('copy');
            const btn = document.getElementById('copyBtn');
            if (btn) {
                const old = btn.textContent;
                btn.textContent = 'تم النسخ';
                setTimeout(() => {
                    btn.textContent = old;
                }, 1200);
            }
        }

        function drawQR() {
            if (!addr) return;
            const el = document.getElementById('qrcode');
            el.innerHTML = '';
            new QRCode(el, {
                text: addr,
                width: 160,
                height: 160
            });
        }

        function drawQRUnified() {
            const addressEl = document.getElementById('depositAddress');
            if (!addressEl || !addressEl.value) return;
            const el = document.getElementById('qrcode');
            el.innerHTML = '';
            new QRCode(el, {
                text: addressEl.value,
                width: 160,
                height: 160
            });
        }

        async function loadStatus() {
            try {
                const res = await fetch(statusUrl);
                const json = await res.json();
                const list = document.getElementById('depositsList');
                list.innerHTML = '';
                (json.items || []).forEach(item => {
                    const div = document.createElement('div');
                    div.className = 'list-group-item d-flex justify-content-between align-items-center';
                    div.innerHTML = `
          <div>
            <div><strong>TX:</strong> ${item.tx_hash}</div>
            <div><strong>Amount:</strong> ${item.amount_token} {{ $symbol }}</div>
          </div>
          <span class="badge bg-${item.status === 'credited' ? 'success' : (item.status === 'pending' ? 'warning' : 'secondary')}">
            ${item.status} (${item.confirmations})
          </span>
        `;
                    list.appendChild(div);
                });
            } catch (e) {
                console.error(e);
            }
        }

        let currentIntentId = null;
        let expiresAt = null;
        let pollTimer = null;
        let countdownTimer = null;

        function setStatus(text, cls = '') {
            const el = document.getElementById('intentStatus');
            el.className = cls;
            el.textContent = text;
        }

        function startCountdown() {
            clearInterval(countdownTimer);
            const el = document.getElementById('intentCountdown');
            if (!expiresAt) {
                el.textContent = '';
                return;
            }

            function tick() {
                const now = new Date().getTime();
                const end = new Date(expiresAt).getTime();
                const diff = Math.max(0, end - now);
                const m = Math.floor(diff / 60000);
                const s = Math.floor((diff % 60000) / 1000);
                el.textContent = diff > 0 ? `تنتهي خلال ${m}:${String(s).padStart(2,'0')}` : 'انتهت المهلة';
                if (diff <= 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('resetIntent').style.display = 'inline-block';
                }
            }
            tick();
            countdownTimer = setInterval(tick, 1000);
        }

        function startPolling() {
            clearInterval(pollTimer);
            if (!currentIntentId) return;
            const url = `/deposits/intent/${currentIntentId}`;
            async function poll() {
                try {
                    const res = await fetch(url);
                    const data = await res.json();
                    if (data.status) {
                        setStatus(data.status, data.status === 'credited' ? 'text-success' : (data.status ===
                            'pending' ? 'text-warning' : 'text-muted'));
                        if (data.expires_at) {
                            expiresAt = data.expires_at;
                            startCountdown();
                        }
                        if (data.status === 'credited' || data.status === 'matched') {
                            // stop polling on terminal states
                            clearInterval(pollTimer);
                            loadStatus();
                        }
                    }
                } catch (e) {
                    console.error(e);
                }
            }
            poll();
            pollTimer = setInterval(poll, 10000);
        }

        async function loadLatestIntent() {
            try {
                const res = await fetch(`/deposits/intent-latest?network=${encodeURIComponent(network)}`);
                const data = await res.json();
                if (data && data.found) {
                    currentIntentId = data.intent_id;
                    expiresAt = data.expires_at;
                    document.getElementById('uniqueAmount').value = data.amount_expected || '';
                    // show alert
                    const alertBox = document.getElementById('intentAlert');
                    if (alertBox) {
                        alertBox.classList.remove('d-none', 'alert-danger');
                        alertBox.classList.add('alert-success');
                        const amt = Number(data.amount_expected).toFixed(precision);
                        alertBox.innerHTML = `
                                لديك عملية إيداع قيد الانتظار.<br>
                                أرسل بالضبط <strong>${amt} {{ $symbol }}</strong>
                                إلى العنوان التالي:<br>
                                <span dir=\"ltr\" class=\"font-monospace\">${data.deposit_address}</span>
                            `;
                    }
                    // update QR
                    const el = document.getElementById('qrcode');
                    if (el) {
                        el.innerHTML = '';
                        new QRCode(el, {
                            text: `${data.deposit_address}`,
                            width: 160,
                            height: 160
                        });
                    }
                    setStatus(data.status || 'pending', data.status === 'credited' ? 'text-success' : (data.status ===
                        'pending' ? 'text-warning' : 'text-muted'));
                    startCountdown();
                    startPolling();
                }
            } catch (e) {
                console.error(e);
            }
        }

        async function createIntent() {
            try {
                const baseAmountEl = document.getElementById('baseAmount');
                const baseAmount = baseAmountEl && baseAmountEl.value ? parseFloat(baseAmountEl.value) : null;
                if (!baseAmount || baseAmount < 0.5) {
                    alert('من فضلك أدخل مبلغ أساسي لا يقل عن 0.5');
                    return;
                }
                const res = await fetch('/deposits/intent', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        network,
                        symbol: 'USDT',
                        amount: baseAmount
                    })
                });
                const data = await res.json();
                if (data.amount_expected) {
                    document.getElementById('uniqueAmount').value = data.amount_expected;
                    const el = document.getElementById('qrcode');
                    el.innerHTML = '';
                    new QRCode(el, {
                        text: `${data.deposit_address}`,
                        width: 160,
                        height: 160
                    });
                    currentIntentId = data.intent_id;
                    expiresAt = data.expires_at;
                    setStatus('pending', 'text-warning');
                    document.getElementById('resetIntent').style.display = 'none';
                    // Show a visible success alert with instructions
                    const alertBox = document.getElementById('intentAlert');
                    if (alertBox) {
                        alertBox.classList.remove('d-none', 'alert-danger');
                        alertBox.classList.add('alert-success');
                        alertBox.innerHTML = `
                                تم إنشاء عملية الإيداع.<br>
                                أرسل بالضبط <strong>${Number(data.amount_expected).toFixed(precision)} {{ $symbol }}</strong>
                                إلى العنوان التالي:<br>
                                <span dir="ltr" class="font-monospace">${data.deposit_address}</span>
                            `;
                    }
                    startCountdown();
                    startPolling();
                }
            } catch (e) {
                console.error(e);
            }
        }

        (function initDepositPage() {
            function run() {
                if (!single) {
                    drawQR();
                } else {
                    drawQRUnified();
                }
                loadStatus();
                setInterval(loadStatus, 10000);
                const btn = document.getElementById('startIntent');
                if (btn) {
                    btn.addEventListener('click', createIntent);
                }
                const resetBtn = document.getElementById('resetIntent');
                if (resetBtn) {
                    resetBtn.addEventListener('click', async function() {
                        try {
                            await fetch('/deposits/intent/reset', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    network
                                })
                            });
                        } catch (_) {}
                        currentIntentId = null;
                        expiresAt = null;
                        setStatus('—');
                        document.getElementById('uniqueAmount').value = '';
                        const el = document.getElementById('qrcode');
                        el.innerHTML = '';
                        resetBtn.style.display = 'none';
                        const alertBox = document.getElementById('intentAlert');
                        if (alertBox) {
                            alertBox.classList.add('d-none');
                            alertBox.innerHTML = '';
                        }
                    });
                }
                // auto-load any active intent
                loadLatestIntent();
            }
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', run);
            } else {
                run();
            }
        })();
    </script>
@endsection