{% extends "base.html" %}
{% block title %}داشبورد اصلی{% endblock %}
{% block page_title %}تحلیل لحظه‌ای بازار{% endblock %}
{% block subtitle %}داده‌های واقعی از Yahoo Finance{% endblock %}

{% block content %}
<style>
    .stat-box { background: rgba(20, 25, 50, 0.95); border-radius: 20px; padding: 20px; border: 1px solid rgba(0,212,255,0.2); }
    .stat-value { font-size: 2rem; font-weight: 700; color: #00d4ff; }
    .stat-label { color: #94a3b8; font-size: 0.85rem; margin-bottom: 8px; }
    .zone-item { background: rgba(0,212,255,0.1); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: flex; justify-content: space-between; }
    .loading { text-align: center; padding: 20px; color: #94a3b8; }
    .signal-buy { background: rgba(0,255,136,0.15); border-left: 3px solid #00ff88; }
    .signal-sell { background: rgba(255,68,68,0.15); border-left: 3px solid #ff4444; }
    .signal-neutral { background: rgba(255,193,7,0.15); border-left: 3px solid #ffc107; }
</style>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="stat-box">
        <div class="stat-label">💰 قیمت لحظه‌ای</div>
        <div class="stat-value" id="priceValue">---</div>
        <div id="priceChange" class="text-sm"></div>
    </div>
    <div class="stat-box">
        <div class="stat-label">📊 حجم 24h</div>
        <div class="stat-value" id="volumeValue">---</div>
    </div>
    <div class="stat-box">
        <div class="stat-label">⚡ نوسان‌پذیری</div>
        <div class="stat-value" id="volatilityValue">---</div>
        <div id="volatilityBadge"></div>
    </div>
    <div class="stat-box">
        <div class="stat-label">🎲 سناریو غالب</div>
        <div class="stat-value" id="scenarioValue">---</div>
        <div id="scenarioProb" class="text-sm text-gray-400"></div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="stat-box">
        <h3 class="text-lg font-semibold mb-3 text-cyan-400">📍 مناطق نقدینگی</h3>
        <div id="liquidityZones"><div class="loading">⏳ در حال بارگذاری...</div></div>
    </div>
    
    <div class="stat-box">
        <h3 class="text-lg font-semibold mb-3 text-cyan-400">🎲 سناریوهای مونت کارلو</h3>
        <div class="grid grid-cols-3 gap-3 text-center">
            <div class="p-3 bg-green-500/10 rounded-lg">
                <div class="text-green-400">🟢 صعودی</div>
                <div class="text-2xl font-bold text-white" id="bullishProb">0%</div>
            </div>
            <div class="p-3 bg-red-500/10 rounded-lg">
                <div class="text-red-400">🔴 نزولی</div>
                <div class="text-2xl font-bold text-white" id="bearishProb">0%</div>
            </div>
            <div class="p-3 bg-yellow-500/10 rounded-lg">
                <div class="text-yellow-400">⚪ خنثی</div>
                <div class="text-2xl font-bold text-white" id="neutralProb">0%</div>
            </div>
        </div>
    </div>
</div>

<div class="stat-box mt-6">
    <h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-line ml-2"></i> تحلیل تکنیکال</h3>
    <div id="technicalAnalysis"><div class="loading">⏳ در حال تحلیل...</div></div>
</div>

<div class="stat-box mt-6">
    <h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-shield-alt ml-2"></i> تابلوی جامع ریسک</h3>
    <div id="riskDashboard"><div class="loading">⏳ در حال تحلیل ریسک...</div></div>
</div>

<script>
    function getCurrentSymbol() {
        const select = document.getElementById('globalSymbolSelect');
        return select ? select.value : 'BTC-USD';
    }
    
    function getCurrentTimeframe() {
        const select = document.getElementById('globalTimeframeSelect');
        return select ? select.value : '1h';
    }
    
    function formatNumber(num) {
        if (!num) return '---';
        if (num >= 1e9) return (num/1e9).toFixed(1) + 'B';
        if (num >= 1e6) return (num/1e6).toFixed(1) + 'M';
        if (num >= 1e3) return (num/1e3).toFixed(1) + 'K';
        return num.toLocaleString();
    }
    
    async function loadAllData() {
        const symbol = getCurrentSymbol();
        const timeframe = getCurrentTimeframe();
        
        document.getElementById('priceValue').innerHTML = '...';
        document.getElementById('liquidityZones').innerHTML = '<div class="loading">⏳ در حال بارگذاری...</div>';
        document.getElementById('technicalAnalysis').innerHTML = '<div class="loading">⏳ در حال تحلیل...</div>';
        document.getElementById('riskDashboard').innerHTML = '<div class="loading">⏳ در حال تحلیل ریسک...</div>';
        
        try {
            const [snapshot, liquidity, volatility, scenarios, technical, risk] = await Promise.all([
                fetch(`/api/market/snapshot?symbol=${symbol}&interval=${timeframe}`).then(r => r.json()),
                fetch(`/api/market/liquidity?symbol=${symbol}&interval=${timeframe}`).then(r => r.json()),
                fetch(`/api/market/volatility?symbol=${symbol}&interval=${timeframe}`).then(r => r.json()),
                fetch(`/api/market/scenarios?symbol=${symbol}&interval=${timeframe}`).then(r => r.json()),
                fetch(`/api/market/technical?symbol=${symbol}&interval=${timeframe}&period=60d`).then(r => r.json()),
                fetch(`/api/market/risk?symbol=${symbol}&interval=${timeframe}`).then(r => r.json())
            ]);
            
            updateStats(snapshot, volatility, scenarios);
            updateLiquidityZones(liquidity);
            updateTechnicalAnalysis(technical);
            updateRiskDashboard(risk);
            
        } catch(e) { 
            console.error('Error loading data:', e); 
            document.getElementById('liquidityZones').innerHTML = '<div class="text-center text-red-400 p-4">❌ خطا در دریافت داده</div>';
            document.getElementById('technicalAnalysis').innerHTML = '<div class="text-red-400 p-4">❌ خطا</div>';
            document.getElementById('riskDashboard').innerHTML = '<div class="text-red-400 p-4">❌ خطا</div>';
        }
    }
    
    function updateStats(snapshot, volatility, scenarios) {
        document.getElementById('priceValue').innerHTML = `$${snapshot.price?.toLocaleString() || '---'}`;
        const isPositive = snapshot.change_24h >= 0;
        document.getElementById('priceChange').innerHTML = `<span style="color: ${isPositive ? '#00ff88' : '#ff6666'}">${isPositive ? '▲' : '▼'} ${Math.abs(snapshot.change_24h).toFixed(2)}%</span>`;
        document.getElementById('volumeValue').innerHTML = formatNumber(snapshot.volume);
        document.getElementById('volatilityValue').innerHTML = `${volatility.current_volatility || 0}%`;
        
        const volBadge = document.getElementById('volatilityBadge');
        if (volatility.outlook === 'Elevated risk') volBadge.innerHTML = '<span class="badge-high">⚠️ ریسک بالا</span>';
        else if (volatility.outlook === 'Low risk') volBadge.innerHTML = '<span class="badge-low">✅ ریسک پایین</span>';
        else volBadge.innerHTML = '<span class="badge-moderate">📊 ریسک نرمال</span>';
        
        const scen = scenarios.scenarios || {};
        document.getElementById('bullishProb').innerHTML = `${scen.bullish || 0}%`;
        document.getElementById('bearishProb').innerHTML = `${scen.bearish || 0}%`;
        document.getElementById('neutralProb').innerHTML = `${scen.neutral || 0}%`;
        
        let mainScenario = 'خنثی', maxProb = scen.neutral || 0;
        if ((scen.bullish || 0) > maxProb) { mainScenario = 'صعودی'; maxProb = scen.bullish; }
        if ((scen.bearish || 0) > maxProb) { mainScenario = 'نزولی'; }
        document.getElementById('scenarioValue').innerHTML = mainScenario;
        document.getElementById('scenarioProb').innerHTML = `احتمال: ${maxProb}%`;
    }
    
    function updateLiquidityZones(liquidity) {
        const zones = liquidity.liquidity_zones || [];
        if (zones.length > 0) {
            document.getElementById('liquidityZones').innerHTML = zones.map(zone => 
                `<div class="zone-item"><span>💰 $${zone.level?.toLocaleString()}</span><span class="text-cyan-400">قدرت: ${(zone.strength * 100).toFixed(0)}%</span></div>`
            ).join('');
        } else {
            document.getElementById('liquidityZones').innerHTML = '<div class="text-center text-gray-400 p-4">📍 هیچ منطقه نقدینگی قابل توجهی شناسایی نشد</div>';
        }
    }
    
    function updateTechnicalAnalysis(data) {
        const container = document.getElementById('technicalAnalysis');
        if (data.error) { 
            container.innerHTML = `<div class="text-red-400 p-4">❌ ${data.error}</div>`; 
            return; 
        }
        
        const analysis = data.analysis;
        const levels = data.levels;
        
        container.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800/30 p-4 rounded-xl">
                <div class="text-cyan-400 font-semibold mb-3"><i class="fas fa-arrow-down text-green-400"></i> حمایت</div>
                ${levels.support?.length > 0 ? levels.support.slice(0,3).map((s,i) => `<div class="flex justify-between"><span>سطح ${i+1}</span><span class="text-green-400">$${s?.toLocaleString()}</span></div>`).join('') : '<div class="text-gray-400">در حال شناسایی...</div>'}
                <div class="text-cyan-400 font-semibold mt-4 mb-3"><i class="fas fa-arrow-up text-red-400"></i> مقاومت</div>
                ${levels.resistance?.length > 0 ? levels.resistance.slice(0,3).map((r,i) => `<div class="flex justify-between"><span>سطح ${i+1}</span><span class="text-red-400">$${r?.toLocaleString()}</span></div>`).join('') : '<div class="text-gray-400">در حال شناسایی...</div>'}
            </div>
            <div class="bg-gray-800/30 p-4 rounded-xl">
                <div class="grid grid-cols-2 gap-3">
                    <div class="text-center p-2 bg-gray-700/30 rounded-lg"><div class="text-gray-400 text-xs">ADX</div><div class="text-xl font-bold">${analysis.adx.adx}</div><div class="text-xs">${analysis.adx.trend}</div></div>
                    <div class="text-center p-2 bg-gray-700/30 rounded-lg"><div class="text-gray-400 text-xs">RSI</div><div class="text-xl font-bold">${analysis.rsi.rsi}</div><div class="text-xs">${analysis.rsi.status}</div></div>
                </div>
                <div class="mt-3 p-3 rounded-lg ${analysis.summary.overall_action === 'BUY' ? 'bg-green-500/20' : analysis.summary.overall_action === 'SELL' ? 'bg-red-500/20' : 'bg-yellow-500/20'}">
                    <div class="flex justify-between"><span>توصیه:</span><span class="font-bold">${analysis.summary.overall_action === 'BUY' ? '🟢 خرید' : analysis.summary.overall_action === 'SELL' ? '🔴 فروش' : '⚪ انتظار'}</span></div>
                    <div class="text-xs text-gray-400 mt-2">${analysis.summary.position}</div>
                </div>
            </div>
        </div>`;
    }
    
    function updateRiskDashboard(data) {
        const container = document.getElementById('riskDashboard');
        if (data.error) { 
            container.innerHTML = `<div class="text-red-400 p-4">❌ ${data.error}</div>`; 
            return; 
        }
        
        const risk = data.risk;
        const comp = risk.components;
        const barColor = risk.total_risk > 65 ? 'bg-red-400' : (risk.total_risk > 40 ? 'bg-yellow-400' : 'bg-green-400');
        const textColor = risk.total_risk > 65 ? 'text-red-400' : (risk.total_risk > 40 ? 'text-yellow-400' : 'text-green-400');
        
        container.innerHTML = `<div class="bg-gray-800/50 rounded-xl p-4 mb-4">
            <div class="flex justify-between items-center flex-wrap">
                <div><div class="text-gray-400 text-sm">📊 ریسک کلی بازار</div><div class="text-3xl font-bold ${textColor}">${risk.total_risk}%</div><div class="text-sm">${risk.risk_level}</div></div>
                <div class="text-right"><div class="text-gray-400 text-sm">💰 حجم پیشنهادی</div><div class="text-lg font-bold text-cyan-400">${risk.position_size}</div></div>
            </div>
            <div class="mt-3 w-full bg-gray-700 rounded-full h-2"><div class="h-2 rounded-full ${barColor}" style="width: ${risk.total_risk}%"></div></div>
            <div class="mt-3 text-sm text-gray-300"><i class="fas fa-info-circle text-cyan-400"></i> ${risk.action}</div></div>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
                <div class="bg-gray-800/30 p-2 rounded-lg text-center"><div class="text-xs text-gray-400">نوسان</div><div class="text-sm font-bold">${comp.volatility.score}</div><div class="text-xs text-gray-500">وزن ${comp.volatility.weight}%</div></div>
                <div class="bg-gray-800/30 p-2 rounded-lg text-center"><div class="text-xs text-gray-400">ADX</div><div class="text-sm font-bold">${comp.adx.score}</div><div class="text-xs text-gray-500">وزن ${comp.adx.weight}%</div></div>
                <div class="bg-gray-800/30 p-2 rounded-lg text-center"><div class="text-xs text-gray-400">حجم</div><div class="text-sm font-bold">${comp.volume_anomaly.score}</div><div class="text-xs text-gray-500">وزن ${comp.volume_anomaly.weight}%</div></div>
                <div class="bg-gray-800/30 p-2 rounded-lg text-center"><div class="text-xs text-gray-400">موقعیت</div><div class="text-sm font-bold">${comp.position.score}</div><div class="text-xs text-gray-500">وزن ${comp.position.weight}%</div></div>
                <div class="bg-gray-800/30 p-2 rounded-lg text-center"><div class="text-xs text-gray-400">RSI</div><div class="text-sm font-bold">${comp.rsi.score}</div><div class="text-xs text-gray-500">وزن ${comp.rsi.weight}%</div></div>
            </div>`;
    }
    
    // رویدادها و بارگذاری اولیه
    const symbolSelect = document.getElementById('globalSymbolSelect');
    if (symbolSelect) symbolSelect.addEventListener('change', () => loadAllData());
    
    const timeframeSelect = document.getElementById('globalTimeframeSelect');
    if (timeframeSelect) timeframeSelect.addEventListener('change', () => loadAllData());
    
    loadAllData();
    setInterval(loadAllData, 60000);
</script>
{% endblock %}