{% extends "base.html" %}
{% block title %}إدارة حسابات الإعلانات{% endblock %}
{% block content %}
<div class="max-w-6xl 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('admin.index') }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; لوحة التحكم</a>
    </div>

    <!-- Global Wallet -->
    <div class="glass p-6 rounded-2xl mb-8">
        <h2 class="text-lg font-bold text-white mb-4">محفظة الميزانية الرئيسية</h2>
        <form method="POST" action="{{ url_for('admin.save_ad_wallet') }}" class="flex flex-wrap items-end gap-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="block text-xs text-slate-400 mb-1">الميزانية الكلية ($)</label>
                <input type="number" step="0.01" name="total_budget" value="{{ wallet.total_budget if wallet else 0 }}" class="bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white w-40">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">العملة</label>
                <select name="currency" class="bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                    <option value="USD" {% if wallet and wallet.currency == 'USD' %}selected{% endif %}>USD</option>
                    <option value="SAR" {% if wallet and wallet.currency == 'SAR' %}selected{% endif %}>SAR</option>
                    <option value="EUR" {% if wallet and wallet.currency == 'EUR' %}selected{% endif %}>EUR</option>
                </select>
            </div>
            <button type="submit" class="bg-gold-500 text-black px-4 py-2 rounded-lg font-bold hover:bg-gold-400 transition">حفظ</button>
        </form>
        {% if wallet %}
        <div class="grid grid-cols-3 gap-4 mt-4">
            <div class="bg-black/20 p-3 rounded-lg text-center">
                <div class="text-xl font-bold text-gold-400">${{ "%.2f"|format(wallet.total_budget) }}</div>
                <div class="text-xs text-slate-400">الميزانية</div>
            </div>
            <div class="bg-black/20 p-3 rounded-lg text-center">
                <div class="text-xl font-bold text-red-400">${{ "%.2f"|format(wallet.total_spent) }}</div>
                <div class="text-xs text-slate-400">المنفق</div>
            </div>
            <div class="bg-black/20 p-3 rounded-lg text-center">
                <div class="text-xl font-bold text-emerald-400">${{ "%.2f"|format(wallet.remaining) }}</div>
                <div class="text-xs text-slate-400">المتبقي</div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Add/Edit Account Form -->
    <div class="glass p-6 rounded-2xl mb-8">
        <h2 class="text-lg font-bold text-white mb-4">إضافة / تعديل حساب إعلاني</h2>
        <form method="POST" action="{{ url_for('admin.save_ad_account') }}" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">المنصة</label>
                    <select name="platform" required class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                        <option value="">اختر المنصة</option>
                        <option value="facebook">Facebook / Instagram (Meta)</option>
                        <option value="tiktok">TikTok</option>
                        <option value="youtube">YouTube (Google Ads)</option>
                        <option value="snapchat">Snapchat</option>
                        <option value="twitter">X / Twitter</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Ad Account ID</label>
                    <input type="text" name="account_id" placeholder="act_123456789" class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">حد الإنفاق اليومي ($)</label>
                    <input type="number" step="0.01" name="daily_spend_limit" value="0" class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Access Token</label>
                    <input type="password" name="access_token" placeholder="Token..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Refresh Token (اختياري)</label>
                    <input type="password" name="refresh_token" placeholder="Refresh Token..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">الرصيد المودع ($)</label>
                    <input type="number" step="0.01" name="total_deposited" value="0" class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">ملاحظات</label>
                    <input type="text" name="notes" placeholder="Developer token, etc." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div class="flex items-end gap-3">
                    <label class="flex items-center gap-2 text-sm text-white cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" checked class="rounded"> نشط
                    </label>
                    <button type="submit" class="bg-gold-500 text-black px-6 py-2 rounded-lg font-bold hover:bg-gold-400 transition">حفظ</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Setup Guide -->
    <div class="glass p-6 rounded-2xl mb-8">
        <details>
            <summary class="text-lg font-bold text-white cursor-pointer hover:text-gold-400 transition flex items-center gap-2">
                <span>&#128218;</span> دليل إعداد حسابات المنصات الإعلانية
            </summary>
            <div class="mt-4 space-y-4 text-sm">
                <!-- Facebook/Meta -->
                <div class="p-4 bg-black/20 rounded-xl border-r-4 border-blue-500">
                    <h4 class="text-blue-400 font-bold mb-2">Facebook / Instagram (Meta)</h4>
                    <ol class="text-slate-300 space-y-1 list-decimal list-inside text-xs">
                        <li>اذهب إلى <a href="https://business.facebook.com/settings" target="_blank" class="text-gold-400 hover:underline">Meta Business Settings</a></li>
                        <li>أنشئ حساب إعلاني (Ad Account) من قسم "Accounts" → "Ad Accounts"</li>
                        <li>انسخ الـ <strong class="text-white">Ad Account ID</strong> (يبدأ بـ act_)</li>
                        <li>أنشئ تطبيق من <a href="https://developers.facebook.com" target="_blank" class="text-gold-400 hover:underline">Meta for Developers</a></li>
                        <li>احصل على <strong class="text-white">Access Token</strong> من Graph API Explorer بصلاحيات: ads_management, ads_read</li>
                        <li>للتوكن الدائم: استخدم System User من Business Settings</li>
                    </ol>
                </div>
                <!-- TikTok -->
                <div class="p-4 bg-black/20 rounded-xl border-r-4 border-pink-500">
                    <h4 class="text-pink-400 font-bold mb-2">TikTok Ads</h4>
                    <ol class="text-slate-300 space-y-1 list-decimal list-inside text-xs">
                        <li>سجّل في <a href="https://ads.tiktok.com" target="_blank" class="text-gold-400 hover:underline">TikTok Ads Manager</a></li>
                        <li>انسخ الـ <strong class="text-white">Advertiser ID</strong> من الإعدادات</li>
                        <li>أنشئ تطبيق من <a href="https://business-api.tiktok.com" target="_blank" class="text-gold-400 hover:underline">TikTok Marketing API</a></li>
                        <li>احصل على <strong class="text-white">Access Token</strong> بعد الموافقة على التطبيق</li>
                        <li>الحد الأدنى للميزانية اليومية: <strong class="text-white">$20</strong></li>
                    </ol>
                </div>
                <!-- YouTube/Google -->
                <div class="p-4 bg-black/20 rounded-xl border-r-4 border-red-500">
                    <h4 class="text-red-400 font-bold mb-2">YouTube (Google Ads)</h4>
                    <ol class="text-slate-300 space-y-1 list-decimal list-inside text-xs">
                        <li>أنشئ حساب <a href="https://ads.google.com" target="_blank" class="text-gold-400 hover:underline">Google Ads</a></li>
                        <li>انسخ الـ <strong class="text-white">Customer ID</strong> (بدون شرطات)</li>
                        <li>فعّل Google Ads API من <a href="https://console.cloud.google.com" target="_blank" class="text-gold-400 hover:underline">Google Cloud Console</a></li>
                        <li>أنشئ OAuth 2.0 credentials واحصل على <strong class="text-white">Refresh Token</strong></li>
                        <li>احصل على <strong class="text-white">Developer Token</strong> من Google Ads API Center</li>
                        <li>ضع Developer Token في حقل الملاحظات</li>
                    </ol>
                </div>
                <!-- Snapchat -->
                <div class="p-4 bg-black/20 rounded-xl border-r-4 border-yellow-500">
                    <h4 class="text-yellow-400 font-bold mb-2">Snapchat Ads</h4>
                    <ol class="text-slate-300 space-y-1 list-decimal list-inside text-xs">
                        <li>سجّل في <a href="https://ads.snapchat.com" target="_blank" class="text-gold-400 hover:underline">Snapchat Ads Manager</a></li>
                        <li>انسخ الـ <strong class="text-white">Ad Account ID</strong> من الإعدادات</li>
                        <li>أنشئ تطبيق من <a href="https://business.snapchat.com/portal" target="_blank" class="text-gold-400 hover:underline">Snap Business Portal</a></li>
                        <li>احصل على <strong class="text-white">Access Token</strong> و <strong class="text-white">Refresh Token</strong></li>
                    </ol>
                </div>
                <!-- Twitter/X -->
                <div class="p-4 bg-black/20 rounded-xl border-r-4 border-slate-500">
                    <h4 class="text-slate-300 font-bold mb-2">X / Twitter Ads</h4>
                    <ol class="text-slate-300 space-y-1 list-decimal list-inside text-xs">
                        <li>سجّل في <a href="https://ads.twitter.com" target="_blank" class="text-gold-400 hover:underline">X Ads Manager</a></li>
                        <li>انسخ الـ <strong class="text-white">Account ID</strong></li>
                        <li>أنشئ تطبيق من <a href="https://developer.twitter.com" target="_blank" class="text-gold-400 hover:underline">X Developer Portal</a></li>
                        <li>احصل على <strong class="text-white">Bearer Token</strong> أو OAuth tokens</li>
                        <li>ضع Consumer Key:Consumer Secret في حقل Refresh Token</li>
                    </ol>
                </div>
            </div>
        </details>
    </div>

    <!-- Accounts List -->
    <div class="space-y-3">
        {% for acc in accounts %}
        <div class="glass p-5 rounded-2xl flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl font-bold
                    {% if acc.platform == 'facebook' %}bg-blue-500/20 text-blue-400
                    {% elif acc.platform == 'tiktok' %}bg-pink-500/20 text-pink-400
                    {% elif acc.platform == 'youtube' %}bg-red-500/20 text-red-400
                    {% elif acc.platform == 'snapchat' %}bg-yellow-500/20 text-yellow-400
                    {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                    {% if acc.platform == 'facebook' %}f{% elif acc.platform == 'tiktok' %}T{% elif acc.platform == 'youtube' %}Y{% elif acc.platform == 'snapchat' %}S{% else %}X{% endif %}
                </div>
                <div>
                    <div class="text-white font-bold capitalize">{{ acc.platform }}</div>
                    <div class="text-xs text-slate-400">ID: {{ acc.account_id or 'N/A' }} | Deposited: ${{ "%.2f"|format(acc.total_deposited) }} | Daily Limit: ${{ "%.2f"|format(acc.daily_spend_limit) }}</div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="text-xs px-2 py-1 rounded-full {% if acc.is_active %}bg-emerald-500/20 text-emerald-400{% else %}bg-red-500/20 text-red-400{% endif %}">
                    {{ 'نشط' if acc.is_active else 'معطل' }}
                </span>
                <form method="POST" action="{{ url_for('admin.toggle_ad_account', account_id=acc.id) }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="text-xs text-slate-400 hover:text-gold-400 px-2 py-1">{{ 'تعطيل' if acc.is_active else 'تفعيل' }}</button>
                </form>
                <form method="POST" action="{{ url_for('admin.delete_ad_account', account_id=acc.id) }}" onsubmit="return confirm('حذف هذا الحساب؟')" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="text-xs text-red-400/60 hover:text-red-400 px-2 py-1">&#10005;</button>
                </form>
            </div>
        </div>
        {% else %}
        <div class="text-center py-8 text-slate-400">لا توجد حسابات إعلانية. أضف حساباً أعلاه.</div>
        {% endfor %}
    </div>
</div>
{% endblock %}