{% extends "base.html" %}
{% block title %}هشدارهای بازار{% endblock %}
{% block page_title %}هشدارهای بازار{% endblock %}
{% block subtitle %}مدیریت هشدارهای قیمتی و شرایط بازار{% endblock %}

{% block content %}
<style>
    .alert-card {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 16px;
        border: 1px solid rgba(0, 212, 255, 0.2);
        transition: all 0.3s;
    }
    .alert-card:hover {
        border-color: rgba(0, 212, 255, 0.5);
    }
    .alert-triggered {
        border-left: 3px solid #ff4444;
        background: rgba(255, 68, 68, 0.05);
    }
</style>

<div class="glass-card p-6 mb-6">
    <h3 class="section-title mb-4"><i class="fas fa-bell text-cyan-400 ml-2"></i>هشدارهای فعال</h3>
    <div id="alertsList" class="space-y-3"></div>
</div>

<div class="glass-card p-6">
    <h3 class="section-title mb-4"><i class="fas fa-plus-circle text-cyan-400 ml-2"></i>ایجاد هشدار جدید</h3>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <select id="alertSymbol" class="bg-gray-800 border border-gray-700 rounded-xl px-4 py-2">
            <option value="BTC-USD">₿ BTC-USD</option>
            <option value="ETH-USD">Ξ ETH-USD</option>
            <option value="SOL-USD">◎ SOL-USD</option>
            <option value="GC=F">🥇 Gold</option>
            <option value="^GSPC">📊 S&P 500</option>
            <option value="EURUSD=X">💱 EUR/USD</option>
        </select>
        <select id="alertCondition" class="bg-gray-800 border border-gray-700 rounded-xl px-4 py-2">
            <option value="above">قیمت بالاتر از</option>
            <option value="below">قیمت پایین‌تر از</option>
            <option value="volatility_spike">نوسان بالا</option>
            <option value="anomaly">ناهنجاری جریان سفارشات</option>
        </select>
        <input type="number" id="alertValue" placeholder="مقدار" class="bg-gray-800 border border-gray-700 rounded-xl px-4 py-2">
        <button onclick="createAlert()" class="btn-primary">➕ ایجاد هشدار</button>
    </div>
</div>

<script>
    let alerts = JSON.parse(localStorage.getItem('wfis_alerts_v2') || '[]');
    
    function renderAlerts() {
        const container = document.getElementById('alertsList');
        if (alerts.length === 0) {
            container.innerHTML = '<div class="text-center text-gray-500 py-8">🔔 هیچ هشدار فعالی وجود ندارد</div>';
            return;
        }
        container.innerHTML = alerts.map((alert, idx) => `
            <div class="alert-card ${alert.triggered ? 'alert-triggered' : ''}">
                <div class="flex justify-between items-center flex-wrap gap-3">
                    <div>
                        <div class="font-bold text-cyan-400">${alert.symbol}</div>
                        <div class="text-sm">${alert.condition === 'above' ? 'قیمت بالاتر از' : alert.condition === 'below' ? 'قیمت پایین‌تر از' : alert.condition === 'volatility_spike' ? 'نوسان بالا' : 'ناهنجاری جریان سفارشات'} ${alert.value ? `$${alert.value}` : ''}</div>
                        <div class="text-xs text-gray-500 mt-1">ایجاد شده: ${new Date(alert.created).toLocaleString('fa-IR')}</div>
                        ${alert.triggered ? `<div class="text-xs text-yellow-400 mt-1">⚠️ فعال شده در: ${new Date(alert.triggered_at).toLocaleString('fa-IR')}</div>` : ''}
                        ${alert.message ? `<div class="text-xs text-cyan-400 mt-1">📢 ${alert.message}</div>` : ''}
                    </div>
                    <button onclick="deleteAlert(${idx})" class="text-red-400 hover:text-red-300 px-3 py-1 rounded-lg bg-red-400/10"><i class="fas fa-trash"></i> حذف</button>
                </div>
            </div>
        `).join('');
    }
    
    function createAlert() {
        const symbol = document.getElementById('alertSymbol').value;
        const condition = document.getElementById('alertCondition').value;
        const value = parseFloat(document.getElementById('alertValue').value);
        
        if (condition !== 'volatility_spike' && condition !== 'anomaly' && (!value || isNaN(value))) {
            alert('لطفا مقدار معتبر وارد کنید');
            return;
        }
        
        alerts.push({ 
            symbol, condition, value: value || 0, 
            created: new Date().toISOString(),
            triggered: false,
            message: null
        });
        localStorage.setItem('wfis_alerts_v2', JSON.stringify(alerts));
        renderAlerts();
        document.getElementById('alertValue').value = '';
    }
    
    function deleteAlert(idx) {
        alerts.splice(idx, 1);
        localStorage.setItem('wfis_alerts_v2', JSON.stringify(alerts));
        renderAlerts();
    }
    
    async function checkAlerts() {
        for (let i = 0; i < alerts.length; i++) {
            const alert = alerts[i];
            if (alert.triggered) continue;
            
            try {
                const res = await fetch(`/api/market/snapshot?symbol=${alert.symbol}`);
                const data = await res.json();
                
                let triggered = false;
                let message = '';
                
                if (alert.condition === 'above' && data.price > alert.value) {
                    triggered = true;
                    message = `${alert.symbol} به سطح بالاتر از $${alert.value} رسید! قیمت فعلی: $${data.price.toLocaleString()}`;
                } else if (alert.condition === 'below' && data.price < alert.value) {
                    triggered = true;
                    message = `${alert.symbol} به سطح پایین‌تر از $${alert.value} رسید! قیمت فعلی: $${data.price.toLocaleString()}`;
                } else if (alert.condition === 'volatility_spike') {
                    const volRes = await fetch(`/api/market/volatility?symbol=${alert.symbol}`);
                    const volData = await volRes.json();
                    if (volData.outlook === 'Elevated risk') {
                        triggered = true;
                        message = `⚠️ هشدار نوسان: نوسان‌پذیری ${alert.symbol} به سطح بالایی رسیده است!`;
                    }
                } else if (alert.condition === 'anomaly') {
                    const liqRes = await fetch(`/api/market/liquidity?symbol=${alert.symbol}`);
                    const liqData = await liqRes.json();
                    if (liqData.order_flow_anomaly === 'HIGH') {
                        triggered = true;
                        message = `🐋 هشدار ناهنجاری: جریان سفارشات غیرعادی در ${alert.symbol} شناسایی شد!`;
                    }
                }
                
                if (triggered) {
                    alert.triggered = true;
                    alert.triggered_at = new Date().toISOString();
                    alert.message = message;
                    localStorage.setItem('wfis_alerts_v2', JSON.stringify(alerts));
                    renderAlerts();
                    
                    if (Notification.permission === 'granted') {
                        new Notification('🔔 WFIS Alert', { body: message });
                    } else if (Notification.permission !== 'denied') {
                        Notification.requestPermission();
                    }
                }
            } catch(e) {
                console.error('Error checking alert:', e);
            }
        }
    }
    
    renderAlerts();
    setInterval(checkAlerts, 30000);
    if (Notification.permission === 'default') Notification.requestPermission();
</script>
{% endblock %}