@extends('layouts.app')

@section('title', 'Add Money • BDCodeShop')

@push('styles')
<style>
    .wallet-page {
        padding-bottom: 20px;
    }

    .wallet-hero {
        position: relative;
        overflow: hidden;
        padding: 24px;
        border-radius: 28px;
        color: #fff;
        background:
            radial-gradient(circle at 90% 10%, rgba(255,255,255,.20), transparent 30%),
            radial-gradient(circle at 10% 100%, rgba(255,255,255,.12), transparent 35%),
            linear-gradient(135deg, #6857f5, #8b5cf6);
        box-shadow: 0 18px 45px rgba(104,87,245,.25);
    }

    .wallet-hero:before {
        content: "";
        position: absolute;
        width: 170px;
        height: 170px;
        right: -70px;
        bottom: -90px;
        border-radius: 50%;
        border: 35px solid rgba(255,255,255,.08);
    }

    .wallet-label {
        position: relative;
        font-size: 12px;
        font-weight: 700;
        opacity: .78;
    }

    .wallet-balance {
        position: relative;
        margin-top: 8px;
        font-size: 34px;
        font-weight: 900;
        letter-spacing: -1px;
    }

    .wallet-account {
        position: relative;
        margin-top: 7px;
        font-size: 12px;
        opacity: .78;
    }

    .section {
        margin-top: 20px;
    }

    .section-title {
        font-size: 17px;
        font-weight: 850;
        letter-spacing: -.3px;
    }

    .section-subtitle {
        margin-top: 4px;
        color: #8a8a99;
        font-size: 12px;
    }

    .amount-card {
        margin-top: 12px;
        padding: 18px;
    }

    .amount-input-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 58px;
        padding: 0 17px;
        border-radius: 17px;
        background: #f5f5fa;
        border: 1px solid rgba(0,0,0,.05);
        transition: .2s;
    }

    .amount-input-wrap:focus-within {
        border-color: rgba(104,87,245,.35);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(104,87,245,.08);
    }

    .currency {
        font-size: 20px;
        font-weight: 900;
        color: #6857f5;
    }

    #amount {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 21px;
        font-weight: 800;
        color: #171725;
    }

    #amount::placeholder {
        color: #b0b0ba;
    }

    .quick-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .quick-btn {
        min-height: 43px;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 13px;
        background: #fff;
        color: #555565;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        transition: .15s;
    }

    .quick-btn:active {
        transform: scale(.95);
    }

    .quick-btn.active {
        color: #6857f5;
        border-color: rgba(104,87,245,.25);
        background: rgba(104,87,245,.08);
    }

    .payment-card {
        margin-top: 12px;
        padding: 18px;
    }

    .payment-method {
        display: flex;
        align-items: center;
        gap: 13px;
    }

    .payment-logo {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0efff;
        color: #6857f5;
        font-size: 19px;
        font-weight: 900;
    }

    .payment-name {
        font-size: 15px;
        font-weight: 850;
    }

    .payment-desc {
        margin-top: 3px;
        color: #8a8a99;
        font-size: 11px;
    }

    .secure-badge {
        margin-left: auto;
        padding: 7px 9px;
        border-radius: 10px;
        background: #eefbf3;
        color: #209653;
        font-size: 10px;
        font-weight: 850;
    }

    .payment-info {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        padding: 13px;
        border-radius: 15px;
        background: #f8f8fc;
    }

    .info-icon {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(104,87,245,.10);
        color: #6857f5;
        font-size: 13px;
        font-weight: 900;
    }

    .info-text {
        color: #737382;
        font-size: 11px;
        line-height: 1.5;
    }

    .continue-btn {
        width: 100%;
        height: 54px;
        margin-top: 15px;
        border: 0;
        border-radius: 17px;
        background: linear-gradient(135deg, #6857f5, #8b5cf6);
        color: #fff;
        font-size: 14px;
        font-weight: 850;
        box-shadow: 0 12px 28px rgba(104,87,245,.22);
        cursor: pointer;
        transition: .15s;
    }

    .continue-btn:active {
        transform: scale(.98);
    }

    .continue-btn:disabled {
        opacity: .65;
        cursor: wait;
    }

    .payment-note {
        margin-top: 10px;
        text-align: center;
        color: #9999a6;
        font-size: 10px;
        line-height: 1.5;
    }

    .history-card {
        margin-top: 12px;
        overflow: hidden;
    }

    .history-loading {
        padding: 28px 18px;
        text-align: center;
        color: #9999a6;
        font-size: 12px;
    }

    .history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 16px;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .history-item:last-child {
        border-bottom: 0;
    }

    .history-left {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .history-icon {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(32,150,83,.09);
        color: #209653;
        font-size: 18px;
        font-weight: 900;
    }

    .history-title {
        font-size: 13px;
        font-weight: 800;
    }

    .history-meta {
        margin-top: 3px;
        color: #9999a6;
        font-size: 10px;
        white-space: nowrap;
    }

    .history-status {
        display: inline-block;
        margin-top: 5px;
        padding: 3px 7px;
        border-radius: 7px;
        font-size: 8px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .2px;
    }

    .history-status.completed {
        background: #eefbf3;
        color: #209653;
    }

    .history-status.processing,
    .history-status.pending {
        background: #fff7e7;
        color: #c47b08;
    }

    .history-status.failed {
        background: #fff0f0;
        color: #d54b4b;
    }

    .history-amount {
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 900;
    }

    .history-amount.credit {
        color: #209653;
    }

    .history-amount.debit {
        color: #d54b4b;
    }

    .empty-history {
        padding: 34px 18px;
        text-align: center;
    }

    .empty-icon {
        width: 50px;
        height: 50px;
        margin: 0 auto 11px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f0ff;
        color: #6857f5;
        font-size: 20px;
        font-weight: 900;
    }

    .empty-title {
        font-size: 14px;
        font-weight: 850;
    }

    .empty-text {
        margin-top: 5px;
        color: #9999a6;
        font-size: 11px;
    }

    .toast {
        position: fixed;
        left: 50%;
        bottom: 94px;
        z-index: 5000;
        max-width: calc(100% - 36px);
        padding: 12px 15px;
        border-radius: 14px;
        background: #20202c;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 15px 40px rgba(0,0,0,.18);
        transform: translate(-50%, 20px);
        opacity: 0;
        pointer-events: none;
        transition: .25s;
    }

    .toast.show {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    @media (max-width: 360px) {
        .quick-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .wallet-balance {
            font-size: 30px;
        }
    }
</style>
@endpush

@section('content')

<div class="wallet-page">

    <div class="wallet-hero">

        <div class="wallet-label">
            Available Balance
        </div>

        <div class="wallet-balance" id="walletBalance">
            ৳0.00
        </div>

        <div class="wallet-account" id="walletAccount">
            BDCodeShop Wallet
        </div>

    </div>


    <div class="section">

        <div class="section-title">
            Add Money
        </div>

        <div class="section-subtitle">
            Choose an amount and continue securely.
        </div>


        <div class="card amount-card">

            <div class="amount-input-wrap">

                <span class="currency">৳</span>

                <input
                    type="number"
                    id="amount"
                    inputmode="decimal"
                    min="10"
                    max="100000"
                    step="1"
                    placeholder="Enter amount"
                    autocomplete="off"
                >

            </div>


            <div class="quick-grid">

                <button
                    type="button"
                    class="quick-btn"
                    data-amount="100"
                    onclick="selectAmount(100)"
                >
                    ৳100
                </button>

                <button
                    type="button"
                    class="quick-btn"
                    data-amount="250"
                    onclick="selectAmount(250)"
                >
                    ৳250
                </button>

                <button
                    type="button"
                    class="quick-btn"
                    data-amount="500"
                    onclick="selectAmount(500)"
                >
                    ৳500
                </button>

                <button
                    type="button"
                    class="quick-btn"
                    data-amount="1000"
                    onclick="selectAmount(1000)"
                >
                    ৳1000
                </button>

            </div>

        </div>

    </div>


    <div class="section">

        <div class="section-title">
            Payment Method
        </div>

        <div class="section-subtitle">
            Your payment will be processed securely.
        </div>


        <div class="card payment-card">

            <div class="payment-method">

                <div class="payment-logo">
                    U
                </div>

                <div>
                    <div class="payment-name">
                        UddoktaPay
                    </div>

                    <div class="payment-desc">
                        Secure online payment gateway
                    </div>
                </div>

                <div class="secure-badge">
                    SECURE
                </div>

            </div>


            <div class="payment-info">

                <div class="info-icon">
                    ✓
                </div>

                <div class="info-text">
                    After clicking Continue Payment, you will be
                    redirected to the secure payment page in Chrome.
                    Complete your payment there.
                </div>

            </div>


            <button
                type="button"
                class="continue-btn"
                id="continuePayment"
                onclick="continuePayment()"
            >
                Continue Payment
            </button>


            <div class="payment-note">
                Every payment attempt creates a new payment link.
                Never share your payment link with anyone.
            </div>

        </div>

    </div>


    <div class="section">

        <div class="section-title">
            Wallet History
        </div>

        <div class="section-subtitle">
            Your recent wallet activity.
        </div>


        <div class="card history-card" id="walletHistory">

            <div class="history-loading">
                Loading wallet history...
            </div>

        </div>

    </div>

</div>


<div class="toast" id="toast"></div>

@endsection


@push('scripts')
<script>

const walletTg = window.Telegram?.WebApp;

let toastTimer = null;


/* ------------------------------
   Telegram initialization
------------------------------ */

if (walletTg) {
    walletTg.ready();
    walletTg.expand();
}


/* ------------------------------
   Toast
------------------------------ */

function showToast(message) {

    const toast = document.getElementById('toast');

    if (!toast) return;

    toast.textContent = message;

    toast.classList.add('show');

    clearTimeout(toastTimer);

    toastTimer = setTimeout(() => {
        toast.classList.remove('show');
    }, 2800);
}


/* ------------------------------
   Amount selector
------------------------------ */

function selectAmount(amount) {

    const input = document.getElementById('amount');

    input.value = amount;

    document.querySelectorAll('.quick-btn')
        .forEach(button => {

            button.classList.toggle(
                'active',
                Number(button.dataset.amount) === amount
            );

        });
}


/* ------------------------------
   Amount input
------------------------------ */

document.getElementById('amount')
    ?.addEventListener('input', function () {

        const value = Number(this.value);

        document.querySelectorAll('.quick-btn')
            .forEach(button => {

                button.classList.toggle(
                    'active',
                    Number(button.dataset.amount) === value
                );

            });
    });


/* ------------------------------
   Load wallet balance
------------------------------ */

async function loadWalletBalance() {

    if (!walletTg) {
        showToast(
            'Please open BDCodeShop from Telegram.'
        );
        return;
    }

    try {

        const response = await fetch(
            '/api/wallet/balance',
            {
                method: 'POST',

                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },

                body: JSON.stringify({
                    init_data: walletTg.initData
                })
            }
        );

        const data = await response.json();

        if (!response.ok || !data.success) {
            throw new Error(
                data.message ||
                'Unable to load wallet balance.'
            );
        }

        document.getElementById('walletBalance')
            .textContent =
            '৳' + Number(data.balance || 0)
                .toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

    } catch (error) {

        console.error(
            'Wallet balance error:',
            error
        );

        document.getElementById('walletBalance')
            .textContent = '৳0.00';
    }
}


/* ------------------------------
   Load wallet history
------------------------------ */

async function loadWalletHistory() {

    const container =
        document.getElementById('walletHistory');

    if (!container) return;

    if (!walletTg) {

        container.innerHTML = `
            <div class="empty-history">
                <div class="empty-title">
                    Open from Telegram
                </div>

                <div class="empty-text">
                    Wallet history is available inside BDCodeShop.
                </div>
            </div>
        `;

        return;
    }

    try {

        const response = await fetch(
            '/api/wallet/history',
            {
                method: 'POST',

                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },

                body: JSON.stringify({
                    init_data: walletTg.initData
                })
            }
        );

        const data = await response.json();

        if (!response.ok || !data.success) {
            throw new Error(
                data.message ||
                'Unable to load history.'
            );
        }

        const transactions =
            data.transactions || [];


        if (!transactions.length) {

            container.innerHTML = `
                <div class="empty-history">

                    <div class="empty-icon">
                        ৳
                    </div>

                    <div class="empty-title">
                        No transactions yet
                    </div>

                    <div class="empty-text">
                        Your wallet activity will appear here.
                    </div>

                </div>
            `;

            return;
        }


        container.innerHTML =
            transactions
                .map(transaction => {

                    const isCredit =
                        transaction.type === 'credit';

                    const amountClass =
                        isCredit
                            ? 'credit'
                            : 'debit';

                    const sign =
                        isCredit
                            ? '+'
                            : '-';

                    let icon =
                        isCredit
                            ? '↓'
                            : '↑';

                    let title =
                        isCredit
                            ? 'Add Money'
                            : 'Wallet Debit';

                    return `
                        <div class="history-item">

                            <div class="history-left">

                                <div class="history-icon">
                                    ${icon}
                                </div>

                                <div>

                                    <div class="history-title">
                                        ${escapeHtml(title)}
                                    </div>

                                    <div class="history-meta">
                                        ${escapeHtml(
                                            transaction.created_at || ''
                                        )}
                                    </div>

                                    <div class="history-status ${escapeHtml(
                                        transaction.status || ''
                                    )}">
                                        ${escapeHtml(
                                            transaction.status || 'unknown'
                                        )}
                                    </div>

                                </div>

                            </div>


                            <div class="history-amount ${amountClass}">
                                ${sign}৳${escapeHtml(
                                    transaction.amount || '0.00'
                                )}
                            </div>

                        </div>
                    `;
                })
                .join('');


    } catch (error) {

        console.error(
            'Wallet history error:',
            error
        );

        container.innerHTML = `
            <div class="empty-history">

                <div class="empty-icon">
                    !
                </div>

                <div class="empty-title">
                    Unable to load history
                </div>

                <div class="empty-text">
                    Please try again later.
                </div>

            </div>
        `;
    }
}


/* ------------------------------
   Continue Payment
------------------------------ */

async function continuePayment() {

    if (!walletTg) {

        showToast(
            'Please open BDCodeShop from Telegram.'
        );

        return;
    }


    const amountInput =
        document.getElementById('amount');

    const button =
        document.getElementById('continuePayment');

    const amount =
        Number(amountInput.value);


    if (!amount || amount < 10) {

        showToast(
            'Minimum amount is ৳10.'
        );

        amountInput.focus();

        return;
    }


    if (amount > 100000) {

        showToast(
            'Maximum amount is ৳100,000.'
        );

        return;
    }


    button.disabled = true;

    button.textContent =
        'Creating Payment...';


    try {

        const response = await fetch(
            '/api/wallet/create',
            {
                method: 'POST',

                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },

                body: JSON.stringify({
                    init_data: walletTg.initData,
                    amount: amount
                })
            }
        );


        const data =
            await response.json();


        if (!response.ok || !data.success) {

            throw new Error(
                data.message ||
                'Unable to create payment.'
            );
        }


        if (!data.payment_url) {

            throw new Error(
                'Payment URL was not returned.'
            );
        }


        /*
         * Telegram Mini App থেকে external browser-এ
         * payment page খুলবে।
         *
         * try_browser Chrome prefer করবে।
         */
        walletTg.openLink(
            data.payment_url,
            {
                try_browser: 'chrome'
            }
        );


    } catch (error) {

        console.error(
            'Payment error:',
            error
        );

        showToast(
            error.message ||
            'Unable to start payment.'
        );

    } finally {

        button.disabled = false;

        button.textContent =
            'Continue Payment';
    }
}


/* ------------------------------
   Escape HTML
------------------------------ */

function escapeHtml(value) {

    return String(value)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}


/* ------------------------------
   Initial load
------------------------------ */

document.addEventListener(
    'DOMContentLoaded',
    () => {

        loadWalletBalance();

        loadWalletHistory();

    }
);

</script>
@endpush