{% extends "base.html" %}
{% block title %}تحليل المنافسين{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="mb-8">
        <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-xs text-slate-400 hover:text-gold-400 transition">&#8592; العودة للتقرير</a>
        <h1 class="text-3xl font-serif font-bold text-white mt-2">تحليل المنافسين - {{ report.project_name }}</h1>
        <p class="text-slate-400 text-sm mt-2">سيساعدك الذكاء الاصطناعي في تحديد وتحليل منافسيك</p>
    </div>

    <!-- Step Indicator -->
    <div class="flex items-center justify-center gap-2 mb-10">
        <div id="step1dot" class="w-10 h-10 rounded-full bg-gold-500 text-black flex items-center justify-center font-bold text-sm">1</div>
        <div class="w-16 h-0.5 bg-white/10" id="line12"></div>
        <div id="step2dot" class="w-10 h-10 rounded-full bg-white/10 text-slate-400 flex items-center justify-center font-bold text-sm">2</div>
        <div class="w-16 h-0.5 bg-white/10" id="line23"></div>
        <div id="step3dot" class="w-10 h-10 rounded-full bg-white/10 text-slate-400 flex items-center justify-center font-bold text-sm">3</div>
    </div>

    <!-- Step 1: Choose Mode -->
    <div id="step1" class="glass p-8 rounded-2xl mb-8">
        <h2 class="text-xl font-bold text-white mb-4">كيف تريد تحليل المنافسين؟</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <button onclick="startWizard()" class="glass p-6 rounded-2xl border border-white/10 hover:border-gold-500/50 transition text-right group">
                <div class="text-gold-400 text-2xl mb-3">&#9733;</div>
                <h3 class="text-white font-bold mb-2">المساعد الذكي (موصى)</h3>
                <p class="text-xs text-slate-400">سيسألك الذكاء الاصطناعي أسئلة عن سوقك ثم يبحث ويحلل المنافسين تلقائياً</p>
            </button>
            <button onclick="showDirectMode()" class="glass p-6 rounded-2xl border border-white/10 hover:border-white/30 transition text-right group">
                <div class="text-slate-400 text-2xl mb-3">&#128279;</div>
                <h3 class="text-white font-bold mb-2">إدخال روابط مباشرة</h3>
                <p class="text-xs text-slate-400">أدخل روابط مواقع المنافسين مباشرة وسيتم تحليلها</p>
            </button>
        </div>
        <div id="step1Status" class="text-xs text-slate-400 mt-3"></div>
    </div>

    <!-- Step 2: Wizard Questions -->
    <div id="step2" class="hidden">
        <div class="glass p-8 rounded-2xl mb-8">
            <h2 class="text-xl font-bold text-white mb-2">أجب على الأسئلة التالية</h2>
            <p class="text-xs text-slate-400 mb-6">إجاباتك ستساعد في تحديد المنافسين بدقة أكبر</p>
            <div id="questionsContainer" class="space-y-6"></div>
            <div class="mt-6 flex items-center gap-4">
                <button onclick="goToStep3()" class="bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition">التالي &#8594;</button>
                <button onclick="goBack(1)" class="text-sm text-slate-400 hover:text-white transition">&#8592; رجوع</button>
            </div>
        </div>
    </div>

    <!-- Step 2 Alt: Direct URLs -->
    <div id="step2direct" class="hidden">
        <div class="glass p-8 rounded-2xl mb-8">
            <h2 class="text-xl font-bold text-white mb-4">روابط المنافسين</h2>
            <textarea id="competitorUrls" rows="5" placeholder="https://competitor1.com&#10;https://competitor2.com&#10;https://competitor3.com"
                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-gold-500/50 transition"></textarea>
            <div class="mt-4 flex items-center gap-4">
                <button onclick="runDirectAnalysis()" id="directAnalyzeBtn" class="bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition">تحليل المنافسين</button>
                <button onclick="goBack(1)" class="text-sm text-slate-400 hover:text-white transition">&#8592; رجوع</button>
            </div>
            <div id="directStatus" class="text-xs text-slate-400 mt-2"></div>
        </div>
    </div>

    <!-- Step 3: Optional URLs + Run -->
    <div id="step3" class="hidden">
        <div class="glass p-8 rounded-2xl mb-8">
            <h2 class="text-xl font-bold text-white mb-2">روابط إضافية (اختياري)</h2>
            <p class="text-xs text-slate-400 mb-4">إذا كنت تعرف مواقع منافسين محددين، أضف روابطهم هنا. وإلا اتركها فارغة وسيبحث الذكاء الاصطناعي تلقائياً.</p>
            <textarea id="optionalUrls" rows="3" placeholder="https://competitor1.com (اختياري)"
                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-gold-500/50 transition"></textarea>
            <div class="mt-4 flex items-center gap-4">
                <button onclick="runWizardAnalysis()" id="wizardAnalyzeBtn" class="bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition">
                    &#9889; بدء التحليل
                </button>
                <button onclick="goBack(2)" class="text-sm text-slate-400 hover:text-white transition">&#8592; رجوع</button>
            </div>
            <div id="wizardStatus" class="text-xs text-slate-400 mt-2"></div>
        </div>
    </div>

    <!-- Results -->
    <div id="results" class="hidden space-y-6">
        <div class="glass p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-white">المنافسون</h2>
                <span id="threatBadge" class="text-xs px-3 py-1 rounded-full"></span>
            </div>
            <div id="competitorCards" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="glass p-6 rounded-2xl">
                <h3 class="text-lg font-bold text-emerald-400 mb-3">&#10003; مزاياك التنافسية</h3>
                <ul id="advantagesList" class="space-y-2 text-sm text-slate-300"></ul>
            </div>
            <div class="glass p-6 rounded-2xl">
                <h3 class="text-lg font-bold text-blue-400 mb-3">&#9733; فجوات السوق</h3>
                <ul id="gapsList" class="space-y-2 text-sm text-slate-300"></ul>
            </div>
        </div>

        <div class="glass p-6 rounded-2xl">
            <h3 class="text-lg font-bold text-gold-400 mb-3">&#9670; التمايز الموصى</h3>
            <p id="differentiationText" class="text-sm text-slate-300"></p>
        </div>

        <div class="glass p-6 rounded-2xl">
            <h3 class="text-lg font-bold text-purple-400 mb-3">&#128161; التوصيات الاستراتيجية</h3>
            <ul id="recommendationsList" class="space-y-2 text-sm text-slate-300"></ul>
        </div>
    </div>
</div>

<script>
let wizardQuestions = [];
let wizardAnswers = {};

function setStep(n) {
    ['step1dot','step2dot','step3dot'].forEach((id, i) => {
        const el = document.getElementById(id);
        if (i < n) { el.className = 'w-10 h-10 rounded-full bg-gold-500 text-black flex items-center justify-center font-bold text-sm'; }
        else { el.className = 'w-10 h-10 rounded-full bg-white/10 text-slate-400 flex items-center justify-center font-bold text-sm'; }
    });
    if (n >= 2) document.getElementById('line12').className = 'w-16 h-0.5 bg-gold-500';
    else document.getElementById('line12').className = 'w-16 h-0.5 bg-white/10';
    if (n >= 3) document.getElementById('line23').className = 'w-16 h-0.5 bg-gold-500';
    else document.getElementById('line23').className = 'w-16 h-0.5 bg-white/10';
}

function goBack(step) {
    ['step1','step2','step2direct','step3'].forEach(id => document.getElementById(id).classList.add('hidden'));
    document.getElementById('step' + step).classList.remove('hidden');
    setStep(step);
}

async function startWizard() {
    document.getElementById('step1Status').textContent = 'جاري تحضير الأسئلة...';
    try {
        const res = await fetch('/intelligence/api/wizard-questions/{{ report.id }}', {method: 'POST'});
        const data = await res.json();
        if (data.error) { document.getElementById('step1Status').textContent = data.error; return; }
        wizardQuestions = (data.data && data.data.questions) || [];
        renderQuestions();
        document.getElementById('step1').classList.add('hidden');
        document.getElementById('step2').classList.remove('hidden');
        document.getElementById('step1Status').textContent = '';
        setStep(2);
    } catch(e) {
        document.getElementById('step1Status').textContent = 'خطأ: ' + e.message;
    }
}

function showDirectMode() {
    document.getElementById('step1').classList.add('hidden');
    document.getElementById('step2direct').classList.remove('hidden');
    setStep(2);
}

function renderQuestions() {
    const container = document.getElementById('questionsContainer');
    container.innerHTML = '';
    wizardQuestions.forEach((q, i) => {
        let html = '<div class="glass p-4 rounded-xl border border-white/5">';
        html += '<label class="block text-sm font-bold text-white mb-2">' + (i+1) + '. ' + q.question + '</label>';
        if (q.type === 'select' && q.options) {
            html += '<select data-qid="' + q.id + '" class="wizard-input w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-gold-500/50">';
            html += '<option value="">اختر...</option>';
            q.options.forEach(o => html += '<option value="' + o + '">' + o + '</option>');
            html += '</select>';
        } else if (q.type === 'multi' && q.options) {
            html += '<div class="flex flex-wrap gap-2">';
            q.options.forEach(o => {
                html += '<label class="flex items-center gap-1.5 text-sm text-slate-300 cursor-pointer">';
                html += '<input type="checkbox" data-qid="' + q.id + '" value="' + o + '" class="wizard-multi accent-gold-500"> ' + o;
                html += '</label>';
            });
            html += '</div>';
        } else {
            html += '<input type="text" data-qid="' + q.id + '" class="wizard-input w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-white text-sm placeholder-slate-600 focus:outline-none focus:border-gold-500/50" placeholder="اكتب إجابتك...">';
        }
        html += '</div>';
        container.innerHTML += html;
    });
}

function collectAnswers() {
    wizardAnswers = {};
    document.querySelectorAll('.wizard-input').forEach(el => {
        const qid = el.getAttribute('data-qid');
        if (qid && el.value) wizardAnswers[qid] = el.value;
    });
    wizardQuestions.forEach(q => {
        if (q.type === 'multi') {
            const checked = [...document.querySelectorAll('.wizard-multi[data-qid="' + q.id + '"]:checked')].map(c => c.value);
            if (checked.length) wizardAnswers[q.id] = checked;
        }
    });
}

function goToStep3() {
    collectAnswers();
    document.getElementById('step2').classList.add('hidden');
    document.getElementById('step3').classList.remove('hidden');
    setStep(3);
}

async function runWizardAnalysis() {
    collectAnswers();
    const urls = document.getElementById('optionalUrls').value.trim().split('\n').filter(u => u.trim());
    document.getElementById('wizardAnalyzeBtn').disabled = true;
    document.getElementById('wizardStatus').textContent = 'جاري البحث والتحليل... قد يستغرق دقيقة';
    try {
        const res = await fetch('/intelligence/api/analyze-competitors/{{ report.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({answers: wizardAnswers, urls: urls})
        });
        const data = await res.json();
        if (data.analysis) showResults(data.analysis);
        else document.getElementById('wizardStatus').textContent = data.error || 'خطأ';
    } catch(e) {
        document.getElementById('wizardStatus').textContent = 'خطأ: ' + e.message;
    }
    document.getElementById('wizardAnalyzeBtn').disabled = false;
}

async function runDirectAnalysis() {
    const urls = document.getElementById('competitorUrls').value.trim().split('\n').filter(u => u.trim());
    if (!urls.length) return alert('أدخل رابط منافس واحد على الأقل');
    document.getElementById('directAnalyzeBtn').disabled = true;
    document.getElementById('directStatus').textContent = 'جاري التحليل...';
    try {
        const res = await fetch('/intelligence/api/analyze-competitors/{{ report.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({urls: urls, answers: {}})
        });
        const data = await res.json();
        if (data.analysis) showResults(data.analysis);
        else document.getElementById('directStatus').textContent = data.error || 'خطأ';
    } catch(e) {
        document.getElementById('directStatus').textContent = 'خطأ: ' + e.message;
    }
    document.getElementById('directAnalyzeBtn').disabled = false;
}

function showResults(a) {
    document.getElementById('step1').classList.add('hidden');
    document.getElementById('step2').classList.add('hidden');
    document.getElementById('step2direct').classList.add('hidden');
    document.getElementById('step3').classList.add('hidden');
    document.getElementById('results').classList.remove('hidden');
    setStep(3);

    const threat = (a.overall_threat_level || '').toLowerCase();
    const badge = document.getElementById('threatBadge');
    badge.textContent = 'مستوى التهديد: ' + (a.overall_threat_level || 'N/A');
    badge.className = 'text-xs px-3 py-1 rounded-full ' +
        (threat === 'high' ? 'bg-red-500/20 text-red-400' : threat === 'medium' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-emerald-500/20 text-emerald-400');

    let cards = '';
    (a.competitors || []).forEach(c => {
        const ct = (c.threat_level || '').toLowerCase();
        cards += '<div class="glass p-5 rounded-xl border border-white/5">' +
            '<div class="flex items-center justify-between mb-3">' +
            '<h3 class="text-white font-bold">' + (c.name||'') + '</h3>' +
            '<span class="text-xs px-2 py-0.5 rounded-full ' + (ct==='high'?'bg-red-500/20 text-red-400':ct==='medium'?'bg-yellow-500/20 text-yellow-400':'bg-emerald-500/20 text-emerald-400') + '">' + (c.threat_level||'') + '</span></div>' +
            (c.website ? '<p class="text-xs text-gold-400 mb-2">' + c.website + '</p>' : '') +
            '<p class="text-xs text-slate-400 mb-3">' + (c.market_position||'') + '</p>' +
            (c.pricing ? '<p class="text-xs text-slate-500 mb-2">التسعير: ' + c.pricing + '</p>' : '') +
            '<div class="text-xs mb-1"><span class="text-emerald-400 font-bold">نقاط القوة: </span><span class="text-slate-300">' + (c.strengths||[]).join(' | ') + '</span></div>' +
            '<div class="text-xs"><span class="text-red-400 font-bold">نقاط الضعف: </span><span class="text-slate-300">' + (c.weaknesses||[]).join(' | ') + '</span></div></div>';
    });
    document.getElementById('competitorCards').innerHTML = cards;

    let advHtml = '';
    (a.competitive_advantages || []).forEach(item => advHtml += '<li class="flex items-start gap-2"><span class="text-emerald-400 mt-0.5">&#10003;</span> ' + item + '</li>');
    document.getElementById('advantagesList').innerHTML = advHtml;

    let gapsHtml = '';
    (a.market_gaps || []).forEach(item => gapsHtml += '<li class="flex items-start gap-2"><span class="text-blue-400 mt-0.5">&#9733;</span> ' + item + '</li>');
    document.getElementById('gapsList').innerHTML = gapsHtml;

    document.getElementById('differentiationText').textContent = a.recommended_differentiation || '';

    let recsHtml = '';
    (a.strategic_recommendations || []).forEach(item => recsHtml += '<li class="flex items-start gap-2"><span class="text-purple-400 mt-0.5">&#128161;</span> ' + item + '</li>');
    document.getElementById('recommendationsList').innerHTML = recsHtml;
}
</script>
{% endblock %}