{% extends "base.html" %}
{% block title %}مراقبة السوق - {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-serif font-bold text-white flex items-center gap-3">
                <span class="text-gold-400">&#9670;</span> مراقبة السوق والمنافسين
            </h1>
            <p class="text-sm text-slate-400 mt-1">{{ report.project_name }}</p>
        </div>
        <div class="flex gap-3">
            <button onclick="scanMarket()" id="scanBtn" class="bg-blue-500/20 text-blue-400 px-4 py-2 rounded-lg text-sm hover:bg-blue-500/30 transition">فحص السوق الآن</button>
            {% if unread_count > 0 %}
            <button onclick="markAllRead()" class="text-xs text-slate-400 hover:text-gold-400 transition px-3 py-1.5">تعليم الكل كمقروء ({{ unread_count }})</button>
            {% endif %}
            <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; العودة للتقرير</a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Competitors Panel -->
        <div class="lg:col-span-1">
            <div class="glass p-6 rounded-2xl mb-4">
                <h3 class="text-white font-bold mb-4">المنافسون المراقبون</h3>
                <form method="POST" action="{{ url_for('market.add_competitor', report_id=report.id) }}" class="mb-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="flex gap-2">
                        <input type="url" name="competitor_url" placeholder="رابط المنافس..." required
                            class="flex-1 bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-gold-500/50">
                        <button type="submit" class="bg-gold-500/20 text-gold-400 px-3 py-2 rounded-lg text-xs hover:bg-gold-500/30 transition">+</button>
                    </div>
                </form>

                {% if monitors %}
                <div class="space-y-2">
                    {% for m in monitors %}
                    <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                        <div class="flex-1 min-w-0">
                            <div class="text-xs text-white truncate">{{ m.competitor_url }}</div>
                            {% if m.last_checked %}
                            <div class="text-xs text-slate-500">آخر فحص: {{ m.last_checked.strftime('%m/%d %H:%M') }}</div>
                            {% endif %}
                        </div>
                        <form method="POST" action="{{ url_for('market.remove_competitor', monitor_id=m.id) }}" class="inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="text-xs text-red-400/50 hover:text-red-400 mr-2">&#10005;</button>
                        </form>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-xs text-slate-500 text-center py-4">أضف روابط المنافسين لبدء المراقبة</p>
                {% endif %}
            </div>

            <!-- Market Summary -->
            <div id="marketSummary" class="hidden glass p-6 rounded-2xl">
                <h3 class="text-white font-bold mb-3">ملخص السوق</h3>
                <div id="summaryContent" class="text-sm text-slate-300 whitespace-pre-wrap"></div>
                <div id="recommendations" class="mt-4"></div>
            </div>
        </div>

        <!-- Alerts Panel -->
        <div class="lg:col-span-2">
            <div class="glass p-6 rounded-2xl">
                <h3 class="text-white font-bold mb-4">التنبيهات
                    {% if unread_count > 0 %}
                    <span class="text-xs bg-red-500/20 text-red-400 px-2 py-0.5 rounded-full mr-2">{{ unread_count }} جديد</span>
                    {% endif %}
                </h3>

                {% if alerts %}
                <div class="space-y-3">
                    {% for alert in alerts %}
                    <div class="p-4 rounded-xl border-r-4 {% if not alert.is_read %}bg-white/5{% else %}bg-black/10{% endif %}
                        {% if alert.severity == 'critical' %}border-red-500
                        {% elif alert.severity == 'warning' %}border-yellow-500
                        {% else %}border-blue-500{% endif %}" onclick="markRead({{ alert.id }}, this)">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-xs px-2 py-0.5 rounded-full
                                    {% if alert.alert_type == 'competitor_change' %}bg-orange-500/20 text-orange-400
                                    {% elif alert.alert_type == 'market_trend' %}bg-blue-500/20 text-blue-400
                                    {% elif alert.alert_type == 'price_change' %}bg-yellow-500/20 text-yellow-400
                                    {% elif alert.alert_type == 'new_competitor' %}bg-red-500/20 text-red-400
                                    {% elif alert.alert_type == 'opportunity' %}bg-emerald-500/20 text-emerald-400
                                    {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                                    {% if alert.alert_type == 'competitor_change' %}تغيير منافس
                                    {% elif alert.alert_type == 'market_trend' %}اتجاه سوقي
                                    {% elif alert.alert_type == 'price_change' %}تغيير أسعار
                                    {% elif alert.alert_type == 'new_competitor' %}منافس جديد
                                    {% elif alert.alert_type == 'opportunity' %}فرصة
                                    {% else %}{{ alert.alert_type }}{% endif %}
                                </span>
                                {% if alert.severity == 'critical' %}
                                <span class="text-xs text-red-400">&#9888; حرج</span>
                                {% elif alert.severity == 'warning' %}
                                <span class="text-xs text-yellow-400">&#9888; تحذير</span>
                                {% endif %}
                            </div>
                            <span class="text-xs text-slate-500">{{ alert.created_at.strftime('%m/%d') }}</span>
                        </div>
                        <h4 class="text-white text-sm font-bold mt-1">{{ alert.title }}</h4>
                        {% if alert.description %}
                        <p class="text-xs text-slate-400 mt-1">{{ alert.description }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-8">
                    <div class="text-4xl mb-3 opacity-20">&#128226;</div>
                    <p class="text-slate-500 text-sm">لا توجد تنبيهات بعد. اضغط "فحص السوق" لتوليد تحليل.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
function scanMarket() {
    const btn = document.getElementById('scanBtn');
    btn.textContent = 'جاري الفحص...';
    btn.disabled = true;
    fetch('{{ url_for("market.scan_market", report_id=report.id) }}', {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.status === 'ok') {
                if (data.market_summary) {
                    document.getElementById('summaryContent').textContent = data.market_summary;
                    document.getElementById('marketSummary').classList.remove('hidden');
                    if (data.recommendations && data.recommendations.length) {
                        const recDiv = document.getElementById('recommendations');
                        recDiv.innerHTML = '<h4 class="text-white font-bold text-sm mb-2">التوصيات:</h4>';
                        data.recommendations.forEach(r => {
                            recDiv.innerHTML += '<div class="text-xs text-emerald-400 mb-1">&#8226; ' + r + '</div>';
                        });
                    }
                }
                setTimeout(() => location.reload(), 2000);
            } else {
                alert(data.error || 'حدث خطأ');
                btn.textContent = 'فحص السوق الآن';
                btn.disabled = false;
            }
        })
        .catch(() => { alert('حدث خطأ'); btn.textContent = 'فحص السوق الآن'; btn.disabled = false; });
}

function markRead(alertId, el) {
    fetch('/market/api/mark-read/' + alertId, {method: 'POST'});
    el.classList.remove('bg-white/5');
    el.classList.add('bg-black/10');
}

function markAllRead() {
    fetch('{{ url_for("market.mark_all_read", report_id=report.id) }}', {method: 'POST'})
        .then(() => location.reload());
}
</script>
{% endblock %}