{% 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">PROGRESS TRACKER</div>
            <h1 class="text-2xl font-bold text-white">خطة التنفيذ — {{ report.project_name }}</h1>
        </div>
    </div>

    <button onclick="generateRoadmap()" class="w-full glass p-4 rounded-xl border border-gold-500/20 text-gold-400 text-sm font-medium hover:bg-gold-500/10 transition mb-6">
        توليد خطة تنفيذ بالذكاء الاصطناعي
    </button>

    <div id="roadmap" class="space-y-4"></div>
</div>

<script>
async function generateRoadmap() {
    const el = document.getElementById('roadmap');
    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_roadmap") }}', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({report_id: {{ report.id }}})
    });
    const data = await resp.json();
    let html = '';
    if (data.quick_wins && data.quick_wins.length) {
        html += '<div class="glass p-5 rounded-xl border border-emerald-500/20"><h3 class="text-emerald-400 font-semibold text-sm mb-3">مكاسب سريعة (الأسبوع الأول)</h3><ul class="space-y-1">';
        data.quick_wins.forEach(w => { html += `<li class="text-xs text-slate-300 flex items-center gap-2"><input type="checkbox" class="rounded bg-white/5 border-white/20 text-emerald-500"> ${w}</li>`; });
        html += '</ul></div>';
    }
    if (data.phases) {
        const colors = ['blue', 'indigo', 'purple', 'emerald', 'amber', 'pink'];
        data.phases.forEach((phase, i) => {
            const c = colors[i % colors.length];
            html += `<div class="glass p-5 rounded-xl border border-${c}-500/20"><div class="flex items-center justify-between mb-3"><h3 class="text-${c}-400 font-semibold text-sm">${phase.name}</h3><span class="text-xs text-slate-500">${phase.duration || ''}</span></div>`;
            if (phase.milestone) html += `<div class="text-xs bg-${c}-500/10 text-${c}-400 px-3 py-1.5 rounded-lg mb-3 inline-block">${phase.milestone}</div>`;
            if (phase.tasks) {
                html += '<div class="space-y-1.5">';
                phase.tasks.forEach(t => {
                    const task = typeof t === 'string' ? t : t.task;
                    const priority = typeof t === 'object' ? t.priority : 'medium';
                    const pColor = priority === 'high' ? 'red' : (priority === 'low' ? 'slate' : 'yellow');
                    html += `<div class="flex items-center gap-2"><input type="checkbox" class="rounded bg-white/5 border-white/20 text-${c}-500"><span class="text-xs text-slate-300 flex-1">${task}</span><span class="text-[10px] px-1.5 py-0.5 rounded bg-${pColor}-500/10 text-${pColor}-400">${priority}</span></div>`;
                });
                html += '</div>';
            }
            if (phase.budget_allocation) html += `<div class="text-xs text-slate-500 mt-3">الميزانية: ${phase.budget_allocation}</div>`;
            html += '</div>';
        });
    }
    if (data.critical_path && data.critical_path.length) {
        html += '<div class="glass p-5 rounded-xl border border-red-500/20"><h3 class="text-red-400 font-semibold text-sm mb-2">المسار الحرج</h3><ul class="list-disc list-inside text-xs text-slate-300 space-y-1">';
        data.critical_path.forEach(c => { html += `<li>${c}</li>`; });
        html += '</ul></div>';
    }
    el.innerHTML = html || '<div class="text-red-400">حدث خطأ</div>';
}
</script>
{% endblock %}