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

    <!-- Summary Cards Row 1 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-gold-400">{{ ad_campaigns|length }}</div>
            <div class="text-xs text-slate-400 mt-1">إجمالي الحملات</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-emerald-400">{{ active_count }}</div>
            <div class="text-xs text-slate-400 mt-1">الحملات النشطة</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-red-400">${{ "%.2f"|format(total_spend) }}</div>
            <div class="text-xs text-slate-400 mt-1">إجمالي المنفق</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-blue-400">${{ "%.2f"|format(user_budget.remaining if user_budget else 0) }}</div>
            <div class="text-xs text-slate-400 mt-1">الرصيد المتبقي</div>
        </div>
    </div>

    <!-- Summary Cards Row 2 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-purple-400">{{ "{:,}".format(total_views) }}</div>
            <div class="text-xs text-slate-400 mt-1">إجمالي المشاهدات</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-cyan-400">{{ "{:,}".format(total_clicks) }}</div>
            <div class="text-xs text-slate-400 mt-1">إجمالي النقرات</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-pink-400">{{ avg_ctr }}%</div>
            <div class="text-xs text-slate-400 mt-1">متوسط CTR</div>
        </div>
        <div class="glass p-5 rounded-2xl text-center">
            <div class="text-2xl font-bold text-orange-400">${{ "%.4f"|format(avg_cpv) }}</div>
            <div class="text-xs text-slate-400 mt-1">تكلفة لكل مشاهدة</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="glass p-4 rounded-2xl mb-6">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">المنصة</label>
                <select name="platform" class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="">الكل</option>
                    {% for p in ['facebook','tiktok','youtube','snapchat','twitter'] %}
                    <option value="{{ p }}" {% if f_platform == p %}selected{% endif %}>{{ p }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">الحالة</label>
                <select name="status" class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="">الكل</option>
                    {% for s, label in [('pending_approval','في انتظار المراجعة'),('active','نشطة'),('paused','متوقفة'),('completed','مكتملة'),('rejected','مرفوضة')] %}
                    <option value="{{ s }}" {% if f_status == s %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">من تاريخ</label>
                <input type="date" name="date_from" value="{{ f_date_from or '' }}" class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">إلى تاريخ</label>
                <input type="date" name="date_to" value="{{ f_date_to or '' }}" class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">بحث</label>
                <input type="text" name="q" value="{{ f_q or '' }}" placeholder="اسم الحملة..." class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs w-32">
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">ترتيب</label>
                <select name="sort" class="bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="date" {% if f_sort == 'date' %}selected{% endif %}>بالتاريخ</option>
                    <option value="spend" {% if f_sort == 'spend' %}selected{% endif %}>بالإنفاق</option>
                    <option value="views" {% if f_sort == 'views' %}selected{% endif %}>بالمشاهدات</option>
                </select>
            </div>
            <button type="submit" class="bg-gold-500 text-black px-4 py-1.5 rounded-lg text-xs font-bold hover:bg-gold-400 transition">تصفية</button>
            <a href="{{ url_for('campaigns.my_ads') }}" class="bg-white/10 text-white px-3 py-1.5 rounded-lg text-xs hover:bg-white/20 transition">مسح</a>
        </form>
    </div>

    <!-- Charts -->
    <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="dailyChart" 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>

    <!-- Campaigns List -->
    <div class="space-y-3">
        {% for camp in ad_campaigns %}
        <a href="{{ url_for('campaigns.ad_detail', ad_campaign_id=camp.id) }}" class="block glass p-5 rounded-2xl hover:bg-white/5 transition">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <div class="flex items-center gap-3">
                        <h3 class="text-white font-bold">{{ camp.name }}</h3>
                        <span class="text-xs px-2 py-0.5 rounded-full
                            {% if camp.status == 'pending_approval' %}bg-yellow-500/20 text-yellow-400
                            {% elif camp.status == 'active' %}bg-emerald-500/20 text-emerald-400
                            {% elif camp.status == 'paused' %}bg-orange-500/20 text-orange-400
                            {% elif camp.status == 'completed' %}bg-slate-500/20 text-slate-400
                            {% elif camp.status == 'rejected' %}bg-red-500/20 text-red-400
                            {% else %}bg-blue-500/20 text-blue-400{% endif %}">
                            {% if camp.status == 'pending_approval' %}في انتظار المراجعة
                            {% elif camp.status == 'active' %}نشطة
                            {% elif camp.status == 'approved' %}معتمدة
                            {% elif camp.status == 'paused' %}متوقفة
                            {% elif camp.status == 'completed' %}مكتملة
                            {% elif camp.status == 'rejected' %}مرفوضة
                            {% else %}{{ camp.status }}{% endif %}
                        </span>
                    </div>
                    <div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
                        <span>${{ "%.2f"|format(camp.budget_amount) }} ميزانية</span>
                        <span>{{ camp.duration_days }} يوم</span>
                        <span>{{ camp.created_at.strftime('%Y-%m-%d') }}</span>
                        <div class="flex gap-1">
                            {% for p in camp.platforms_list %}
                            <span class="px-1.5 py-0.5 rounded bg-white/10 text-slate-300 text-[10px]">{{ p }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-sm font-bold text-gold-400">${{ "%.2f"|format(camp.total_spend) }}</div>
                    <div class="text-xs text-slate-400">{{ "{:,}".format(camp.total_views) }} مشاهدة</div>
                    <div class="text-xs text-slate-500">CTR {{ camp.avg_ctr }}%</div>
                </div>
            </div>
            {% if camp.status == 'rejected' and camp.rejection_reason %}
            <div class="mt-3 p-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
                سبب الرفض: {{ camp.rejection_reason }}
            </div>
            {% endif %}
        </a>
        {% else %}
        <div class="text-center py-16">
            <div class="text-6xl mb-4 opacity-20">&#128226;</div>
            <p class="text-slate-400 mb-4">لا توجد حملات إعلانية بعد</p>
            <p class="text-xs text-slate-500">أنشئ فيديو من حملة تسويقية ثم اضغط "إطلاق حملة إعلانية"</p>
        </div>
        {% endfor %}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = '#94a3b8';

// Daily Chart
new Chart(document.getElementById('dailyChart'), {
    type: 'line',
    data: {
        labels: JSON.parse('{{ daily_labels|safe }}'),
        datasets: [
            {label: 'الإنفاق ($)', data: JSON.parse('{{ daily_spend|safe }}'), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)', fill: true, tension: 0.3, yAxisID: 'y'},
            {label: 'المشاهدات', data: JSON.parse('{{ daily_views|safe }}'), borderColor: '#8b5cf6', backgroundColor: 'rgba(139,92,246,0.1)', fill: false, tension: 0.3, yAxisID: 'y1'}
        ]
    },
    options: {
        responsive: true,
        plugins: {legend: {labels: {color: '#94a3b8', font: {size: 10}}}},
        scales: {
            x: {ticks: {color: '#64748b', font: {size: 9}}},
            y: {type: 'linear', position: 'left', ticks: {color: '#f59e0b'}},
            y1: {type: 'linear', position: 'right', grid: {drawOnChartArea: false}, ticks: {color: '#8b5cf6'}}
        }
    }
});

// Platform Pie
var platData = JSON.parse('{{ platform_spend|safe }}');
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>
{% endblock %}