{% 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">WHAT-IF SIMULATOR</div>
            <h1 class="text-2xl font-bold text-white">محاكاة مالية — {{ report.project_name }}</h1>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="glass p-6 rounded-xl border border-white/10">
            <h3 class="text-white font-semibold mb-4">القيم الأصلية</h3>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">تكلفة التأسيس:</span><span class="text-white">{{ fh.get('estimated_startup_cost', 'N/A') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">التكاليف الشهرية:</span><span class="text-white">{{ fh.get('monthly_costs', 'N/A') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">نقطة التعادل:</span><span class="text-white">{{ fh.get('break_even', 'N/A') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">إيرادات السنة 1:</span><span class="text-white">{{ fh.get('year1_revenue', 'N/A') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">إيرادات السنة 2:</span><span class="text-white">{{ fh.get('year2_revenue', 'N/A') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">إيرادات السنة 3:</span><span class="text-white">{{ fh.get('year3_revenue', 'N/A') }}</span></div>
            </div>
        </div>

        <div class="glass p-6 rounded-xl border border-white/10">
            <h3 class="text-white font-semibold mb-4">تعديل "ماذا لو"</h3>
            <div class="space-y-3">
                <div><label class="text-xs text-slate-400 block mb-1">تغيير تكلفة التأسيس (%)</label><input id="startup_change" type="number" value="0" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></div>
                <div><label class="text-xs text-slate-400 block mb-1">تغيير التكاليف الشهرية (%)</label><input id="monthly_change" type="number" value="0" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></div>
                <div><label class="text-xs text-slate-400 block mb-1">تغيير الإيرادات (%)</label><input id="revenue_change" type="number" value="0" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></div>
                <div><label class="text-xs text-slate-400 block mb-1">تغيير حجم السوق (%)</label><input id="market_change" type="number" value="0" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></div>
            </div>
            <button onclick="simulate()" class="w-full mt-4 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>

    <div id="simResult" class="hidden glass p-6 rounded-xl border border-white/10 mt-6">
        <h3 class="text-white font-semibold mb-3">نتائج المحاكاة</h3>
        <div id="simContent" class="text-slate-300 text-sm"></div>
    </div>
</div>

<script>
async function simulate() {
    document.getElementById('simResult').classList.remove('hidden');
    document.getElementById('simContent').innerHTML = '<span class="text-gold-400">جاري الحساب...</span>';
    const changes = {
        startup_cost_change: +document.getElementById('startup_change').value,
        monthly_cost_change: +document.getElementById('monthly_change').value,
        revenue_change: +document.getElementById('revenue_change').value,
        market_size_change: +document.getElementById('market_change').value
    };
    const resp = await fetch('{{ url_for("tools.api_simulate") }}', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({report_id: {{ report.id }}, changes})
    });
    const data = await resp.json();
    let html = '';
    if (data.impact_summary) html += `<div class="mb-4 p-3 rounded-lg bg-white/5"><b class="text-gold-400">التأثير:</b> ${data.impact_summary}</div>`;
    if (data.risk_change) html += `<div class="mb-2"><b>المخاطر:</b> <span class="${data.risk_change === 'decreased' ? 'text-emerald-400' : 'text-red-400'}">${data.risk_change}</span></div>`;
    if (data.new_break_even) html += `<div class="mb-2"><b>نقطة التعادل الجديدة:</b> ${data.new_break_even}</div>`;
    if (data.recommendations) html += `<div class="mt-3"><b>التوصيات:</b><ul class="list-disc list-inside mt-1">${data.recommendations.map(r => `<li>${r}</li>`).join('')}</ul></div>`;
    document.getElementById('simContent').innerHTML = html || JSON.stringify(data);
}
</script>
{% endblock %}