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

{% block content %}
<style>
    .analysis-container {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .strategy-card {
        background: rgba(30, 35, 60, 0.95);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(0, 212, 255, 0.15);
        transition: all 0.3s;
    }
    .strategy-card:hover {
        border-color: rgba(0, 212, 255, 0.4);
        transform: translateY(-2px);
    }
    .key-metric {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .key-metric:last-child {
        border-bottom: none;
    }
    .loading-spinner {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 3px solid rgba(0,212,255,0.3);
        border-radius: 50%;
        border-top-color: #00d4ff;
        animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .ai-text {
        line-height: 1.8;
        color: #e2e8f0;
        font-size: 0.95rem;
        white-space: pre-wrap;
    }
    .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 lg:grid-cols-3 gap-6 mb-6">
    <div class="lg:col-span-2">
        <div class="analysis-container">
            <h3 class="section-title mb-4">
                <i class="fas fa-robot text-cyan-400"></i>
                تحلیل لحظه‌ای بازار با AI
            </h3>
            <div id="aiAnalysisContent" class="ai-text">
                <div class="text-center py-8">
                    <div class="loading-spinner"></div>
                    <p class="mt-4 text-gray-400">در حال دریافت تحلیل از DeepSeek AI...</p>
                </div>
            </div>
            <div class="mt-4 text-xs text-gray-500">
                <i class="fas fa-info-circle"></i> تحلیل توسط DeepSeek AI انجام شده است. این تحلیل بر اساس داده‌های لحظه‌ای بازار می‌باشد.
            </div>
        </div>
    </div>
    
    <div>
        <div class="analysis-container">
            <h3 class="section-title mb-4">
                <i class="fas fa-chart-line text-cyan-400"></i>
                خلاصه استراتژی
            </h3>
            <div id="strategySummary" class="space-y-3">
                <div class="text-center py-8">
                    <div class="loading-spinner"></div>
                    <p class="mt-4 text-gray-400">در حال بارگذاری...</p>
                </div>
            </div>
        </div>
        
        <div class="analysis-container">
            <h3 class="section-title mb-4">
                <i class="fas fa-chart-simple text-cyan-400"></i>
                شاخص‌های کلیدی
            </h3>
            <div id="keyMetrics">
                <div class="text-center py-8">
                    <div class="loading-spinner"></div>
                    <p class="mt-4 text-gray-400">در حال بارگذاری...</p>
                </div>
            </div>
        </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';
    }
    
    let currentSymbol = getCurrentSymbol();
    
    async function loadAIAnalysis() {
        const symbol = getCurrentSymbol();
        const timeframe = getCurrentTimeframe();
        
        if (currentSymbol !== symbol) {
            currentSymbol = symbol;
        }
        
        try {
            const aiResponse = await fetch(`/api/ai/analyze?symbol=${symbol}&interval=${timeframe}`);
            const aiData = await aiResponse.json();
            
            if (aiData.ai_analysis) {
                const formattedText = aiData.ai_analysis
                    .replace(/\n/g, '<br>')
                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                    .replace(/\*(.*?)\*/g, '<em>$1</em>');
                document.getElementById('aiAnalysisContent').innerHTML = `<div class="prose prose-invert max-w-none">${formattedText}</div>`;
            } else {
                document.getElementById('aiAnalysisContent').innerHTML = '<div class="text-center text-gray-400">تحلیل در دسترس نیست. لطفا دوباره تلاش کنید.</div>';
            }
            
            const [snapshot, volatility, scenarios, liquidity] = await Promise.all([
                fetch(`/api/market/snapshot?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/liquidity?symbol=${symbol}&interval=${timeframe}`).then(r => r.json())
            ]);
            
            const strat = scenarios.scenarios || {};
            const bullishProb = strat.bullish || 0;
            const bearishProb = strat.bearish || 0;
            
            let strategyClass = 'signal-neutral';
            let strategyText = 'خنثی - منتظر شکست قیمت از محدوده فعلی باشید';
            let action = 'HOLD';
            let entry = 'بدون ورود';
            let stopLoss = '---';
            let takeProfit = '---';
            
            if (bullishProb > 45) {
                strategyClass = 'signal-buy';
                strategyText = 'صعودی - احتمال رشد قیمت وجود دارد';
                action = 'BUY';
                entry = `نزدیک ${snapshot.price?.toLocaleString() || 'قیمت فعلی'}`;
                stopLoss = `$${(snapshot.price * 0.97).toLocaleString()}`;
                takeProfit = `$${(snapshot.price * 1.05).toLocaleString()}`;
            } else if (bearishProb > 45) {
                strategyClass = 'signal-sell';
                strategyText = 'نزولی - احتمال کاهش قیمت وجود دارد';
                action = 'SELL';
                entry = `نزدیک ${snapshot.price?.toLocaleString() || 'قیمت فعلی'}`;
                stopLoss = `$${(snapshot.price * 1.03).toLocaleString()}`;
                takeProfit = `$${(snapshot.price * 0.95).toLocaleString()}`;
            }
            
            document.getElementById('strategySummary').innerHTML = `
                <div class="strategy-card ${strategyClass}">
                    <div class="flex items-center justify-between mb-3"><span class="font-bold">سیگنال:</span><span class="text-lg font-bold">${action}</span></div>
                    <div class="mb-3"><div class="text-sm text-gray-400">تحلیل:</div><div>${strategyText}</div></div>
                    <div class="mb-3"><div class="text-sm text-gray-400">نقطه ورود:</div><div>${entry}</div></div>
                    <div class="grid grid-cols-2 gap-3"><div><div class="text-sm text-gray-400">حد ضرر:</div><div class="text-red-400">${stopLoss}</div></div><div><div class="text-sm text-gray-400">حد سود:</div><div class="text-green-400">${takeProfit}</div></div></div>
                </div>
            `;
            
            document.getElementById('keyMetrics').innerHTML = `
                <div class="key-metric"><span><i class="fas fa-dollar-sign text-cyan-400"></i> قیمت فعلی</span><span class="font-bold text-white">$${snapshot.price?.toLocaleString() || '---'}</span></div>
                <div class="key-metric"><span><i class="fas fa-chart-line text-cyan-400"></i> تغییر 24h</span><span class="font-bold ${snapshot.change_24h >= 0 ? 'text-success' : 'text-danger'}">${snapshot.change_24h >= 0 ? '▲' : '▼'} ${Math.abs(snapshot.change_24h || 0)}%</span></div>
                <div class="key-metric"><span><i class="fas fa-waveform text-cyan-400"></i> نوسان‌پذیری</span><span class="font-bold text-white">${volatility.current_volatility || 0}%</span></div>
                <div class="key-metric"><span><i class="fas fa-chart-pie text-cyan-400"></i> سناریو غالب</span><span class="font-bold text-white">${strat.neutral > 40 ? 'خنثی' : (strat.bullish > strat.bearish ? 'صعودی' : 'نزولی')}</span></div>
                <div class="key-metric"><span><i class="fas fa-percent text-cyan-400"></i> صعودی/نزولی/خنثی</span><span class="font-bold text-white">${strat.bullish || 0}% / ${strat.bearish || 0}% / ${strat.neutral || 0}%</span></div>
                <div class="key-metric"><span><i class="fas fa-chart-bar text-cyan-400"></i> حجم 24h</span><span class="font-bold text-white">${formatNumber(snapshot.volume)}</span></div>
                <div class="key-metric"><span><i class="fas fa-exclamation-triangle text-cyan-400"></i> جریان سفارشات</span><span class="font-bold text-white">${liquidity.order_flow_anomaly || 'NORMAL'}</span></div>
            `;
            
        } catch(e) {
            console.error('Error loading AI analysis:', e);
            document.getElementById('aiAnalysisContent').innerHTML = '<div class="text-center text-red-400">❌ خطا در دریافت تحلیل. لطفا دوباره تلاش کنید.</div>';
        }
    }
    
    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();
    }
    
    const symbolSelect = document.getElementById('globalSymbolSelect');
    if (symbolSelect) symbolSelect.addEventListener('change', () => loadAIAnalysis());
    
    const timeframeSelect = document.getElementById('globalTimeframeSelect');
    if (timeframeSelect) timeframeSelect.addEventListener('change', () => loadAIAnalysis());
    
    loadAIAnalysis();
    setInterval(loadAIAnalysis, 120000);
</script>
{% endblock %}