{% extends "base.html" %}
{% block title %}Whale Hunter AI{% endblock %}
{% block page_title %}🐋 Whale Hunter AI{% endblock %}
{% block subtitle %}تشخیص حرکت نهنگ‌ها و سیگنال‌های هوشمند{% endblock %}

{% block content %}
<style>
    .signal-card {
        background: linear-gradient(135deg, rgba(30, 40, 70, 0.95), rgba(20, 25, 50, 0.95));
        border-radius: 24px;
        padding: 24px;
        margin-bottom: 20px;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .signal-buy { background: linear-gradient(135deg, #00ff88, #00cc66); color: #0a0e27; }
    .signal-sell { background: linear-gradient(135deg, #ff4444, #cc0000); color: white; }
    .signal-neutral { background: linear-gradient(135deg, #ffc107, #ff9900); color: #0a0e27; }
    .signal-smart-in { background: linear-gradient(135deg, #00d4ff, #0066ff); color: white; }
    .signal-smart-out { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; }
    .indicator-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }
    .indicator-box {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 16px;
        padding: 15px;
        text-align: center;
    }
    .indicator-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #00d4ff;
    }
</style>

<div class="signal-card" id="mainSignalCard">
    <div class="text-center" id="signalContent">
        <div class="loading-spinner"></div>
        <p class="mt-3">در حال تحلیل داده‌ها...</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="signal-card">
        <h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-bar"></i> شاخص‌های کلیدی</h3>
        <div id="indicators" class="indicator-grid"></div>
    </div>
    
    <div class="signal-card">
        <h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-sliders-h"></i> تنظیمات الگوریتم</h3>
        <div id="configInfo" class="text-sm text-gray-400 space-y-1"></div>
    </div>
</div>

<div class="signal-card">
    <h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-info-circle"></i> توضیح سیگنال</h3>
    <div id="signalExplanation" class="text-gray-300 leading-relaxed"></div>
</div>

<script>
    let currentSymbol = 'BTC-USD';
    let currentTimeframe = '1h';
    
    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';
    }
    
    async function loadWhaleSignal() {
        const symbol = getCurrentSymbol();
        const timeframe = getCurrentTimeframe();
        currentSymbol = symbol;
        currentTimeframe = timeframe;
        
        const signalContent = document.getElementById('signalContent');
        signalContent.innerHTML = '<div class="loading-spinner"></div><p class="mt-3">در حال تحلیل داده‌ها...</p>';
        
        try {
            const signalResponse = await fetch(`/api/market/whale-signal?symbol=${symbol}&interval=${timeframe}`);
            const signalData = await signalResponse.json();
            
            if (signalData.error) {
                signalContent.innerHTML = `<div class="text-red-400 p-4">❌ ${signalData.error}</div>`;
                return;
            }
            
            let signalHtml = '';
            let signalClass = '';
            
            if (signalData.signal && signalData.signal.buy) {
                signalClass = 'signal-buy';
                signalHtml = `<div class="text-4xl mb-2">🐋💰</div><div class="text-3xl font-bold mb-2">سیگنال خرید (BUY)</div><div class="text-lg">نهنگ‌ها در حال ورود به بازار هستند!</div><div class="text-sm mt-3 opacity-75">⏰ زمان مناسب برای ورود</div>`;
            } else if (signalData.signal && signalData.signal.sell) {
                signalClass = 'signal-sell';
                signalHtml = `<div class="text-4xl mb-2">🐋💸</div><div class="text-3xl font-bold mb-2">سیگنال فروش (SELL)</div><div class="text-lg">نهنگ‌ها در حال خروج از بازار هستند!</div><div class="text-sm mt-3 opacity-75">⏰ زمان مناسب برای خروج</div>`;
            } else if (signalData.signal && signalData.signal.smart_money_in) {
                signalClass = 'signal-smart-in';
                signalHtml = `<div class="text-4xl mb-2">🐋📈</div><div class="text-3xl font-bold mb-2">ورود پول هوشمند</div><div class="text-lg">حجم غیرعادی با کندل صعودی شناسایی شد</div><div class="text-sm mt-3 opacity-75">📊 احتمال شروع روند صعودی</div>`;
            } else if (signalData.signal && signalData.signal.smart_money_out) {
                signalClass = 'signal-smart-out';
                signalHtml = `<div class="text-4xl mb-2">🐋📉</div><div class="text-3xl font-bold mb-2">خروج پول هوشمند</div><div class="text-lg">حجم غیرعادی با کندل نزولی شناسایی شد</div><div class="text-sm mt-3 opacity-75">📊 احتمال شروع روند نزولی</div>`;
            } else {
                signalClass = 'signal-neutral';
                signalHtml = `<div class="text-4xl mb-2">🐋⏳</div><div class="text-3xl font-bold mb-2">بدون سیگنال</div><div class="text-lg">منتظر حرکت بعدی نهنگ‌ها باشیم</div><div class="text-sm mt-3 opacity-75">⚪ بازار در حالت خنثی</div>`;
            }
            
            signalContent.innerHTML = `<div class="p-8 rounded-2xl ${signalClass}">${signalHtml}</div>`;
            
            if (signalData.indicators) updateIndicators(signalData);
            if (signalData.config) updateConfig(signalData);
            updateExplanation(signalData);
            
        } catch(e) {
            console.error('Error:', e);
            signalContent.innerHTML = '<div class="text-red-400 p-4">❌ خطا در دریافت سیگنال</div>';
        }
    }
    
    function updateIndicators(data) {
        const ind = data.indicators;
        const indicatorsHtml = `
            <div class="indicator-box"><div class="indicator-value">${ind.rsi?.toFixed(1) || '---'}</div><div class="indicator-label">RSI (${ind.rsi_status || 'neutral'})</div></div>
            <div class="indicator-box"><div class="indicator-value">${ind.adx?.toFixed(1) || '---'}</div><div class="indicator-label">ADX ${ind.is_trending ? '📈 رونددار' : '📊 رنج'}</div></div>
            <div class="indicator-box"><div class="indicator-value">${ind.high_volume ? '✅ بالا' : '⚪ نرمال'}</div><div class="indicator-label">وضعیت حجم</div></div>
            <div class="indicator-box"><div class="indicator-value">$${ind.ma_short?.toLocaleString() || '---'}</div><div class="indicator-label">میانگین کوتاه (${data.config?.ma_short || 9})</div></div>
            <div class="indicator-box"><div class="indicator-value">$${ind.ma_long?.toLocaleString() || '---'}</div><div class="indicator-label">میانگین بلند (${data.config?.ma_long || 21})</div></div>
        `;
        document.getElementById('indicators').innerHTML = indicatorsHtml;
    }
    
    function updateConfig(data) {
        const cfg = data.config;
        const configHtml = `
            <div>📊 RSI Length: ${cfg.rsi_length} | OB/OS: ${cfg.rsi_overbought}/${cfg.rsi_oversold}</div>
            <div>📈 MA: ${cfg.ma_short} / ${cfg.ma_long}</div>
            <div>📉 Volume Threshold: ${cfg.volume_threshold}x | Z-Min: ${cfg.volume_z_min}</div>
            <div>⚡ ADX: ${cfg.use_adx ? 'فعال ✅' : 'غیرفعال ❌'} | Trend Min: ${cfg.adx_trend_min}</div>
            <div>🔄 RSI Reclaim: ${cfg.use_rsi_reclaim ? 'فعال ✅' : 'غیرفعال ❌'} | ${cfg.reclaim_low}/${cfg.reclaim_high}</div>
            <div>📊 VWAP Filter: ${cfg.use_vwap ? 'فعال ✅' : 'غیرفعال ❌'} | Slope Filter: ${cfg.use_slope ? 'فعال ✅' : 'غیرفعال ❌'}</div>
        `;
        document.getElementById('configInfo').innerHTML = configHtml;
    }
    
    function updateExplanation(data) {
        let explanation = '';
        if (data.signal && data.signal.buy) {
            explanation = '🟢 سیگنال خرید زمانی صادر می‌شود که میانگین متحرک کوتاه از بلندمدت عبور کند، حجم معاملات بالاتر از حد معمول باشد، قیمت بالای VWAP قرار گیرد و RSI از ناحیه اشباع فروش خارج شود.';
        } else if (data.signal && data.signal.sell) {
            explanation = '🔴 سیگنال فروش زمانی صادر می‌شود که میانگین متحرک کوتاه زیر بلندمدت عبور کند، حجم معاملات بالاتر از حد معمول باشد، قیمت زیر VWAP قرار گیرد و RSI از ناحیه اشباع خرید خارج شود.';
        } else if (data.signal && data.signal.smart_money_in) {
            explanation = '🐋 ورود پول هوشمند زمانی تشخیص داده می‌شود که حجم معاملات به طور غیرعادی افزایش یابد و کندل صعودی باشد. این می‌تواند نشانه شروع یک حرکت صعودی باشد.';
        } else if (data.signal && data.signal.smart_money_out) {
            explanation = '🐋 خروج پول هوشمند زمانی تشخیص داده می‌شود که حجم معاملات به طور غیرعادی افزایش یابد و کندل نزولی باشد. این می‌تواند نشانه شروع یک حرکت نزولی باشد.';
        } else {
            explanation = '⚪ در حال حاضر هیچ سیگنال خرید یا فروشی شناسایی نشده است. الگوریتم منتظر ترکیب مناسب شاخص‌ها برای تشخیص حرکت نهنگ‌ها است.';
        }
        document.getElementById('signalExplanation').innerHTML = `<p>${explanation}</p><p class="mt-3 text-sm text-gray-400">⚠️ این سیگنال‌ها بر اساس داده‌های گذشته تولید می‌شوند و تضمینی برای آینده نیستند.</p>`;
    }
    
    const symbolSelect = document.getElementById('globalSymbolSelect');
    if (symbolSelect) symbolSelect.addEventListener('change', () => loadWhaleSignal());
    
    const timeframeSelect = document.getElementById('globalTimeframeSelect');
    if (timeframeSelect) timeframeSelect.addEventListener('change', () => loadWhaleSignal());
    
    loadWhaleSignal();
    setInterval(loadWhaleSignal, 60000);
</script>
{% endblock %}