{% extends "base.html" %}
{% block title %}متابعة الأداء - {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-6xl 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> متابعة الأداء (KPIs)
            </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" %}
            {% if kpis %}
            <button onclick="getAIAnalysis()" id="aiBtn" class="bg-purple-500/20 text-purple-400 px-4 py-2 rounded-lg text-sm hover:bg-purple-500/30 transition">تحليل AI</button>
            {% endif %}
            <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 kpis %}
    <!-- KPI Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {% for kpi in kpis %}
        <div class="glass p-5 rounded-2xl" id="kpi-{{ kpi.id }}">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs px-2 py-0.5 rounded-full
                    {% if kpi.category == 'financial' %}bg-gold-500/20 text-gold-400
                    {% elif kpi.category == 'customers' %}bg-blue-500/20 text-blue-400
                    {% elif kpi.category == 'operations' %}bg-purple-500/20 text-purple-400
                    {% else %}bg-emerald-500/20 text-emerald-400{% endif %}">
                    {% if kpi.category == 'financial' %}مالي
                    {% elif kpi.category == 'customers' %}عملاء
                    {% elif kpi.category == 'operations' %}عمليات
                    {% else %}نمو{% endif %}
                </span>
                <span class="text-xs text-slate-500">{{ kpi.unit }}</span>
            </div>
            <h3 class="text-white font-bold text-sm mb-2">{{ kpi.name }}</h3>

            {% set latest = kpi.entries|first if kpi.entries else None %}
            <div class="flex items-end justify-between mb-3">
                <div>
                    <div class="text-xs text-slate-500">الفعلي</div>
                    <div class="text-xl font-bold {% if latest %}text-white{% else %}text-slate-600{% endif %}">
                        {{ '{:,.0f}'.format(latest.actual_value) if latest else '---' }}
                    </div>
                </div>
                {% if kpi.target_value %}
                <div class="text-left">
                    <div class="text-xs text-slate-500">المستهدف</div>
                    <div class="text-sm text-slate-400">{{ '{:,.0f}'.format(kpi.target_value) }}</div>
                </div>
                {% endif %}
            </div>

            {% if kpi.target_value and latest %}
            {% set pct = (latest.actual_value / kpi.target_value * 100)|round|int %}
            <div class="w-full bg-white/10 rounded-full h-2 mb-2">
                <div class="h-2 rounded-full transition-all {% if pct >= 80 %}bg-emerald-500{% elif pct >= 50 %}bg-gold-500{% else %}bg-red-500{% endif %}"
                     style="width: {{ [pct, 100]|min }}%"></div>
            </div>
            <div class="text-xs {% if pct >= 80 %}text-emerald-400{% elif pct >= 50 %}text-gold-400{% else %}text-red-400{% endif %}">{{ pct }}% من المستهدف</div>
            {% endif %}

            <!-- Quick Entry -->
            <div class="mt-3 pt-3 border-t border-white/5 no-print">
                <div class="flex gap-2">
                    <input type="number" id="val-{{ kpi.id }}" placeholder="القيمة الفعلية"
                        class="flex-1 bg-black/20 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-gold-500/50">
                    <button onclick="saveEntry({{ kpi.id }})" class="bg-gold-500/20 text-gold-400 px-3 py-1.5 rounded-lg text-xs hover:bg-gold-500/30 transition">حفظ</button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- AI Analysis Result -->
    <div id="aiResult" class="hidden glass p-6 rounded-2xl mb-8">
        <h3 class="text-white font-bold mb-3 flex items-center gap-2">&#9733; تحليل الذكاء الاصطناعي</h3>
        <div id="aiContent" class="text-sm text-slate-300 whitespace-pre-wrap"></div>
    </div>

    {% else %}
    <!-- Generate KPIs -->
    <div class="text-center py-16">
        <div class="text-6xl mb-4 opacity-20">&#128200;</div>
        <h2 class="text-xl font-bold text-white mb-2">لم يتم إنشاء مؤشرات الأداء بعد</h2>
        <p class="text-slate-400 mb-6 text-sm">سيقوم الذكاء الاصطناعي بتحديد مؤشرات الأداء الرئيسية بناءً على دراسة الجدوى</p>
        <button onclick="generateKPIs()" 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 generateKPIs() {
    document.getElementById('genBtn').classList.add('hidden');
    document.getElementById('genLoading').classList.remove('hidden');
    fetch('{{ url_for("kpis.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 saveEntry(kpiId) {
    const val = document.getElementById('val-' + kpiId).value;
    if (!val) return;
    fetch('/kpis/entry/' + kpiId, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({actual_value: val, month: '{{ current_month }}'})
    })
    .then(r => r.json())
    .then(data => { if (data.status === 'ok') location.reload(); else alert(data.error); })
    .catch(() => alert('حدث خطأ'));
}

function getAIAnalysis() {
    const btn = document.getElementById('aiBtn');
    btn.textContent = 'جاري التحليل...';
    btn.disabled = true;
    fetch('{{ url_for("kpis.ai_analysis", report_id=report.id) }}', {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.analysis) {
                document.getElementById('aiContent').textContent = data.analysis;
                document.getElementById('aiResult').classList.remove('hidden');
            } else { alert(data.error || 'حدث خطأ'); }
            btn.textContent = 'تحليل AI';
            btn.disabled = false;
        })
        .catch(() => { btn.textContent = 'تحليل AI'; btn.disabled = false; alert('حدث خطأ'); });
}
</script>
{% endblock %}