{% extends "base.html" %}
{% block title %}{{ ad_camp.name }} - تفاصيل الحملة{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-serif font-bold text-white">{{ ad_camp.name }}</h1>
        <a href="{{ url_for('campaigns.my_ads') }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; حملاتي</a>
    </div>

    <!-- Status & Actions -->
    <div class="flex items-center gap-3 mb-6">
        <span class="text-sm px-4 py-2 rounded-full
            {% if ad_camp.status == 'pending_approval' %}bg-yellow-500/20 text-yellow-400
            {% elif ad_camp.status == 'active' %}bg-emerald-500/20 text-emerald-400
            {% elif ad_camp.status == 'paused' %}bg-orange-500/20 text-orange-400
            {% elif ad_camp.status == 'completed' %}bg-slate-500/20 text-slate-400
            {% elif ad_camp.status == 'rejected' %}bg-red-500/20 text-red-400
            {% else %}bg-blue-500/20 text-blue-400{% endif %}">
            {% if ad_camp.status == 'pending_approval' %}في انتظار المراجعة
            {% elif ad_camp.status == 'active' %}نشطة
            {% elif ad_camp.status == 'approved' %}معتمدة
            {% elif ad_camp.status == 'paused' %}متوقفة
            {% elif ad_camp.status == 'completed' %}مكتملة
            {% elif ad_camp.status == 'rejected' %}مرفوضة
            {% else %}{{ ad_camp.status }}{% endif %}
        </span>
        {% if ad_camp.status == 'active' %}
        <form method="POST" action="{{ url_for('campaigns.request_pause_ad', ad_campaign_id=ad_camp.id) }}" class="inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="text-xs bg-orange-500/20 text-orange-400 px-3 py-1.5 rounded-lg hover:bg-orange-500/30 transition">&#9646;&#9646; إيقاف مؤقت</button>
        </form>
        {% endif %}
    </div>

    {% if ad_camp.status == 'rejected' and ad_camp.rejection_reason %}
    <div class="glass p-5 rounded-2xl mb-6 border border-red-500/20">
        <div class="text-sm font-bold text-red-400 mb-1">سبب الرفض</div>
        <p class="text-white text-sm">{{ ad_camp.rejection_reason }}</p>
    </div>
    {% endif %}

    <!-- Summary Stats -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-8">
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-gold-400">${{ "%.2f"|format(ad_camp.budget_amount) }}</div>
            <div class="text-[10px] text-slate-400 mt-1">الميزانية</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-red-400">${{ "%.2f"|format(ad_camp.total_spend) }}</div>
            <div class="text-[10px] text-slate-400 mt-1">المنفق</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-purple-400">{{ "{:,}".format(ad_camp.total_views) }}</div>
            <div class="text-[10px] text-slate-400 mt-1">مشاهدات</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-cyan-400">{{ "{:,}".format(ad_camp.total_clicks) }}</div>
            <div class="text-[10px] text-slate-400 mt-1">نقرات</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-pink-400">{{ ad_camp.avg_ctr }}%</div>
            <div class="text-[10px] text-slate-400 mt-1">CTR</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Campaign Info -->
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">معلومات الحملة</h2>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">الميزانية اليومية</span><span class="text-white">${{ "%.2f"|format(ad_camp.daily_budget) }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">المدة</span><span class="text-white">{{ ad_camp.duration_days }} يوم</span></div>
                {% if ad_camp.start_date %}
                <div class="flex justify-between"><span class="text-slate-400">تاريخ البدء</span><span class="text-white">{{ ad_camp.start_date.strftime('%Y-%m-%d') }}</span></div>
                {% endif %}
                {% if ad_camp.end_date %}
                <div class="flex justify-between"><span class="text-slate-400">تاريخ الانتهاء</span><span class="text-white">{{ ad_camp.end_date.strftime('%Y-%m-%d') }}</span></div>
                {% endif %}
                <div class="flex justify-between"><span class="text-slate-400">تاريخ الإنشاء</span><span class="text-white">{{ ad_camp.created_at.strftime('%Y-%m-%d %H:%M') }}</span></div>
                <div><span class="text-slate-400 block mb-1">المنصات</span>
                    <div class="flex gap-1">
                        {% for p in ad_camp.platforms_list %}
                        <span class="text-xs px-2 py-0.5 rounded bg-white/10 text-slate-300">{{ p }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% if ad_camp.ad_caption %}
                <div><span class="text-slate-400 block mb-1">نص الإعلان</span><span class="text-white text-xs">{{ ad_camp.ad_caption }}</span></div>
                {% endif %}
                {% if ad_camp.ad_cta %}
                <div class="flex justify-between"><span class="text-slate-400">CTA</span><span class="text-white">{{ ad_camp.ad_cta }}</span></div>
                {% endif %}
            </div>
        </div>

        <!-- Targeting -->
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">الاستهداف</h2>
            {% if ad_camp.targeting_json %}
            {% set t = ad_camp.targeting_json %}
            <div class="space-y-3 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">العمر</span><span class="text-white">{{ t.get('age_min', '?') }} - {{ t.get('age_max', '?') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">الجنس</span><span class="text-white">{{ t.get('gender', 'all') }}</span></div>
                <div><span class="text-slate-400 block mb-1">المناطق</span>
                    <div class="flex flex-wrap gap-1">{% for loc in t.get('locations', []) %}<span class="text-xs px-2 py-0.5 rounded bg-blue-500/20 text-blue-400">{{ loc }}</span>{% endfor %}</div>
                </div>
                <div><span class="text-slate-400 block mb-1">الاهتمامات</span>
                    <div class="flex flex-wrap gap-1">{% for i in t.get('interests', []) %}<span class="text-xs px-2 py-0.5 rounded bg-purple-500/20 text-purple-400">{{ i }}</span>{% endfor %}</div>
                </div>
                {% if t.get('budget_split') %}
                <div><span class="text-slate-400 block mb-1">توزيع الميزانية</span>
                    {% for plat, pct in t.get('budget_split', {}).items() %}
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-white">{{ plat }}</span>
                        <div class="flex items-center gap-2">
                            <div class="w-24 bg-black/30 rounded-full h-1.5"><div class="bg-gold-500 h-1.5 rounded-full" style="width: {{ pct }}%"></div></div>
                            <span class="text-gold-400">{{ pct }}%</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% else %}
            <p class="text-slate-400 text-sm">لا يوجد استهداف محدد</p>
            {% endif %}

            {% if ad_camp.ai_suggestions_json and ad_camp.ai_suggestions_json.get('reasoning') %}
            <div class="mt-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
                <div class="text-xs text-blue-400 font-bold mb-1">تحليل AI</div>
                <p class="text-xs text-slate-300">{{ ad_camp.ai_suggestions_json.reasoning }}</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Video Preview -->
    {% if ad_camp.campaign and ad_camp.campaign.video_url %}
    <div class="glass p-6 rounded-2xl mb-8">
        <h2 class="text-lg font-bold text-white mb-4">الفيديو</h2>
        <video controls class="w-full max-w-lg mx-auto rounded-xl" src="{{ ad_camp.campaign.video_url }}"></video>
    </div>
    {% endif %}

    <!-- Charts -->
    {% if metrics %}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">الإنفاق اليومي</h3>
            <canvas id="spendChart" height="180"></canvas>
        </div>
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">المشاهدات والنقرات</h3>
            <canvas id="viewsChart" height="180"></canvas>
        </div>
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">توزيع الإنفاق حسب المنصة</h3>
            <canvas id="platformChart" height="180"></canvas>
        </div>
    </div>

    <!-- Metrics Table -->
    <div class="glass rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">التاريخ</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">المنصة</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">ظهور</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">مشاهدات</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">نقرات</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">CTR</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">الإنفاق</th>
                        <th class="text-right text-[10px] text-slate-400 font-mono uppercase px-3 py-2">CPV</th>
                    </tr>
                </thead>
                <tbody>
                    {% for m in metrics %}
                    <tr class="border-b border-white/5 hover:bg-white/5">
                        <td class="px-3 py-2 text-white">{{ m.date }}</td>
                        <td class="px-3 py-2"><span class="text-[10px] px-1.5 rounded bg-white/10 text-slate-300">{{ m.platform }}</span></td>
                        <td class="px-3 py-2 text-white">{{ "{:,}".format(m.impressions) }}</td>
                        <td class="px-3 py-2 text-white">{{ "{:,}".format(m.views) }}</td>
                        <td class="px-3 py-2 text-white">{{ "{:,}".format(m.clicks) }}</td>
                        <td class="px-3 py-2 text-white">{{ "%.2f"|format(m.ctr) }}%</td>
                        <td class="px-3 py-2 text-gold-400">${{ "%.2f"|format(m.spend) }}</td>
                        <td class="px-3 py-2 text-slate-400">${{ "%.4f"|format(m.cost_per_view) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="glass p-8 rounded-2xl text-center">
        <div class="text-4xl mb-3 opacity-20">&#128202;</div>
        <p class="text-slate-400">لا توجد بيانات أداء بعد</p>
        <p class="text-xs text-slate-500 mt-1">ستظهر الإحصائيات بعد اعتماد وتشغيل الحملة</p>
    </div>
    {% endif %}

    {% if ad_camp.admin_notes %}
    <div class="glass p-5 rounded-2xl mt-6">
        <div class="text-sm font-bold text-white mb-2">ملاحظات المدير</div>
        <p class="text-slate-300 text-sm">{{ ad_camp.admin_notes }}</p>
    </div>
    {% endif %}
</div>

{% if metrics %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = '#94a3b8';
var labels = JSON.parse('{{ daily_labels|safe }}');
var spendData = JSON.parse('{{ daily_spend|safe }}');
var viewsData = JSON.parse('{{ daily_views|safe }}');
var clicksData = JSON.parse('{{ daily_clicks|safe }}');
var platData = JSON.parse('{{ platform_data|safe }}');

new Chart(document.getElementById('spendChart'), {
    type: 'line',
    data: {labels: labels, datasets: [{label: 'الإنفاق ($)', data: spendData, borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)', fill: true, tension: 0.3}]},
    options: {responsive: true, plugins: {legend: {labels: {color: '#94a3b8', font: {size: 10}}}}, scales: {x: {ticks: {color: '#64748b', font: {size: 9}}}, y: {ticks: {color: '#64748b'}}}}
});

new Chart(document.getElementById('viewsChart'), {
    type: 'bar',
    data: {labels: labels, datasets: [
        {label: 'مشاهدات', data: viewsData, backgroundColor: 'rgba(139,92,246,0.5)', borderColor: '#8b5cf6', borderWidth: 1},
        {label: 'نقرات', data: clicksData, backgroundColor: 'rgba(6,182,212,0.5)', borderColor: '#06b6d4', borderWidth: 1}
    ]},
    options: {responsive: true, plugins: {legend: {labels: {color: '#94a3b8', font: {size: 10}}}}, scales: {x: {ticks: {color: '#64748b', font: {size: 9}}}, y: {ticks: {color: '#64748b'}}}}
});

new Chart(document.getElementById('platformChart'), {
    type: 'doughnut',
    data: {labels: Object.keys(platData), datasets: [{data: Object.values(platData), backgroundColor: ['#3b82f6','#ec4899','#ef4444','#eab308','#64748b']}]},
    options: {responsive: true, plugins: {legend: {labels: {color: '#94a3b8', font: {size: 10}}}}}
});
</script>
{% endif %}
{% endblock %}