document.addEventListener('DOMContentLoaded', function() {
    // Price Input Handling
    const priceInput = document.getElementById('current-price');
    const useLivePriceBtn = document.getElementById('use-live-price');
    const updatePriceBtn = document.getElementById('update-price');
    
    // Position Calculator Elements
    const capitalInput = document.getElementById('capital');
    const riskPercentageInput = document.getElementById('risk-percentage');
    const entryPriceInput = document.getElementById('entry-price');
    const stopLossInput = document.getElementById('stop-loss');
    const calculatePositionBtn = document.getElementById('calculate-position');
    const positionResult = document.getElementById('position-result');
    const positionSizeEl = document.getElementById('position-size');
    const coinAmountEl = document.getElementById('coin-amount');
    
    // Simulate fetching live price (in a real app, this would be from an API)
    function fetchLivePrice() {
        showLoading();
        setTimeout(() => {
            // Simulate a live price (between 0.8 and 1.2)
            const livePrice = (0.8 + Math.random() * 0.4).toFixed(4);
            priceInput.value = livePrice;
            updateAnalysis(livePrice);
            hideLoading();
        }, 1000);
    }
    
    // Update analysis based on price
    function updateAnalysis(price) {
        // Update recommendation
        const recommendationEl = document.getElementById('recommendation');
        const recommendationText = getRandomRecommendation();
        
        recommendationEl.innerHTML = `
            <h2 class="text-xl font-semibold mb-4 text-gray-800">التوصية</h2>
            <div class="flex items-center justify-center py-8">
                <div class="text-center">
                    <div class="text-4xl font-bold mb-2 ${recommendationText.color}">${recommendationText.action}</div>
                    <p class="text-gray-600">${recommendationText.reason}</p>
                </div>
            </div>
        `;
        
        // Update indicators
        updateIndicators(price);
        
        // Update position calculator entry price if empty
        if (!entryPriceInput.value) {
            entryPriceInput.value = price;
        }
    }
    
    // Generate random recommendation for demo
    function getRandomRecommendation() {
        const actions = [
            { action: 'شراء', color: 'text-green-500', reason: 'المؤشرات إيجابية مع زخم صاعد' },
            { action: 'بيع', color: 'text-red-500', reason: 'المؤشرات سلبية مع زخم هابط' },
            { action: 'انتظر', color: 'text-yellow-500', reason: 'السوق في نطاق جانبي يحتاج إلى تأكيد' }
        ];
        return actions[Math.floor(Math.random() * actions.length)];
    }
    
    // Update indicators for demo
    function updateIndicators(price) {
        const indicatorsContainer = document.getElementById('indicators').querySelector('.grid');
        indicatorsContainer.innerHTML = '';
        
        const indicators = [
            { name: 'SMA (7 أيام)', value: (price * (0.95 + Math.random() * 0.1)).toFixed(4), trend: getRandomTrend() },
            { name: 'RSI (14)', value: (30 + Math.random() * 40).toFixed(2), trend: getRandomTrend() },
            { name: 'MACD', value: getRandomMACD(), trend: getRandomTrend() },
            { name: 'حجم التداول (24h)', value: `${(Math.random() * 1000).toFixed(0)}K`, trend: getRandomTrend() },
            { name: 'نسبة الشراء/البيع', value: `${(0.5 + Math.random()).toFixed(2)}`, trend: getRandomTrend() },
            { name: 'نقاط الدعم/المقاومة', value: '3/2', trend: 'neutral' }
        ];
        
        indicators.forEach(indicator => {
            const trendIcon = indicator.trend === 'up' ? 'trending-up' : 
                            indicator.trend === 'down' ? 'trending-down' : 'minus';
            const trendColor = indicator.trend === 'up' ? 'text-green-500' : 
                             indicator.trend === 'down' ? 'text-red-500' : 'text-gray-500';
            
            const card = document.createElement('div');
            card.className = 'indicator-card bg-gray-50 p-4 rounded-lg';
            card.innerHTML = `
                <div class="flex justify-between items-center">
                    <span class="font-medium text-gray-700">${indicator.name}</span>
                    <i data-feather="${trendIcon}" class="w-5 h-5 ${trendColor}"></i>
                </div>
                <div class="text-2xl font-bold mt-2">${indicator.value}</div>
            `;
            indicatorsContainer.appendChild(card);
        });
        
        feather.replace();
    }
    
    // Get random trend for demo
    function getRandomTrend() {
        const trends = ['up', 'down', 'neutral'];
        return trends[Math.floor(Math.random() * trends.length)];
    }
    
    // Get random MACD value for demo
    function getRandomMACD() {
        const value = (Math.random() * 0.02 - 0.01).toFixed(4);
        return parseFloat(value) > 0 ? `+${value}` : value;
    }
    
    // Calculate position size
    function calculatePosition() {
        const capital = parseFloat(capitalInput.value);
        const riskPercentage = parseFloat(riskPercentageInput.value) / 100;
        const entryPrice = parseFloat(entryPriceInput.value);
        const stopLoss = parseFloat(stopLossInput.value);
        
        if (!capital || !entryPrice || !stopLoss) {
            alert('الرجاء إدخال جميع القيم المطلوبة');
            return;
        }
        
        const riskAmount = capital * riskPercentage;
        const riskPerUnit = entryPrice - stopLoss;
        const positionSize = riskAmount / riskPerUnit;
        const coinAmount = positionSize / entryPrice;
        
        positionSizeEl.textContent = positionSize.toFixed(2) + ' USDT';
        coinAmountEl.textContent = coinAmount.toFixed(2) + ' CHESS';
        positionResult.classList.remove('hidden');
    }
    
    // Show loading overlay
    function showLoading() {
        document.body.insertAdjacentHTML('beforeend', `
            <div id="loading-overlay">
                <div class="text-center space-y-4">
                    <div class="loader w-12 h-12 border-4 border-primary-500 border-t-transparent rounded-full"></div>
                    <p class="text-lg font-medium text-gray-700">جارٍ تحميل البيانات من CoinGecko...</p>
                </div>
            </div>
        `);
    }
    
    // Hide loading overlay
    function hideLoading() {
        const overlay = document.getElementById('loading-overlay');
        if (overlay) overlay.remove();
    }
    
    // Event Listeners
    useLivePriceBtn.addEventListener('click', fetchLivePrice);
    updatePriceBtn.addEventListener('click', () => {
        if (priceInput.value) {
            showLoading();
            setTimeout(() => {
                updateAnalysis(priceInput.value);
                hideLoading();
            }, 500);
        } else {
            alert('الرجاء إدخال سعر');
        }
    });
    
    calculatePositionBtn.addEventListener('click', calculatePosition);
    
    // Initialize with a random price
    fetchLivePrice();
});