{% extends "base.html" %}
{% block title %}مطابقة المستثمرين — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="flex items-center gap-3 mb-8">
        <a href="{{ url_for('study.view', report_id=report.id) }}" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-slate-400 hover:bg-white/10 transition">&larr;</a>
        <div>
            <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">INVESTOR MATCHING</div>
            <h1 class="text-2xl font-bold text-white">مطابقة المستثمرين — {{ report.project_name }}</h1>
        </div>
    </div>

    <div class="glass p-6 rounded-xl border border-white/10 mb-6">
        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="text-xs text-slate-400 block mb-1">مرحلة المشروع</label>
                <select id="stage" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    <option value="pre-seed">Pre-Seed</option>
                    <option value="seed" selected>Seed</option>
                    <option value="series-a">Series A</option>
                    <option value="series-b">Series B+</option>
                </select>
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">المنطقة</label>
                <select id="region" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    <option value="Saudi Arabia">السعودية</option>
                    <option value="UAE">الإمارات</option>
                    <option value="MENA" selected>الشرق الأوسط</option>
                    <option value="Global">عالمي</option>
                </select>
            </div>
        </div>
        <button onclick="matchInvestors()" class="w-full bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">بحث عن مستثمرين</button>
    </div>

    <div id="investors" class="hidden space-y-3"></div>
</div>

<script>
async function matchInvestors() {
    const el = document.getElementById('investors');
    el.classList.remove('hidden');
    el.innerHTML = '<div class="glass p-4 rounded-xl border border-white/10 text-gold-400 text-sm">جاري البحث عن المستثمرين المناسبين...</div>';
    const resp = await fetch('{{ url_for("tools.api_match_investors") }}', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({report_id: {{ report.id }}, stage: document.getElementById('stage').value, region: document.getElementById('region').value})
    });
    const data = await resp.json();
    let html = '';
    if (data.investors) {
        html += '<h3 class="text-white font-semibold mb-3">مستثمرون مقترحون</h3>';
        data.investors.forEach(inv => {
            const score = inv.fit_score || 0;
            const color = score >= 70 ? 'emerald' : (score >= 40 ? 'yellow' : 'red');
            html += `<div class="glass p-5 rounded-xl border border-white/10"><div class="flex justify-between items-start"><div><span class="text-white font-semibold">${inv.name}</span> <span class="text-xs text-slate-500 ml-2">${inv.type || ''}</span><p class="text-slate-400 text-xs mt-1">${inv.focus || ''}</p></div><span class="bg-${color}-500/20 text-${color}-400 text-xs px-2 py-1 rounded-full">${score}% match</span></div>`;
            if (inv.typical_check) html += `<p class="text-xs text-slate-500 mt-2">Typical check: ${inv.typical_check}</p>`;
            if (inv.reason) html += `<p class="text-xs text-slate-300 mt-1">${inv.reason}</p>`;
            if (inv.website) html += `<a href="${inv.website}" target="_blank" class="text-xs text-blue-400 mt-1 inline-block">${inv.website}</a>`;
            html += '</div>';
        });
    }
    if (data.grants && data.grants.length) {
        html += '<h3 class="text-white font-semibold mt-6 mb-3">منح وبرامج دعم</h3>';
        data.grants.forEach(g => { html += `<div class="glass p-4 rounded-xl border border-emerald-500/20"><span class="text-emerald-400 font-semibold text-sm">${g.name}</span> <span class="text-slate-500 text-xs ml-2">${g.provider || ''}</span><p class="text-xs text-slate-400 mt-1">${g.amount || ''} — ${g.eligibility || ''}</p></div>`; });
    }
    if (data.tips && data.tips.length) {
        html += '<div class="glass p-4 rounded-xl border border-white/10 mt-4"><h4 class="text-gold-400 text-sm font-semibold mb-2">نصائح</h4><ul class="list-disc list-inside text-xs text-slate-300 space-y-1">';
        data.tips.forEach(t => { html += `<li>${t}</li>`; });
        html += '</ul></div>';
    }
    el.innerHTML = html || '<div class="text-red-400">حدث خطأ</div>';
}
</script>
{% endblock %}