@extends('layouts.app')

@section('title', 'Wallet')

@push('styles')
<style>
    /* ===== Wallet Page ===== */
    .wallet-hero {
        background: linear-gradient(135deg, #10BFFF, #0C2E62);
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        margin-bottom: 2rem;
        color: #fff;
        box-shadow: 0 10px 30px rgba(16, 191, 255, 0.3);
        position: relative;
        overflow: hidden;
    }

    .wallet-hero::after {
        content: '';
        position: absolute;
        top: -30%;
        right: -10%;
        width: 250px;
        height: 250px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

    .wallet-hero-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2.5rem;
    }

    .wallet-hero .balance-label {
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 0.5rem;
    }

    .wallet-hero .balance-amount {
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 800;
        line-height: 1;
    }

    .wallet-hero .balance-sub {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-top: 0.75rem;
    }

    .wallet-hero-icon {
        width: 72px;
        height: 72px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        position: relative;
        z-index: 1;
    }

    .wallet-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        position: relative;
        z-index: 1;
    }

    .wallet-action-btn {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0.875rem;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        font-family: inherit;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }

    .wallet-action-btn:hover {
        background: rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
    }

    /* Balance Cards */
    .balance-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .balance-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
    }

    .balance-card .bc-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .balance-card .bc-value {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .balance-card .bc-label {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .bc-icon.green { background: var(--success-light); color: var(--success); }
    .bc-icon.yellow { background: var(--warning-light); color: var(--warning); }
    .bc-icon.blue { background: var(--accent-light); color: var(--accent); }

    /* Transaction History */
    .table-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
    }

    .table-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .table-header h2 {
        font-size: 1rem;
        font-weight: 600;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th {
        text-align: left;
        padding: 0.75rem 1.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .data-table td {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .data-table tbody tr:hover { background: var(--bg-hover); }
    .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
    .data-table tbody tr:nth-child(even):hover { background: var(--bg-hover); }

    .amount-positive { color: var(--success); font-weight: 600; }
    .amount-negative { color: var(--danger); font-weight: 600; }

    .type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .type-deposit { background: var(--success-light); color: var(--success); }
    .type-withdrawal { background: var(--danger-light); color: var(--danger); }
    .type-escrow { background: var(--accent-light); color: var(--accent); }
    .type-release { background: var(--success-light); color: var(--success); }

    .empty-state {
        text-align: center;
        padding: 2.5rem 1.5rem;
        color: var(--text-muted);
    }

    .empty-state i { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; }

    .pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem 1.5rem;
        gap: 0.25rem;
    }

    .pagination-wrapper .page-link {
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-decoration: none;
        transition: all var(--transition);
    }

    .pagination-wrapper .page-link:hover { border-color: var(--accent); color: var(--accent); }
    .pagination-wrapper .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
    .pagination-wrapper .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }

    /* Modals */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal-box {
        background: var(--bg-card);
        width: 95%;
        max-width: 500px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        animation: modalIn 0.2s ease;
    }

    @keyframes modalIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }

    .modal-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .modal-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1.2rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-body .form-group {
        margin-bottom: 1.25rem;
    }

    .modal-body label {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .modal-body .form-input,
    .modal-body .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
    }

    .modal-body .form-input:focus,
    .modal-body .form-select:focus {
        border-color: var(--accent);
    }

    .modal-body .form-select option {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .btn-full {
        width: 100%;
        margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
        .balance-cards { grid-template-columns: 1fr; }
        .wallet-actions { grid-template-columns: repeat(2, 1fr); }
        .wallet-hero { padding: 1.75rem; }
        .data-table th, .data-table td { padding: 0.625rem 1rem; font-size: 0.8rem; }
    }
</style>
@endpush

@section('content')
    {{-- Wallet Hero Card --}}
    <div class="wallet-hero">
        <div class="wallet-hero-top">
            <div>
                <div class="balance-label">Available Balance</div>
                <div class="balance-amount">{{ $currency ?? '₦' }}{{ number_format($availableBalance ?? 0, 2) }}</div>
                <div class="balance-sub">
                    <i class="fas fa-lock"></i> {{ $currency ?? '₦' }}{{ number_format($inEscrow ?? 0, 2) }} locked in escrow
                </div>
            </div>
            <div class="wallet-hero-icon">
                <i class="fas fa-wallet"></i>
            </div>
        </div>

        <div class="wallet-actions">
            <button class="wallet-action-btn" onclick="openModal('fundModal')">
                <i class="fas fa-plus"></i> Fund Wallet
            </button>
            <button class="wallet-action-btn" onclick="openModal('withdrawModal')">
                <i class="fas fa-arrow-up"></i> Withdraw
            </button>
            <button class="wallet-action-btn" onclick="openModal('sendModal')">
                <i class="fas fa-paper-plane"></i> Send Money
            </button>
        </div>
    </div>

    {{-- Balance Summary Cards --}}
    <div class="balance-cards">
        <div class="balance-card">
            <div class="bc-icon green"><i class="fas fa-check-circle"></i></div>
            <div class="bc-value">{{ $currency ?? '₦' }}{{ number_format($availableBalance ?? 0, 2) }}</div>
            <div class="bc-label">Available Balance</div>
        </div>
        <div class="balance-card">
            <div class="bc-icon yellow"><i class="fas fa-lock"></i></div>
            <div class="bc-value">{{ $currency ?? '₦' }}{{ number_format($inEscrow ?? 0, 2) }}</div>
            <div class="bc-label">In Escrow (Locked)</div>
        </div>
        <div class="balance-card">
            <div class="bc-icon blue"><i class="fas fa-coins"></i></div>
            <div class="bc-value">{{ $currency ?? '₦' }}{{ number_format($totalBalance ?? 0, 2) }}</div>
            <div class="bc-label">Total Balance</div>
        </div>
    </div>

    {{-- Transaction History --}}
    <div class="table-container">
        <div class="table-header">
            <h2><i class="fas fa-history"></i> Transaction History</h2>
        </div>

        @if(isset($walletHistory) && $walletHistory->count())
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Balance After</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($walletHistory as $entry)
                        <tr>
                            <td>{{ $entry->created_at->format('M d, Y h:i A') }}</td>
                            <td>
                                <span class="type-badge type-{{ $entry->type }}">{{ ucfirst($entry->type) }}</span>
                            </td>
                            <td>
                                <span class="{{ in_array($entry->type, ['deposit', 'release']) ? 'amount-positive' : 'amount-negative' }}">
                                    {{ in_array($entry->type, ['deposit', 'release']) ? '+' : '-' }}{{ $currency ?? '₦' }}{{ number_format(abs($entry->amount), 2) }}
                                </span>
                            </td>
                            <td>{{ $currency ?? '₦' }}{{ number_format($entry->balance_after, 2) }}</td>
                            <td>{{ Str::limit($entry->description, 40) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @include('partials.table-pagination', ['paginator' => $walletHistory, 'label' => 'transactions'])
        @else
            <div class="empty-state">
                <i class="fas fa-receipt"></i>
                <p>No transaction history yet.</p>
            </div>
        @endif
    </div>

    {{-- ===== FUND WALLET MODAL ===== --}}
    <div class="modal-overlay" id="fundModal">
        <div class="modal-box">
            <div class="modal-header">
                <h3><i class="fas fa-plus-circle"></i> Fund Wallet</h3>
                <button class="modal-close" onclick="closeModal('fundModal')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('escrow.wallet.fund') }}" id="fundForm">
                    @csrf
                    <div class="form-group">
                        <label for="fundAmount">Amount ({{ $currency ?? '₦' }})</label>
                        <input type="number" class="form-input" id="fundAmount" name="amount" min="100" step="0.01" placeholder="0.00" required>
                        @error('amount')
                            <span style="color: var(--danger); font-size: 0.75rem;">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="paymentMethod">Payment Method</label>
                        <select class="form-select" id="paymentMethod" name="payment_method">
                            <option value="paystack">Paystack</option>
                            <option value="flutterwave">Flutterwave</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-full">
                        <i class="fas fa-wallet"></i> Fund Wallet
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- ===== WITHDRAW MODAL ===== --}}
    <div class="modal-overlay" id="withdrawModal">
        <div class="modal-box">
            <div class="modal-header">
                <h3><i class="fas fa-arrow-up"></i> Withdraw Funds</h3>
                <button class="modal-close" onclick="closeModal('withdrawModal')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('escrow.wallet.withdraw') }}" id="withdrawForm">
                    @csrf
                    <div class="form-group">
                        <label for="withdrawAmount">Amount ({{ $currency ?? '₦' }})</label>
                        <input type="number" class="form-input" id="withdrawAmount" name="amount" min="100" step="0.01" placeholder="0.00" required>
                    </div>
                    <div class="form-group">
                        <label for="bankAccount">Bank Account</label>
                        <select class="form-select" id="bankAccount" name="bank_account_id">
                            @forelse($bankAccounts ?? [] as $account)
                                <option value="{{ $account->id }}">{{ $account->bank_name }} - {{ $account->account_number }}</option>
                            @empty
                                <option value="" disabled>No bank accounts saved</option>
                            @endforelse
                        </select>
                        <span class="help-text" style="font-size:0.78rem;color:var(--text-muted);">For your security, you can only withdraw to your own verified bank account.</span>
                    </div>
                    <div id="withdrawFeePreview" style="display:none;background:rgba(128,128,128,0.08);border-radius:8px;padding:0.65rem 0.85rem;margin-bottom:0.85rem;font-size:0.85rem;">
                        <div style="display:flex;justify-content:space-between;color:var(--text-muted);"><span>Withdrawal fee</span><span id="wfFee">—</span></div>
                        <div style="display:flex;justify-content:space-between;font-weight:600;margin-top:0.25rem;"><span>You'll receive</span><span id="wfNet">—</span></div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-full">
                        <i class="fas fa-arrow-up"></i> Withdraw
                    </button>
                </form>
                <script>
                    (function () {
                        const wf = {
                            type: @json(\App\Models\PlatformSetting::get('withdrawal_fee_type', 'percent')),
                            value: {{ (float) \App\Models\PlatformSetting::get('withdrawal_fee_value', 0) }},
                            min: {{ (float) \App\Models\PlatformSetting::get('withdrawal_fee_min', 0) }},
                            cap: {{ (float) \App\Models\PlatformSetting::get('withdrawal_fee_cap', 0) }}
                        };
                        const amtEl = document.getElementById('withdrawAmount');
                        const box = document.getElementById('withdrawFeePreview');
                        function nf(n) { return '{{ $currency ?? "₦" }}' + parseFloat(n).toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }
                        function upd() {
                            const amt = parseFloat(amtEl.value) || 0;
                            if (amt <= 0) { box.style.display = 'none'; return; }
                            let fee = wf.type === 'flat' ? wf.value : amt * (wf.value / 100);
                            if (wf.min > 0 && fee < wf.min) fee = wf.min;
                            if (wf.cap > 0 && fee > wf.cap) fee = wf.cap;
                            if (fee > amt) fee = amt;
                            document.getElementById('wfFee').textContent = nf(fee);
                            document.getElementById('wfNet').textContent = nf(amt - fee);
                            box.style.display = 'block';
                        }
                        if (amtEl) amtEl.addEventListener('input', upd);
                    })();
                </script>
            </div>
        </div>
    </div>

    {{-- ===== SEND MONEY MODAL ===== --}}
    <div class="modal-overlay" id="sendModal">
        <div class="modal-box">
            <div class="modal-header">
                <h3><i class="fas fa-paper-plane"></i> Send Money</h3>
                <button class="modal-close" onclick="closeModal('sendModal')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('escrow.wallet.send') }}" id="sendForm">
                    @csrf
                    <div class="form-group">
                        <label for="recipientEmail">Recipient (Email or Tenseal ID)</label>
                        <input type="text" class="form-input" id="recipientEmail" name="recipient" placeholder="user@email.com or TS-12345" required>
                    </div>
                    <div class="form-group">
                        <label for="sendAmount">Amount ({{ $currency ?? '₦' }})</label>
                        <input type="number" class="form-input" id="sendAmount" name="amount" min="100" step="0.01" placeholder="0.00" required>
                    </div>
                    <div class="form-group">
                        <label for="sendNote">Note (Optional)</label>
                        <input type="text" class="form-input" id="sendNote" name="note" placeholder="What's this for?">
                    </div>
                    <button type="submit" class="btn btn-primary btn-full">
                        <i class="fas fa-paper-plane"></i> Send Money
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function openModal(id) {
        document.getElementById(id).classList.add('show');
        document.body.style.overflow = 'hidden';
    }

    function closeModal(id) {
        document.getElementById(id).classList.remove('show');
        document.body.style.overflow = '';
    }

    // Close modal on overlay click
    document.querySelectorAll('.modal-overlay').forEach(modal => {
        modal.addEventListener('click', function(e) {
            if (e.target === this) closeModal(this.id);
        });
    });

    // Open withdraw modal if URL hash
    if (window.location.hash === '#withdraw') {
        openModal('withdrawModal');
    }
</script>
@endpush