{{-- Currency Converter Widget --}}
<div class="widget-card" id="currency-converter">
    <div class="widget-header">
        <h2 class="text-lg font-semibold text-slate-800 flex items-center gap-2">
            <span class="text-2xl">💱</span>
            Currency Converter
        </h2>
        <p class="text-sm text-slate-600">Real-time exchange rate conversion</p>
    </div>
    
    <div class="widget-body">
        <form id="converter-form" class="space-y-4">
            {{-- Amount Input --}}
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Amount</label>
                <div class="relative">
                    <input type="number" 
                           id="converter-amount" 
                           class="w-full px-4 py-3 border border-slate-300 rounded-lg text-lg font-semibold focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors" 
                           placeholder="Enter amount..." 
                           value="1" 
                           min="0" 
                           step="0.01">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                        <span class="text-slate-400">💰</span>
                    </div>
                </div>
            </div>

            {{-- From Currency --}}
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">From</label>
                <select id="converter-from" class="w-full px-4 py-3 border border-slate-300 rounded-lg font-medium focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors appearance-none bg-white">
                    @foreach($availableCurrencies ?? [] as $currency)
                        <option value="{{ $currency->code }}" {{ $currency->code === 'USD' ? 'selected' : '' }}>
                            {{ $currency->code }} - {{ $currency->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Swap Button --}}
            <div class="flex justify-center">
                <button type="button" 
                        id="swap-currencies" 
                        class="p-3 bg-blue-100 hover:bg-blue-200 text-blue-600 rounded-full transition-all duration-200 hover:scale-110">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                    </svg>
                </button>
            </div>

            {{-- To Currency --}}
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">To</label>
                <select id="converter-to" class="w-full px-4 py-3 border border-slate-300 rounded-lg font-medium focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors appearance-none bg-white">
                    @foreach($availableCurrencies ?? [] as $currency)
                        <option value="{{ $currency->code }}" {{ $currency->code === 'EUR' ? 'selected' : '' }}>
                            {{ $currency->code }} - {{ $currency->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Convert Button --}}
            <button type="submit" 
                    id="convert-button"
                    class="w-full py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg">
                <span class="flex items-center justify-center gap-2">
                    <span id="convert-text">Convert</span>
                    <div id="convert-loading" class="hidden">
                        <div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
                    </div>
                </span>
            </button>
        </form>

        {{-- Result Display --}}
        <div id="conversion-result" class="hidden mt-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg">
            <div class="text-center">
                <div id="result-amount" class="text-2xl font-bold text-green-600 mb-1"></div>
                <div id="result-rate" class="text-sm text-green-700 mb-2"></div>
                <div id="result-updated" class="text-xs text-green-600"></div>
            </div>
        </div>

        {{-- Error Display --}}
        <div id="conversion-error" class="hidden mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
            <div class="flex items-center gap-2">
                <span class="text-red-500">⚠️</span>
                <span id="error-message" class="text-red-700 text-sm"></span>
            </div>
        </div>

        {{-- Exchange Rate Display --}}
        <div id="rate-display" class="mt-4 p-3 bg-slate-50 border border-slate-200 rounded-lg hidden">
            <div class="flex justify-between items-center text-sm">
                <span class="text-slate-600">Current Rate:</span>
                <span id="current-rate" class="font-medium text-slate-800"></span>
            </div>
            <div class="flex justify-between items-center text-xs mt-1">
                <span class="text-slate-500">Last Updated:</span>
                <span id="rate-updated" class="text-slate-600"></span>
            </div>
        </div>
    </div>
</div>

<style>
#currency-converter select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 3rem;
}

#currency-converter .widget-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

#currency-converter .widget-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

#currency-converter input[type="number"]::-webkit-outer-spin-button,
#currency-converter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#currency-converter input[type="number"] {
    -moz-appearance: textfield;
}

@keyframes pulse-success {
    0% { background-color: rgb(34, 197, 94); }
    50% { background-color: rgb(21, 128, 61); }
    100% { background-color: rgb(34, 197, 94); }
}

.success-pulse {
    animation: pulse-success 0.5s ease-in-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('converter-form');
    const amountInput = document.getElementById('converter-amount');
    const fromSelect = document.getElementById('converter-from');
    const toSelect = document.getElementById('converter-to');
    const swapButton = document.getElementById('swap-currencies');
    const convertButton = document.getElementById('convert-button');
    const convertText = document.getElementById('convert-text');
    const convertLoading = document.getElementById('convert-loading');
    const resultDiv = document.getElementById('conversion-result');
    const errorDiv = document.getElementById('conversion-error');
    const rateDisplay = document.getElementById('rate-display');
    const resultAmount = document.getElementById('result-amount');
    const resultRate = document.getElementById('result-rate');
    const resultUpdated = document.getElementById('result-updated');
    const errorMessage = document.getElementById('error-message');
    const currentRate = document.getElementById('current-rate');
    const rateUpdated = document.getElementById('rate-updated');

    // Auto-convert on input change with debounce
    let convertTimeout;
    function debounceConvert() {
        clearTimeout(convertTimeout);
        convertTimeout = setTimeout(() => {
            if (amountInput.value && parseFloat(amountInput.value) > 0) {
                performConversion();
            }
        }, 500);
    }

    amountInput.addEventListener('input', debounceConvert);
    fromSelect.addEventListener('change', debounceConvert);
    toSelect.addEventListener('change', debounceConvert);

    // Swap currencies
    swapButton.addEventListener('click', function() {
        const fromValue = fromSelect.value;
        const toValue = toSelect.value;
        
        fromSelect.value = toValue;
        toSelect.value = fromValue;
        
        // Add animation
        swapButton.style.transform = 'rotate(180deg)';
        setTimeout(() => {
            swapButton.style.transform = 'rotate(0deg)';
        }, 200);
        
        debounceConvert();
    });

    // Form submit
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        performConversion();
    });

    // Perform conversion
    async function performConversion() {
        const amount = parseFloat(amountInput.value);
        const from = fromSelect.value;
        const to = toSelect.value;

        if (!amount || amount <= 0) {
            showError('Please enter a valid amount');
            return;
        }

        if (from === to) {
            showResult(amount, 1, from, to, new Date().toISOString());
            return;
        }

        // Show loading
        setLoading(true);
        hideError();
        hideResult();

        try {
            const response = await fetch('{{ route("user.currency.convert") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                },
                body: JSON.stringify({ amount, from, to })
            });

            const data = await response.json();

            if (data.success) {
                showResult(data.result, data.rate, data.from, data.to, data.updated_at);
                showRate(data.rate, data.from, data.to, data.updated_at);
            } else {
                showError(data.message || 'Conversion failed');
            }
        } catch (error) {
            console.error('Conversion error:', error);
            showError('Network error. Please try again.');
        } finally {
            setLoading(false);
        }
    }

    // Show/hide loading state
    function setLoading(loading) {
        if (loading) {
            convertText.classList.add('hidden');
            convertLoading.classList.remove('hidden');
            convertButton.disabled = true;
        } else {
            convertText.classList.remove('hidden');
            convertLoading.classList.add('hidden');
            convertButton.disabled = false;
        }
    }

    // Show result
    function showResult(result, rate, from, to, updatedAt) {
        const fromCurrency = getCurrencySymbol(from);
        const toCurrency = getCurrencySymbol(to);
        
        resultAmount.textContent = `${toCurrency}${formatNumber(result)}`;
        resultRate.textContent = `1 ${from} = ${toCurrency}${formatNumber(rate)} ${to}`;
        
        if (updatedAt) {
            const date = new Date(updatedAt);
            resultUpdated.textContent = `Updated: ${date.toLocaleString()}`;
        }

        resultDiv.classList.remove('hidden');
        
        // Add success animation
        convertButton.classList.add('success-pulse');
        setTimeout(() => {
            convertButton.classList.remove('success-pulse');
        }, 500);
    }

    // Show rate info
    function showRate(rate, from, to, updatedAt) {
        const toCurrency = getCurrencySymbol(to);
        currentRate.textContent = `1 ${from} = ${toCurrency}${formatNumber(rate)} ${to}`;
        
        if (updatedAt) {
            const date = new Date(updatedAt);
            rateUpdated.textContent = date.toLocaleString();
        }
        
        rateDisplay.classList.remove('hidden');
    }

    // Show error
    function showError(message) {
        errorMessage.textContent = message;
        errorDiv.classList.remove('hidden');
    }

    // Hide result
    function hideResult() {
        resultDiv.classList.add('hidden');
    }

    // Hide error
    function hideError() {
        errorDiv.classList.add('hidden');
    }

    // Get currency symbol (simplified)
    function getCurrencySymbol(code) {
        const symbols = {
            'USD': '$', 'EUR': '€', 'GBP': '£', 'JPY': '¥', 
            'AUD': 'A$', 'CAD': 'C$', 'CHF': 'Fr', 'CNY': '¥',
            'SEK': 'kr', 'NZD': 'NZ$', 'MXN': '$', 'SGD': 'S$',
            'HKD': 'HK$', 'NOK': 'kr', 'TRY': '₺', 'RUB': '₽',
            'INR': '₹', 'BRL': 'R$', 'ZAR': 'R', 'KRW': '₩'
        };
        return symbols[code] || code + ' ';
    }

    // Format number
    function formatNumber(num) {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 4
        }).format(num);
    }

    // Initial conversion on page load
    setTimeout(debounceConvert, 100);
});
</script>