@php
    $available = (float) $wallet->available_balance;
    $pending = (float) $wallet->pending_balance;

    $transactionStatus = [
        'approved' => ['label' => 'সফল', 'icon' => 'check-circle', 'class' => 'border-success/50 bg-success/10 text-success'],
        'pending' => ['label' => 'অপেক্ষমাণ', 'icon' => 'clock', 'class' => 'border-info/50 bg-info/10 text-info'],
        'rejected' => ['label' => 'ব্যর্থ', 'icon' => 'x-circle', 'class' => 'border-danger/50 bg-danger/10 text-danger'],
    ];
    $transactionTypes = [
        'earning' => 'আয়',
        'bonus' => 'বোনাস',
        'withdrawal' => 'উত্তোলন',
        'deposit' => 'জমা',
        'adjustment' => 'সমন্বয়',
        'package_purchase' => 'প্যাকেজ কেনা',
    ];
    $withdrawalStatus = [
        'pending' => ['label' => 'অপেক্ষমাণ', 'class' => 'border-info/50 bg-info/10 text-info'],
        'processing' => ['label' => 'প্রসেসিং', 'class' => 'border-info/50 bg-info/10 text-info'],
        'paid' => ['label' => 'পরিশোধিত', 'class' => 'border-success/50 bg-success/10 text-success'],
        'rejected' => ['label' => 'ব্যর্থ', 'class' => 'border-danger/50 bg-danger/10 text-danger'],
    ];
@endphp

<x-layouts.app title="ওয়ালেট">
    <h1 class="text-xl font-bold">ওয়ালেট</h1>
    <p class="mt-1 text-sm text-ink-muted">আপনার ব্যালেন্স, আয় ও উত্তোলনের সারসংক্ষেপ</p>

    <section class="mt-4 rounded-2xl border border-panel-border bg-panel p-5" aria-labelledby="wallet-balance-heading">
        <h2 id="wallet-balance-heading" class="text-center text-sm font-medium text-ink-muted">উত্তোলনযোগ্য ব্যালেন্স</h2>
        <p class="mt-1 text-center text-[32px] font-bold leading-tight text-gold">৳ {{ number_format($available, 2) }}</p>

        <div class="mt-4 flex items-center justify-between border-t border-panel-border pt-3 text-sm">
            <span class="text-ink-muted">অপেক্ষমাণ আয়</span>
            <span class="font-semibold">৳ {{ number_format($pending, 2) }}</span>
        </div>

        <p class="mt-2 text-xs leading-relaxed text-ink-muted/80">
            অপেক্ষমাণ আয় অনুমোদনের পর উত্তোলনযোগ্য ব্যালেন্সে যোগ হবে।
        </p>
    </section>

    <nav class="mt-4 grid grid-cols-3 gap-2" aria-label="ওয়ালেট কার্যক্রম">
        @if ($withdrawalsEnabled)
            @if ($canWithdraw)
                <a href="{{ route('withdrawals.create') }}" class="flex min-h-[84px] flex-col items-center justify-center gap-1.5 rounded-xl border border-line bg-surface-raised px-2 py-3 text-center transition-colors hover:border-gold-deep focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold">
                    <x-icon name="wallet" class="h-6 w-6 text-gold"/>
                    <span class="text-xs font-semibold">টাকা উত্তোলন</span>
                </a>
            @else
                <div class="flex min-h-[84px] flex-col items-center justify-center gap-1.5 rounded-xl border border-line bg-surface px-2 py-3 text-center opacity-60" aria-disabled="true">
                    <x-icon name="wallet" class="h-6 w-6 text-ink-muted"/>
                    <span class="text-xs font-semibold text-ink-muted">টাকা উত্তোলন</span>
                </div>
            @endif
        @endif

        <a href="{{ route('deposits.create') }}" class="flex min-h-[84px] flex-col items-center justify-center gap-1.5 rounded-xl border border-line bg-surface-raised px-2 py-3 text-center transition-colors hover:border-gold-deep focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold">
            <x-icon name="plus" class="h-6 w-6 text-gold"/>
            <span class="text-xs font-semibold">টাকা জমা</span>
        </a>

        <a href="{{ route('transactions.index') }}" class="flex min-h-[84px] flex-col items-center justify-center gap-1.5 rounded-xl border border-line bg-surface-raised px-2 py-3 text-center transition-colors hover:border-gold-deep focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold">
            <x-icon name="receipt" class="h-6 w-6 text-gold"/>
            <span class="text-xs font-semibold">লেনদেন</span>
        </a>
    </nav>

    @if ($withdrawalsEnabled && ! $openWithdrawal)
        @if (! $hasActivePackage)
            <div class="mt-3 rounded-xl border border-gold-deep/60 bg-gold/10 px-4 py-3 text-xs leading-relaxed text-ink-muted" role="note">
                <p class="font-semibold text-gold">প্যাকেজ কিনে আয় বাড়ান</p>
                <p class="mt-1"> প্যাকেজ থেকে ইঙ্কাম করুন । প্যাকেজ কিনলে ২০ দিন পর্যন্ত প্রতিদিন আয় পাবেন।</p>
                <a href="{{ route('packages.index') }}" class="mt-2 inline-flex font-semibold text-gold hover:underline">প্যাকেজ কিনুন →</a>
            </div>
        @elseif (! $canWithdraw)
            <p class="mt-3 rounded-xl border border-line bg-surface px-4 py-3 text-xs leading-relaxed text-ink-muted" role="note">
                উত্তোলনের জন্য সর্বনিম্ন ৳ {{ number_format($minimum, 2) }} উত্তোলনযোগ্য ব্যালেন্স প্রয়োজন।
            </p>
        @endif
    @endif

    @if ($openWithdrawal)
        @php
            $openMeta = $withdrawalStatus[$openWithdrawal->status] ?? $withdrawalStatus['pending'];
        @endphp
        <section class="mt-4 rounded-2xl border border-info/40 bg-info/10 p-4" aria-labelledby="open-withdrawal-heading">
            <div class="flex items-center gap-2">
                <x-icon name="clock" class="h-5 w-5 text-info"/>
                <h2 id="open-withdrawal-heading" class="font-bold">চলমান উত্তোলনের অনুরোধ</h2>
            </div>
            <div class="mt-2 flex items-center justify-between gap-3 text-sm">
                <span class="text-ink-muted">পরিমাণ</span>
                <span class="font-bold">৳ {{ number_format((float) $openWithdrawal->amount, 2) }}</span>
            </div>
            <div class="mt-1.5 flex items-center justify-between gap-3 text-sm">
                <span class="text-ink-muted">অবস্থা</span>
                <span class="badge {{ $openMeta['class'] }}">{{ $openMeta['label'] }}</span>
            </div>
            <p class="mt-2 text-xs leading-relaxed text-ink-muted">
                অনুরোধটি সম্পন্ন হওয়ার আগে নতুন উত্তোলনের অনুরোধ করা যাবে না।
            </p>
        </section>
    @endif

    <section class="mt-4" aria-labelledby="recent-transactions-heading">
        <div class="flex items-center justify-between gap-2">
            <h2 id="recent-transactions-heading" class="text-lg font-bold">সাম্প্রতিক লেনদেন</h2>
            <a href="{{ route('transactions.index') }}" class="text-sm font-semibold text-info hover:underline">সব দেখুন</a>
        </div>

        @if ($recentTransactions->isEmpty())
            <div class="mt-3">
                <x-empty-state icon="receipt" title="এখনো কোনো লেনদেন নেই" message="আয় বা উত্তোলন হলে এখানে সাম্প্রতিক লেনদেন দেখতে পাবেন।"/>
            </div>
        @else
            <div class="mt-3 space-y-2">
                @foreach ($recentTransactions as $transaction)
                    @php
                        $meta = $transactionStatus[$transaction->status] ?? $transactionStatus['pending'];
                        $isIncoming = in_array($transaction->type, ['earning', 'bonus', 'deposit', 'adjustment'], true);
                    @endphp
                    <article class="card">
                        <div class="flex items-center justify-between gap-3">
                            <p class="font-bold">{{ $transactionTypes[$transaction->type] ?? $transaction->type }}</p>
                            <p class="font-bold {{ $isIncoming ? 'text-success' : 'text-danger' }}">
                                {{ $isIncoming ? '+' : '−' }} ৳ {{ number_format((float) $transaction->amount, 2) }}
                            </p>
                        </div>
                        <div class="mt-1.5 flex items-center justify-between gap-3">
                            <span class="badge {{ $meta['class'] }}">
                                <x-icon :name="$meta['icon']" class="h-3.5 w-3.5"/>
                                {{ $meta['label'] }}
                            </span>
                            <p class="text-xs text-ink-muted">{{ $transaction->created_at->format('d/m/Y, h:i a') }}</p>
                        </div>
                        @if ($transaction->description)
                            <p class="mt-1.5 text-sm text-ink-muted">{{ $transaction->description }}</p>
                        @endif
                    </article>
                @endforeach
            </div>
        @endif
    </section>

    <section class="mt-4" aria-labelledby="recent-withdrawals-heading">
        <h2 id="recent-withdrawals-heading" class="text-lg font-bold">সাম্প্রতিক উত্তোলন</h2>

        @if ($recentWithdrawals->isEmpty())
            <div class="mt-3">
                <x-empty-state icon="wallet" title="এখনো কোনো উত্তোলন নেই" message="উত্তোলনের অনুরোধ করলে এখানে তার অবস্থা দেখতে পাবেন।"/>
            </div>
        @else
            <div class="mt-3 space-y-2">
                @foreach ($recentWithdrawals as $withdrawal)
                    @php
                        $meta = $withdrawalStatus[$withdrawal->status] ?? $withdrawalStatus['pending'];
                    @endphp
                    <article class="card">
                        <div class="flex items-center justify-between gap-3">
                            <p class="font-bold">৳ {{ number_format((float) $withdrawal->amount, 2) }}</p>
                            <span class="badge {{ $meta['class'] }}">{{ $meta['label'] }}</span>
                        </div>
                        <div class="mt-1.5 flex items-center justify-between gap-3 text-xs text-ink-muted">
                            <span>{{ $withdrawal->requested_at?->format('d/m/Y, h:i a') ?? $withdrawal->created_at->format('d/m/Y, h:i a') }}</span>
                            <span class="select-all">রেফারেন্স: {{ $withdrawal->reference }}</span>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>
</x-layouts.app>