@extends('layouts.mobile')

@section('title', 'Currency Swap')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-exchange-alt text-white text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-white mb-2">Currency Swap</h1>
        <p class="text-gray-400">Exchange between different currencies instantly</p>
    </div>

    <!-- Current Balances -->
    @if($wallets->count() > 0)
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Your Balances</h3>
        <div class="grid grid-cols-2 gap-3">
            @foreach($wallets as $wallet)
            <div class="bg-dark-800/50 rounded-lg p-3 text-center">
                <p class="text-gray-400 text-xs uppercase">{{ $wallet->currency }}</p>
                <p class="text-white font-semibold">
                    {{ $supportedCurrencies[$wallet->currency]['symbol'] ?? '$' }}{{ number_format($wallet->balance, 2) }}
                </p>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Swap Form -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Swap Currencies</h3>
        
        <form id="swapForm" class="space-y-4">
            @csrf
            <!-- From Currency -->
            <div>
                <label for="fromCurrency" class="form-label">From</label>
                <div class="relative">
                    <select name="from_currency" id="fromCurrency" class="form-input pr-12" required>
                        <option value="">Select currency to swap from</option>
                        @foreach($supportedCurrencies as $code => $currency)
                            <option value="{{ $code }}" {{ $code === 'NGN' ? 'selected' : '' }}>
                                {{ $currency['symbol'] }} {{ $code }} - {{ $currency['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
            </div>

            <!-- Amount -->
            <div>
                <label for="amount" class="form-label">Amount</label>
                <div class="relative">
                    <input type="number" name="amount" id="amount" class="form-input pl-12" placeholder="0.00" min="1" step="0.01" required>
                    <div id="currencySymbol" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">₦</div>
                </div>
                <div id="availableBalance" class="text-xs text-gray-400 mt-1"></div>
            </div>

            <!-- Swap Direction Button -->
            <div class="flex justify-center">
                <button type="button" onclick="swapCurrencies()" class="w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full flex items-center justify-center transition-colors">
                    <i class="fas fa-exchange-alt text-white"></i>
                </button>
            </div>

            <!-- To Currency -->
            <div>
                <label for="toCurrency" class="form-label">To</label>
                <div class="relative">
                    <select name="to_currency" id="toCurrency" class="form-input pr-12" required>
                        <option value="">Select currency to receive</option>
                        @foreach($supportedCurrencies as $code => $currency)
                            <option value="{{ $code }}" {{ $code === 'USD' ? 'selected' : '' }}>
                                {{ $currency['symbol'] }} {{ $code }} - {{ $currency['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
            </div>

            <!-- Get Quote Button -->
            <button type="button" onclick="getQuote()" class="w-full btn btn-primary">
                <i class="fas fa-calculator mr-2"></i>Get Quote
            </button>
        </form>
    </div>

    <!-- Quote Display -->
    <div id="quoteSection" class="card" style="display: none;">
        <h3 class="text-lg font-semibold text-white mb-4">Exchange Quote</h3>
        
        <div id="quoteContent" class="space-y-4">
            <!-- Quote content will be inserted here -->
        </div>
    </div>

    <!-- Supported Currencies -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Supported Currencies</h3>
        <div class="grid grid-cols-2 gap-3">
            @foreach($supportedCurrencies as $code => $currency)
            <div class="flex items-center space-x-3 p-2 bg-dark-800/30 rounded-lg">
                <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
                    <span class="text-white text-xs font-bold">{{ substr($code, 0, 2) }}</span>
                </div>
                <div class="flex-1">
                    <p class="text-white text-sm font-medium">{{ $code }}</p>
                    <p class="text-gray-400 text-xs">{{ $currency['name'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Recent Swaps -->
    @if(count($recentSwaps) > 0)
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Recent Swaps</h3>
        <div class="space-y-3">
            @foreach($recentSwaps as $swap)
            <div class="flex items-center justify-between p-3 bg-dark-800/30 rounded-lg">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-success-600/20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-exchange-alt text-success-400"></i>
                    </div>
                    <div>
                        <p class="text-white text-sm font-medium">
                            {{ $swap['from_amount'] }} {{ $swap['from_currency'] }} → {{ $swap['to_amount'] }} {{ $swap['to_currency'] }}
                        </p>
                        <p class="text-gray-400 text-xs">{{ $swap['created_at'] }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-success-400 text-sm font-medium">Rate: {{ $swap['rate'] }}</p>
                    <p class="text-gray-400 text-xs">Fee: {{ $swap['fee'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Recent Swaps</h3>
        <div class="text-center py-8">
            <div class="w-16 h-16 bg-dark-800 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-exchange-alt text-gray-500 text-2xl"></i>
            </div>
            <p class="text-gray-400 font-medium mb-2">No swaps yet</p>
            <p class="text-gray-500 text-sm">Your currency swaps will appear here</p>
        </div>
    </div>
    @endif

    <!-- Features -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Swap Features</h3>
        <div class="space-y-3">
            <div class="flex items-center">
                <i class="fas fa-bolt text-warning-400 mr-3"></i>
                <span class="text-gray-300 text-sm">Instant currency conversion</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-chart-line text-primary-400 mr-3"></i>
                <span class="text-gray-300 text-sm">Real-time exchange rates</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-shield-alt text-success-400 mr-3"></i>
                <span class="text-gray-300 text-sm">Secure transactions</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-percentage text-purple-400 mr-3"></i>
                <span class="text-gray-300 text-sm">Competitive rates (1% fee)</span>
            </div>
        </div>
    </div>
</div>

<!-- Transaction PIN Modal -->
<div id="pinModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
    <div class="absolute bottom-0 left-0 right-0 bg-dark-900 rounded-t-3xl p-6 slide-up">
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>
        <h3 class="text-xl font-semibold text-white mb-4 text-center">Enter Transaction PIN</h3>
        
        <div class="space-y-4">
            <div class="text-center">
                <p class="text-gray-400 text-sm mb-4">Confirm your currency swap</p>
                <div id="swapSummary" class="bg-dark-800 rounded-lg p-4 mb-4">
                    <!-- Swap summary will be inserted here -->
                </div>
            </div>
            
            <div>
                <input type="password" id="transactionPin" class="form-input text-center text-2xl tracking-widest" placeholder="••••" maxlength="4" pattern="[0-9]{4}">
                <p class="text-xs text-gray-400 mt-1 text-center">Enter your 4-digit transaction PIN</p>
            </div>
            
            <div class="flex space-x-3">
                <button onclick="closePinModal()" class="flex-1 btn btn-secondary">Cancel</button>
                <button onclick="executeSwap()" class="flex-1 btn btn-primary">
                    <i class="fas fa-exchange-alt mr-2"></i>Confirm Swap
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const supportedCurrencies = @json($supportedCurrencies);
let currentQuote = null;

// Update currency symbol when from currency changes
document.getElementById('fromCurrency').addEventListener('change', function() {
    const selectedCurrency = this.value;
    const symbol = supportedCurrencies[selectedCurrency]?.symbol || '';
    document.getElementById('currencySymbol').textContent = symbol;
    updateAvailableBalance();
});

// Update available balance display
function updateAvailableBalance() {
    const fromCurrency = document.getElementById('fromCurrency').value;
    const wallets = @json($wallets);
    
    const wallet = wallets.find(w => w.currency === fromCurrency);
    const balanceEl = document.getElementById('availableBalance');
    
    if (wallet) {
        const symbol = supportedCurrencies[fromCurrency]?.symbol || '';
        balanceEl.textContent = `Available: ${symbol}${parseFloat(wallet.balance).toLocaleString()}`;
        balanceEl.className = 'text-xs text-gray-400 mt-1';
    } else {
        balanceEl.textContent = 'No balance available';
        balanceEl.className = 'text-xs text-red-400 mt-1';
    }
}

// Swap currencies
function swapCurrencies() {
    const fromSelect = document.getElementById('fromCurrency');
    const toSelect = document.getElementById('toCurrency');
    
    const fromValue = fromSelect.value;
    const toValue = toSelect.value;
    
    fromSelect.value = toValue;
    toSelect.value = fromValue;
    
    // Update currency symbol
    const symbol = supportedCurrencies[toValue]?.symbol || '';
    document.getElementById('currencySymbol').textContent = symbol;
    updateAvailableBalance();
    
    // Clear previous quote
    document.getElementById('quoteSection').style.display = 'none';
    currentQuote = null;
}

// Get exchange quote
async function getQuote() {
    const fromCurrency = document.getElementById('fromCurrency').value;
    const toCurrency = document.getElementById('toCurrency').value;
    const amount = document.getElementById('amount').value;
    
    if (!fromCurrency || !toCurrency || !amount || amount <= 0) {
        showToast('Please fill in all fields with valid values', 'error');
        return;
    }
    
    if (fromCurrency === toCurrency) {
        showToast('Please select different currencies', 'error');
        return;
    }
    
    try {
        showLoadingQuote();
        
        const response = await fetch('{{ route('swap.quote') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                from_currency: fromCurrency,
                to_currency: toCurrency,
                amount: amount
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentQuote = data.quote;
            displayQuote(data.quote);
        } else {
            showToast(data.message || 'Failed to get quote', 'error');
            hideQuote();
        }
        
    } catch (error) {
        console.error('Quote error:', error);
        showToast('Failed to get exchange quote', 'error');
        hideQuote();
    }
}

// Display quote
function displayQuote(quote) {
    const quoteSection = document.getElementById('quoteSection');
    const quoteContent = document.getElementById('quoteContent');
    
    const fromSymbol = supportedCurrencies[quote.from_currency]?.symbol || '';
    const toSymbol = supportedCurrencies[quote.to_currency]?.symbol || '';
    
    const expiresAt = new Date(quote.expires_at).toLocaleTimeString();
    
    let html = `
        <div class="bg-gradient-to-r from-primary-600/20 to-purple-600/20 border border-primary-600/30 rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="text-center">
                    <p class="text-gray-400 text-sm">You Send</p>
                    <p class="text-xl font-bold text-white">${fromSymbol}${parseFloat(quote.amount).toLocaleString()}</p>
                    <p class="text-gray-400 text-xs">${quote.from_currency}</p>
                </div>
                <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
                    <i class="fas fa-arrow-right text-white"></i>
                </div>
                <div class="text-center">
                    <p class="text-gray-400 text-sm">You Receive</p>
                    <p class="text-xl font-bold text-success-400">${toSymbol}${parseFloat(quote.final_amount).toLocaleString()}</p>
                    <p class="text-gray-400 text-xs">${quote.to_currency}</p>
                </div>
            </div>
            
            <div class="border-t border-gray-700 pt-3 space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-400">Exchange Rate</span>
                    <span class="text-white">1 ${quote.from_currency} = ${quote.exchange_rate} ${quote.to_currency}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-400">Fee (${quote.fee_percentage}%)</span>
                    <span class="text-white">${fromSymbol}${parseFloat(quote.fee_amount).toLocaleString()}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-400">Quote Expires</span>
                    <span class="text-warning-400">${expiresAt}</span>
                </div>
            </div>
        </div>
    `;
    
    if (!quote.sufficient_balance) {
        html += `
            <div class="bg-error-600/20 border border-error-600 rounded-lg p-3 mt-4">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-error-400 mr-2"></i>
                    <span class="text-error-400 text-sm">Insufficient balance for this swap</span>
                </div>
            </div>
        `;
    } else {
        html += `
            <button onclick="showPinModal()" class="w-full btn btn-primary mt-4">
                <i class="fas fa-exchange-alt mr-2"></i>Proceed with Swap
            </button>
        `;
    }
    
    quoteContent.innerHTML = html;
    quoteSection.style.display = 'block';
}

// Show loading state for quote
function showLoadingQuote() {
    const quoteSection = document.getElementById('quoteSection');
    const quoteContent = document.getElementById('quoteContent');
    
    quoteContent.innerHTML = `
        <div class="text-center py-8">
            <div class="w-8 h-8 border-2 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p class="text-gray-400">Getting exchange quote...</p>
        </div>
    `;
    
    quoteSection.style.display = 'block';
}

// Hide quote
function hideQuote() {
    document.getElementById('quoteSection').style.display = 'none';
    currentQuote = null;
}

// Show PIN modal
function showPinModal() {
    if (!currentQuote) {
        showToast('Please get a fresh quote first', 'error');
        return;
    }
    
    const modal = document.getElementById('pinModal');
    const summary = document.getElementById('swapSummary');
    
    const fromSymbol = supportedCurrencies[currentQuote.from_currency]?.symbol || '';
    const toSymbol = supportedCurrencies[currentQuote.to_currency]?.symbol || '';
    
    summary.innerHTML = `
        <div class="text-center">
            <p class="text-white font-medium">
                ${fromSymbol}${parseFloat(currentQuote.amount).toLocaleString()} ${currentQuote.from_currency}
            </p>
            <i class="fas fa-arrow-down text-gray-400 my-2"></i>
            <p class="text-success-400 font-medium">
                ${toSymbol}${parseFloat(currentQuote.final_amount).toLocaleString()} ${currentQuote.to_currency}
            </p>
        </div>
    `;
    
    modal.classList.remove('hidden');
    document.getElementById('transactionPin').focus();
}

// Close PIN modal
function closePinModal() {
    document.getElementById('pinModal').classList.add('hidden');
    document.getElementById('transactionPin').value = '';
}

// Execute swap
async function executeSwap() {
    const pin = document.getElementById('transactionPin').value;
    
    if (!pin || pin.length !== 4) {
        showToast('Please enter a 4-digit transaction PIN', 'error');
        return;
    }
    
    if (!currentQuote) {
        showToast('Quote expired. Please get a new quote.', 'error');
        closePinModal();
        return;
    }
    
    const executeBtn = document.querySelector('#pinModal button:last-child');
    const originalText = executeBtn.innerHTML;
    executeBtn.disabled = true;
    executeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
    
    try {
        const response = await fetch('{{ route('swap.execute') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                from_currency: currentQuote.from_currency,
                to_currency: currentQuote.to_currency,
                amount: currentQuote.amount,
                expected_rate: currentQuote.exchange_rate,
                transaction_pin: pin
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast('Currency swap completed successfully!', 'success');
            closePinModal();
            hideQuote();
            
            // Refresh page to show updated balances
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else {
            showToast(data.message || 'Swap failed. Please try again.', 'error');
        }
        
    } catch (error) {
        console.error('Swap error:', error);
        showToast('Swap failed. Please try again.', 'error');
    } finally {
        executeBtn.disabled = false;
        executeBtn.innerHTML = originalText;
    }
}

// Utility function
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 ${type === 'success' ? 'bg-success-600' : type === 'error' ? 'bg-error-600' : 'bg-primary-600'}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateAvailableBalance();
    
    // Auto-focus amount field when currencies are selected
    document.getElementById('amount').addEventListener('input', function() {
        if (this.value && document.getElementById('fromCurrency').value && document.getElementById('toCurrency').value) {
            // Auto-get quote after a delay
            clearTimeout(this.quoteTimeout);
            this.quoteTimeout = setTimeout(getQuote, 1000);
        }
    });
});
</script>
@endpush
@endsection