document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    const depositAmount = document.getElementById('depositAmount');
    const walletAddress = document.getElementById('walletAddress');
    const kycStatus = document.getElementById('kycStatus');
    const depositTier = document.getElementById('depositTier');
    const referralCode = document.getElementById('referralCode');
    const depositBtn = document.getElementById('depositBtn');
    const depositSummary = document.getElementById('depositSummary');
    
    // Update summary when inputs change
    [depositAmount, depositTier].forEach(element => {
        element.addEventListener('input', updateSummary);
    });
    
    // Submit deposit button event
    depositBtn.addEventListener('click', function() {
        if (!validateForm()) return;
        
        const amount = parseFloat(depositAmount.value);
        
        // Show success message
        alert(`Pre-deposit of ${amount.toLocaleString()} USDC submitted successfully!\nWallet: ${walletAddress.value.substring(0, 6)}...${walletAddress.value.substring(walletAddress.value.length - 4)}`);
        
        // Reset form
        depositAmount.value = '';
        walletAddress.value = '';
        kycStatus.value = '';
        depositTier.value = 'standard';
        referralCode.value = '';
        updateSummary();
    });
    
    // Validate form
    function validateForm() {
        if (!depositAmount.value || parseFloat(depositAmount.value) < 1000) {
            alert('Please enter a valid deposit amount (minimum $1,000)');
            return false;
        }
        
        if (!walletAddress.value || walletAddress.value.length < 10) {
            alert('Please enter a valid wallet address');
            return false;
        }
        
        if (!kycStatus.value) {
            alert('Please select your KYC status');
            return false;
        }
        
        return true;
    }
    
    // Update deposit summary
    function updateSummary() {
        const amount = parseFloat(depositAmount.value) || 0;
        const tier = depositTier.value || 'standard';
        
        // Calculate allocation status based on amount
        let allocationStatus = "Pending";
        if (amount >= 500000) {
            allocationStatus = "Guaranteed";
        } else if (amount >= 50000) {
            allocationStatus = "High Priority";
        } else if (amount >= 1000) {
            allocationStatus = "Processing";
        }
        
        // Estimate yield (mock calculation)
        let estimatedYield = "TBD";
        if (amount > 0) {
            const baseRate = 0.12; // 12% base APY
            const multipliers = {
                'standard': 1,
                'preferred': 1.2,
                'institutional': 1.5
            };
            const finalRate = baseRate * multipliers[tier];
            estimatedYield = `${(finalRate * 100).toFixed(1)}% APY`;
        }
        
        // Update summary display
        depositSummary.innerHTML = `
            <h3 class="text-2xl font-bold mb-4">Your Deposit Information</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span>Deposit Amount:</span>
                    <span class="font-bold">${amount.toLocaleString()} USDC</span>
                </div>
                <div class="flex justify-between">
                    <span>Allocation Status:</span>
                    <span class="font-bold">${allocationStatus}</span>
                </div>
                <div class="flex justify-between">
                    <span>Estimated Yield:</span>
                    <span class="font-bold">${estimatedYield}</span>
                </div>
                <div class="flex justify-between">
                    <span>Total Cap:</span>
                    <span class="font-bold">$250M</span>
                </div>
                <div class="pt-4">
                    <div class="w-full bg-gray-700 rounded-full h-2.5">
                        <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2.5 rounded-full" style="width: ${(amount / 250000000) * 100}%"></div>
                    </div>
                    <div class="flex justify-between text-sm mt-2">
                        <span>${amount.toLocaleString()}</span>
                        <span>$250M</span>
                    </div>
                </div>
            </div>
        `;
    }
    
    // Initialize summary
    updateSummary();
});