{% 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 items-center gap-3">
            {% include "shared/_print_share_bar.html" %}
            <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; العودة للتقرير</a>
        </div>
    </div>

    {% if milestones %}
    <!-- Progress Bar -->
    <div class="glass p-6 rounded-2xl mb-8">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm text-slate-400">التقدم الإجمالي</span>
            <span class="text-sm font-bold text-gold-400">{{ done_tasks }}/{{ total_tasks }} مهمة ({{ progress }}%)</span>
        </div>
        <div class="w-full bg-white/10 rounded-full h-3">
            <div class="bg-gradient-to-r from-gold-500 to-emerald-500 h-3 rounded-full transition-all duration-500" style="width: {{ progress }}%"></div>
        </div>
    </div>

    <!-- Milestones Timeline -->
    <div class="space-y-4">
        {% for milestone in milestones %}
        <div class="glass p-6 rounded-2xl border-r-4
            {% if milestone.status == 'completed' %}border-emerald-500
            {% elif milestone.status == 'in_progress' %}border-gold-500
            {% elif milestone.status == 'skipped' %}border-slate-500
            {% else %}border-white/10{% endif %}">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center text-sm font-bold
                        {% if milestone.status == 'completed' %}bg-emerald-500/20 text-emerald-400
                        {% elif milestone.status == 'in_progress' %}bg-gold-500/20 text-gold-400
                        {% else %}bg-white/10 text-slate-400{% endif %}">
                        W{{ milestone.week_number }}
                    </div>
                    <div>
                        <h3 class="text-white font-bold">{{ milestone.title }}</h3>
                        {% if milestone.description %}
                        <p class="text-xs text-slate-400 mt-0.5">{{ milestone.description }}</p>
                        {% endif %}
                    </div>
                </div>
                <span class="text-xs px-2 py-1 rounded-full
                    {% if milestone.status == 'completed' %}bg-emerald-500/20 text-emerald-400
                    {% elif milestone.status == 'in_progress' %}bg-gold-500/20 text-gold-400
                    {% elif milestone.status == 'skipped' %}bg-slate-500/20 text-slate-400
                    {% else %}bg-white/5 text-slate-500{% endif %}">
                    {% if milestone.status == 'completed' %}&#10003; مكتمل
                    {% elif milestone.status == 'in_progress' %}جاري التنفيذ
                    {% elif milestone.status == 'skipped' %}تم تخطيه
                    {% else %}قادم{% endif %}
                </span>
            </div>

            <!-- Tasks -->
            <div class="space-y-2 mt-4">
                {% for task in milestone.tasks %}
                <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition cursor-pointer"
                     onclick="toggleTask({{ task.id }}, this)">
                    <div class="w-5 h-5 rounded border flex items-center justify-center text-xs
                        {% if task.is_done %}bg-emerald-500/20 border-emerald-500/50 text-emerald-400{% else %}border-white/20{% endif %}">
                        {% if task.is_done %}&#10003;{% endif %}
                    </div>
                    <span class="text-sm {% if task.is_done %}text-slate-500 line-through{% else %}text-slate-300{% endif %}">{{ task.title }}</span>
                </div>
                {% endfor %}
            </div>

            {% if milestone.due_date %}
            <div class="text-xs text-slate-500 mt-3">الموعد المتوقع: {{ milestone.due_date.strftime('%Y-%m-%d') }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    {% else %}
    <!-- Generate Roadmap -->
    <div class="text-center py-16">
        <div class="text-6xl mb-4 opacity-20">&#128204;</div>
        <h2 class="text-xl font-bold text-white mb-2">لم يتم إنشاء خطة التنفيذ بعد</h2>
        <p class="text-slate-400 mb-6 text-sm">سيقوم الذكاء الاصطناعي بتوليد خطة تنفيذ مرحلية (12 أسبوع) بناءً على دراسة الجدوى</p>
        <button onclick="generateRoadmap()" id="genBtn" class="bg-gold-500 text-black px-8 py-3 rounded-xl font-bold hover:bg-gold-400 transition">
            توليد خطة التنفيذ
        </button>
        <div id="genLoading" class="hidden mt-4">
            <div class="inline-flex items-center gap-3 bg-gold-500/10 border border-gold-500/20 text-gold-400 px-6 py-3 rounded-xl text-sm">
                <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                جاري التوليد...
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
function generateRoadmap() {
    document.getElementById('genBtn').classList.add('hidden');
    document.getElementById('genLoading').classList.remove('hidden');
    fetch('{{ url_for("roadmap.generate", report_id=report.id) }}', {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.redirect) window.location.href = data.redirect;
            else if (data.error) { alert(data.error); location.reload(); }
        })
        .catch(() => { alert('حدث خطأ'); location.reload(); });
}

function toggleTask(taskId, el) {
    fetch('/roadmap/task/' + taskId + '/toggle', {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.status === 'ok') location.reload();
        });
}
</script>
{% endblock %}