{% 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>
        <div class="flex gap-3">
            <a href="{{ url_for('admin.export_ad_csv') }}" class="text-sm bg-white/10 text-white px-4 py-2 rounded-lg hover:bg-white/20 transition">&#8681; تصدير CSV</a>
            <a href="{{ url_for('admin.index') }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; لوحة التحكم</a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3 mb-8">
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-red-400">${{ "%.2f"|format(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-gold-400">{{ campaigns|length }}</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-emerald-400">{{ active_campaigns }}</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-blue-400">{{ unique_advertisers }}</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(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(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">{{ avg_ctr }}%</div>
            <div class="text-[10px] text-slate-400 mt-1">CTR</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-xl font-bold text-orange-400">${{ "%.4f"|format(avg_cpc) }}</div>
            <div class="text-[10px] text-slate-400 mt-1">CPC</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="glass p-5 rounded-2xl mb-8">
        <form method="GET" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3">
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">المستخدم</label>
                <select name="user_id" class="w-full bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="">الكل</option>
                    {% for u in all_users %}<option value="{{ u.id }}" {% if f_user_id == u.id %}selected{% endif %}>{{ u.name }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">الحملة</label>
                <select name="campaign_id" class="w-full bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="">الكل</option>
                    {% for c in all_ad_campaigns %}<option value="{{ c.id }}" {% if f_campaign_id == c.id %}selected{% endif %}>{{ c.name }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">المنصة</label>
                <select name="platform" class="w-full 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="w-full bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
                    <option value="">الكل</option>
                    {% for s in ['active','paused','completed','pending_approval','approved','rejected'] %}<option value="{{ s }}" {% if f_status == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-[10px] text-slate-400 mb-1">بحث</label>
                <input type="text" name="q" value="{{ f_q or '' }}" placeholder="اسم الحملة..." class="w-full 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_from" value="{{ f_date_from or '' }}" class="w-full 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="w-full 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="number" step="0.01" name="spend_min" value="{{ f_spend_min or '' }}" class="w-full 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="number" step="0.01" name="spend_max" value="{{ f_spend_max or '' }}" class="w-full bg-black/20 border border-white/10 rounded-lg px-2 py-1.5 text-white text-xs">
            </div>
            <div class="flex items-end gap-2">
                <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('admin.ad_analytics') }}" class="bg-white/10 text-white px-3 py-1.5 rounded-lg text-xs hover:bg-white/20 transition">مسح</a>
            </div>
        </form>
    </div>

    <!-- Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Daily Spend Chart -->
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">الإنفاق اليومي</h3>
            <canvas id="dailySpendChart" height="200"></canvas>
        </div>
        <!-- Platform Breakdown -->
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">توزيع الإنفاق حسب المنصة</h3>
            <canvas id="platformChart" height="200"></canvas>
        </div>
        <!-- User Breakdown -->
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">الإنفاق حسب المستخدم</h3>
            <canvas id="userChart" height="200"></canvas>
        </div>
        <!-- Views & Clicks -->
        <div class="glass p-5 rounded-2xl">
            <h3 class="text-sm font-bold text-white mb-3">المشاهدات والنقرات</h3>
            <canvas id="viewsClicksChart" height="200"></canvas>
        </div>
    </div>

    <!-- Campaigns 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">مشاهدات</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>
                    </tr>
                </thead>
                <tbody>
                    {% for c in campaigns %}
                    <tr class="border-b border-white/5 hover:bg-white/5">
                        <td class="px-3 py-2"><a href="{{ url_for('admin.ad_review_detail', ad_campaign_id=c.id) }}" class="text-white hover:text-gold-400">{{ c.name }}</a></td>
                        <td class="px-3 py-2 text-slate-400">{{ c.user.name if c.user else '' }}</td>
                        <td class="px-3 py-2">{% for p in c.platforms_list %}<span class="text-[10px] px-1 rounded bg-white/10 text-slate-300">{{ p }}</span> {% endfor %}</td>
                        <td class="px-3 py-2 text-gold-400">${{ "%.2f"|format(c.budget_amount) }}</td>
                        <td class="px-3 py-2 text-red-400">${{ "%.2f"|format(c.total_spend) }}</td>
                        <td class="px-3 py-2 text-white">{{ "{:,}".format(c.total_views) }}</td>
                        <td class="px-3 py-2 text-white">{{ "{:,}".format(c.total_clicks) }}</td>
                        <td class="px-3 py-2 text-white">{{ c.avg_ctr }}%</td>
                        <td class="px-3 py-2">
                            <span class="text-[10px] px-2 py-0.5 rounded-full
                                {% if c.status == 'active' %}bg-emerald-500/20 text-emerald-400
                                {% elif c.status == 'paused' %}bg-orange-500/20 text-orange-400
                                {% elif c.status == 'completed' %}bg-slate-500/20 text-slate-400
                                {% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ c.status }}</span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const chartDefaults = {responsive: true, plugins: {legend: {labels: {color: '#94a3b8', font: {size: 10}}}}};
Chart.defaults.color = '#94a3b8';

// Daily Spend
new Chart(document.getElementById('dailySpendChart'), {
    type: 'line',
    data: {
        labels: {{ daily_labels|safe }},
        datasets: [{label: 'الإنفاق ($)', data: {{ daily_spend|safe }}, borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)', fill: true, tension: 0.3}]
    },
    options: {...chartDefaults, scales: {x: {ticks: {color: '#64748b', font: {size: 9}}}, y: {ticks: {color: '#64748b'}}}}
});

// Platform Pie
const platData = {{ 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: chartDefaults
});

// User Bar
const userData = {{ user_spend|safe }};
new Chart(document.getElementById('userChart'), {
    type: 'bar',
    data: {
        labels: Object.keys(userData),
        datasets: [{label: 'الإنفاق ($)', data: Object.values(userData), backgroundColor: 'rgba(245,158,11,0.5)', borderColor: '#f59e0b', borderWidth: 1}]
    },
    options: {...chartDefaults, scales: {x: {ticks: {color: '#64748b', font: {size: 9}}}, y: {ticks: {color: '#64748b'}}}}
});

// Views & Clicks
new Chart(document.getElementById('viewsClicksChart'), {
    type: 'bar',
    data: {
        labels: {{ daily_labels|safe }},
        datasets: [
            {label: 'مشاهدات', data: {{ daily_views|safe }}, backgroundColor: 'rgba(139,92,246,0.5)', borderColor: '#8b5cf6', borderWidth: 1},
            {label: 'نقرات', data: {{ daily_clicks|safe }}, backgroundColor: 'rgba(6,182,212,0.5)', borderColor: '#06b6d4', borderWidth: 1}
        ]
    },
    options: {...chartDefaults, scales: {x: {ticks: {color: '#64748b', font: {size: 9}}}, y: {ticks: {color: '#64748b'}}}}
});
</script>
{% endblock %}