@extends('layouts.app')

@section('title', 'Wallet')

@section('content')
<div x-data="walletDashboard({
    balanceUrl: '{{ route('wallet.balance.json') }}',
    purchaseUrl: '{{ route('wallet.purchase') }}',
    cashoutUrl: '{{ route('wallet.cashout') }}',
})" x-init="loadBalance()">

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-lg">
        <div class="lg:col-span-8 flex flex-col gap-lg">

            {{-- Live Balance --}}
            <section class="glass-surface rounded-xl p-lg relative overflow-hidden flex flex-col gap-md">
                <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary-container rounded-full blur-[100px] opacity-20 pointer-events-none"></div>
                <div class="flex justify-between items-start z-10">
                    <div>
                        <h2 class="font-data-label text-data-label text-on-surface-variant uppercase tracking-wider mb-2">Total Balance</h2>
                        <div class="flex items-baseline gap-2">
                            <span class="font-display-lg text-display-lg text-on-surface" x-text="pointsBalance.toLocaleString()">{{ number_format($wallet->points_balance) }}</span>
                            <span class="font-body-md text-body-md text-primary-fixed-dim">Pts</span>
                        </div>
                        <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">≈ $<span x-text="usdEstimate">{{ number_format($wallet->points_balance * $usdRate, 2) }}</span> USD</p>
                    </div>
                    <div class="flex items-center gap-2 bg-surface-container-high border border-outline-variant/30 px-3 py-1.5 rounded-full">
                        <span class="material-symbols-outlined text-[16px] text-secondary">lock</span>
                        <span class="font-data-label text-data-label text-on-surface-variant">SHA-256</span>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-outline-variant/30 flex gap-4 z-10">
                    <button @click="cashoutModalOpen = true" class="flex-1 bg-secondary-container text-on-secondary-container hover:bg-secondary transition-colors font-data-label text-data-label py-3 rounded-lg flex items-center justify-center gap-2 shadow-[0_4px_20px_rgba(78,222,163,0.15)] active:scale-95">
                        <span class="material-symbols-outlined text-[18px]">account_balance</span>
                        Withdraw Funds
                    </button>
                </div>
            </section>

            {{-- Buy Points — all 8 gateways --}}
            <section class="glass-surface rounded-xl p-lg flex flex-col gap-md">
                <h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">Top Up Wallet</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Select a payment method to buy more points for boosting posts.</p>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    @foreach([
                        ['gateway' => 'stripe', 'icon' => 'credit_card', 'label' => 'Card'],
                        ['gateway' => 'paypal', 'icon' => 'account_balance_wallet', 'label' => 'PayPal'],
                        ['gateway' => 'paystack', 'icon' => 'payments', 'label' => 'Paystack'],
                        ['gateway' => 'flutterwave', 'icon' => 'bolt', 'label' => 'Flutterwave'],
                        ['gateway' => 'mpesa', 'icon' => 'smartphone', 'label' => 'M-Pesa'],
                        ['gateway' => 'mtn_momo', 'icon' => 'smartphone', 'label' => 'MTN MoMo'],
                        ['gateway' => 'bank_transfer', 'icon' => 'account_balance', 'label' => 'Bank Transfer'],
                        ['gateway' => 'crypto', 'icon' => 'currency_bitcoin', 'label' => 'Crypto'],
                    ] as $method)
                    <button
                        @click="selectGateway('{{ $method['gateway'] }}')"
                        class="bg-surface-container-lowest border border-outline-variant/50 hover:border-primary hover:bg-surface-variant/30 transition-all rounded-lg p-4 flex flex-col items-center gap-3 active:scale-95 group relative overflow-hidden"
                        :class="{ 'border-primary bg-surface-variant/30': activeGateway === '{{ $method['gateway'] }}' }"
                    >
                        @if($method['gateway'] === 'crypto')
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-tertiary/10 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]"></div>
                        @endif
                        <div class="w-10 h-10 rounded-full bg-surface-bright flex items-center justify-center group-hover:bg-primary-container/20 transition-colors relative z-10">
                            <span class="material-symbols-outlined {{ $method['gateway'] === 'crypto' ? 'text-tertiary' : 'text-on-surface' }}">{{ $method['icon'] }}</span>
                        </div>
                        <span class="font-data-label text-data-label text-on-surface relative z-10">{{ $method['label'] }}</span>
                    </button>
                    @endforeach
                </div>

                {{-- Points package selector + gateway-specific fields --}}
                <div x-show="activeGateway" x-cloak class="glass-panel rounded-lg p-md mt-2 flex flex-col gap-md">
                    <div class="grid grid-cols-3 gap-3">
                        @foreach($pointsPackages as $package)
                        <button @click="selectedPackage = {{ $package->id }}; amount = {{ $package->price_usd }}"
                            class="rounded-lg border p-3 text-center transition-colors"
                            :class="selectedPackage === {{ $package->id }} ? 'border-primary bg-primary-container/10' : 'border-outline-variant/40'">
                            <p class="font-bold text-on-surface">{{ number_format($package->points) }} pts</p>
                            <p class="font-data-label text-data-label text-outline">${{ number_format($package->price_usd, 2) }}</p>
                        </button>
                        @endforeach
                    </div>

                    <template x-if="activeGateway === 'crypto'">
                        <div class="grid grid-cols-2 gap-3">
                            <select x-model="cryptoAsset" class="bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-2 text-on-surface">
                                <option value="USDT">USDT</option>
                                <option value="BTC">BTC</option>
                                <option value="ETH">ETH</option>
                                <option value="BNB">BNB</option>
                                <option value="MATIC">MATIC (Polygon)</option>
                            </select>
                            <select x-model="cryptoNetwork" class="bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-2 text-on-surface">
                                <option value="ethereum">Ethereum</option>
                                <option value="bsc">BNB Smart Chain</option>
                                <option value="polygon">Polygon</option>
                                <option value="tron">Tron</option>
                                <option value="bitcoin">Bitcoin</option>
                            </select>
                        </div>
                    </template>

                    <template x-if="['mpesa', 'mtn_momo'].includes(activeGateway)">
                        <input x-model="phone" placeholder="Phone number (e.g. +2547...)" class="bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-2 text-on-surface w-full">
                    </template>

                    <button @click="startPurchase()" class="w-full py-3 bg-primary-container text-on-primary-container font-bold rounded-lg hover:opacity-90 active:scale-95 transition-all">
                        Continue
                    </button>

                    <p x-show="purchaseMessage" x-text="purchaseMessage" class="font-body-sm text-body-sm text-secondary"></p>
                </div>
            </section>

            {{-- Recent Earnings --}}
            <section class="flex flex-col gap-sm mt-4">
                <div class="flex justify-between items-center mb-2 px-1">
                    <h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">Recent Earnings</h3>
                    <a class="font-data-label text-data-label text-primary hover:underline" href="{{ route('wallet.transactions.page') }}">View All</a>
                </div>
                <div class="glass-surface rounded-xl divide-y divide-outline-variant/30">
                    @forelse($recentTransactions as $tx)
                    <div class="p-4 flex items-center justify-between hover:bg-surface-variant/20 transition-colors">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-primary-fixed-dim">{{ $tx->points_delta >= 0 ? 'trending_up' : 'trending_down' }}</span>
                            </div>
                            <div>
                                <h4 class="font-body-md text-body-md text-on-surface font-medium">{{ Str::headline($tx->type) }}</h4>
                                <p class="font-body-sm text-body-sm text-on-surface-variant">{{ $tx->created_at->format('M j, g:i A') }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="font-data-label text-data-label {{ $tx->points_delta >= 0 ? 'text-secondary' : 'text-error' }} block">{{ $tx->points_delta >= 0 ? '+' : '' }}{{ number_format($tx->points_delta) }} Pts</span>
                        </div>
                    </div>
                    @empty
                    <div class="p-6 text-center text-on-surface-variant font-body-sm text-body-sm">No transactions yet.</div>
                    @endforelse
                </div>
            </section>
        </div>

        {{-- Right column: ad simulator + quick boost --}}
        <div class="lg:col-span-4 flex flex-col gap-lg">
            @if($adStats)
            <section class="shimmer-border p-[3px] bg-surface-container-high rounded-xl">
                <div class="bg-surface-container-highest rounded-lg p-lg h-full flex flex-col relative overflow-hidden">
                    <div class="flex items-center justify-between mb-6 z-10">
                        <h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">Ad Simulator</h3>
                        <span class="material-symbols-outlined text-tertiary">trending_up</span>
                    </div>
                    <div class="grid grid-cols-2 gap-4 mb-6 z-10">
                        <div class="bg-surface-container-lowest border border-outline-variant/30 rounded-lg p-3">
                            <p class="font-data-label text-data-label text-on-surface-variant mb-1 uppercase text-[10px]">Impressions Today</p>
                            <p class="font-body-md text-body-md text-on-surface font-medium">{{ number_format($adStats['impressions_today']) }}</p>
                        </div>
                        <div class="bg-surface-container-lowest border border-outline-variant/30 rounded-lg p-3">
                            <p class="font-data-label text-data-label text-on-surface-variant mb-1 uppercase text-[10px]">Est. Earnings</p>
                            <p class="font-body-md text-body-md text-on-surface font-medium">${{ number_format($adStats['dummy_earnings_today'], 2) }}</p>
                        </div>
                    </div>
                </div>
            </section>
            @endif

            <section class="glass-surface rounded-xl p-md flex items-center justify-between bg-gradient-to-br from-surface-container-high to-surface-container">
                <div>
                    <h4 class="font-body-md text-body-md text-on-surface font-medium">Boost a Post</h4>
                    <p class="font-body-sm text-body-sm text-on-surface-variant">Use points for reach</p>
                </div>
                <a href="{{ route('statuses.compose') }}" class="bg-gradient-to-r from-tertiary to-tertiary-container text-white p-2 rounded-lg shadow-lg active:scale-95 transition-transform flex items-center justify-center">
                    <span class="material-symbols-outlined">rocket_launch</span>
                </a>
            </section>
        </div>
    </div>

    {{-- Cashout Modal --}}
    <div x-show="cashoutModalOpen" x-cloak class="fixed inset-0 z-[100] flex items-center justify-center px-4 backdrop-blur-sm bg-background/80">
        <div class="glass-modal rounded-xl overflow-hidden shadow-2xl sm:max-w-md w-full relative">
            <div class="px-6 py-4 border-b border-outline-variant/30 flex justify-between items-center bg-surface-container-high/50">
                <h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">Withdraw Funds</h3>
                <button @click="cashoutModalOpen = false" class="text-on-surface-variant hover:text-on-surface p-1 rounded-full hover:bg-surface-variant/50">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="p-6 flex flex-col gap-md">
                <div>
                    <label class="block font-data-label text-data-label text-on-surface-variant mb-2">Points to Withdraw</label>
                    <input type="number" x-model.number="cashoutPoints" min="100" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface input-glow outline-none">
                </div>
                <div>
                    <label class="block font-data-label text-data-label text-on-surface-variant mb-2">Withdrawal Method</label>
                    <select x-model="cashoutMethod" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="mobile_money">Mobile Money</option>
                        <option value="paypal">PayPal</option>
                        <option value="paystack">Paystack</option>
                        <option value="flutterwave">Flutterwave</option>
                        <option value="crypto">Crypto</option>
                    </select>
                </div>
                <template x-if="cashoutMethod === 'crypto'">
                    <input x-model="cashoutPayout.wallet_address" placeholder="Wallet address" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
                </template>
                <template x-if="cashoutMethod === 'paypal'">
                    <input x-model="cashoutPayout.paypal_email" placeholder="PayPal email" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
                </template>
                <template x-if="['bank_transfer', 'mobile_money'].includes(cashoutMethod)">
                    <div class="flex flex-col gap-2">
                        <input x-model="cashoutPayout.account_name" placeholder="Account name" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
                        <input x-model="cashoutPayout.account_number" placeholder="Account / phone number" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
                    </div>
                </template>

                <button @click="submitCashout()" class="w-full bg-secondary-container text-on-secondary-container hover:bg-secondary transition-colors font-data-label text-data-label py-3 rounded-lg flex items-center justify-center gap-2 shadow-[0_4px_20px_rgba(78,222,163,0.15)] active:scale-95">
                    Confirm Withdrawal
                </button>
                <p x-show="cashoutMessage" x-text="cashoutMessage" class="font-body-sm text-body-sm text-secondary text-center"></p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function walletDashboard({ balanceUrl, purchaseUrl, cashoutUrl }) {
    return {
        pointsBalance: {{ $wallet->points_balance }},
        usdEstimate: '{{ number_format($wallet->points_balance * $usdRate, 2) }}',
        activeGateway: null,
        selectedPackage: null,
        amount: null,
        phone: '',
        cryptoAsset: 'USDT',
        cryptoNetwork: 'bsc',
        purchaseMessage: '',
        cashoutModalOpen: false,
        cashoutPoints: 100,
        cashoutMethod: 'bank_transfer',
        cashoutPayout: {},
        cashoutMessage: '',

        async loadBalance() {
            try {
                const { data } = await window.axios.get(balanceUrl);
                this.pointsBalance = data.points_balance;
                this.usdEstimate = data.usd_estimate.toFixed(2);
            } catch (e) { /* keep server-rendered value on failure */ }
        },
        selectGateway(gateway) {
            this.activeGateway = this.activeGateway === gateway ? null : gateway;
            this.purchaseMessage = '';
        },
        async startPurchase() {
            try {
                const { data } = await window.axios.post(purchaseUrl, {
                    points_package_id: this.selectedPackage,
                    amount: this.amount,
                    gateway: this.activeGateway,
                    phone: this.phone,
                    crypto_asset: this.activeGateway === 'crypto' ? this.cryptoAsset : undefined,
                    crypto_network: this.activeGateway === 'crypto' ? this.cryptoNetwork : undefined,
                });
                if (data.gateway_response.redirect_url) {
                    window.location.href = data.gateway_response.redirect_url;
                } else if (data.gateway_response.deposit_address) {
                    this.purchaseMessage = `Send to ${data.gateway_response.deposit_address} (${data.gateway_response.asset}/${data.gateway_response.network})`;
                } else {
                    this.purchaseMessage = data.gateway_response.message || 'Payment initiated — check your phone.';
                }
            } catch (e) {
                this.purchaseMessage = e.response?.data?.message || 'Unable to start payment.';
            }
        },
        async submitCashout() {
            try {
                await window.axios.post(cashoutUrl, {
                    points_requested: this.cashoutPoints,
                    method: this.cashoutMethod,
                    crypto_asset: this.cashoutMethod === 'crypto' ? this.cryptoAsset : undefined,
                    crypto_network: this.cashoutMethod === 'crypto' ? this.cryptoNetwork : undefined,
                    payout_details: this.cashoutPayout,
                });
                this.cashoutMessage = 'Withdrawal request submitted for review.';
                this.pointsBalance -= this.cashoutPoints;
            } catch (e) {
                this.cashoutMessage = e.response?.data?.message || 'Unable to submit withdrawal.';
            }
        },
    };
}
</script>
@endpush