{% extends "base.html" %}
{% block title %}إطلاق حملة إعلانية{% endblock %}
{% block content %}
<div class="max-w-4xl 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.detail', campaign_id=campaign.id) }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; العودة</a>
    </div>

    <!-- Campaign Info -->
    <div class="glass p-5 rounded-2xl mb-6 flex items-center gap-4">
        {% if campaign.video_url %}
        <video src="{{ campaign.video_url }}" class="w-32 h-20 object-cover rounded-lg" muted></video>
        {% endif %}
        <div>
            <div class="text-white font-bold">{{ campaign.name }}</div>
            <div class="text-xs text-slate-400">{{ campaign.video_provider or 'N/A' }} | {{ campaign.created_at.strftime('%Y-%m-%d') }}</div>
        </div>
    </div>

    <!-- Budget Info -->
    <div class="glass p-5 rounded-2xl mb-6">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs text-slate-400">رصيدك الإعلاني</div>
                <div class="text-2xl font-bold text-gold-400">${{ "%.2f"|format(user_budget.remaining) }}</div>
            </div>
            <div class="text-right">
                <div class="text-xs text-slate-400">المخصص / المنفق</div>
                <div class="text-sm text-white">${{ "%.2f"|format(user_budget.allocated_budget) }} / ${{ "%.2f"|format(user_budget.total_spent) }}</div>
            </div>
        </div>
        <div class="w-full bg-black/30 rounded-full h-2 mt-3">
            {% set pct = (user_budget.total_spent / user_budget.allocated_budget * 100) if user_budget.allocated_budget > 0 else 0 %}
            <div class="bg-gold-500 h-2 rounded-full transition-all" style="width: {{ pct|int }}%"></div>
        </div>
    </div>

    <!-- Launch Form -->
    <form method="POST" id="launchForm" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <!-- Platforms -->
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">اختر المنصات</h2>
            {% if available_platforms %}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                {% for p in available_platforms %}
                <label class="flex items-center gap-3 p-3 bg-black/20 rounded-xl cursor-pointer hover:bg-white/5 transition border border-white/5 platform-label">
                    <input type="checkbox" name="platforms" value="{{ p }}" class="rounded text-gold-500 platform-check"
                        onchange="updateSuggestions()">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold
                        {% if p == 'facebook' %}bg-blue-500/20 text-blue-400
                        {% elif p == 'tiktok' %}bg-pink-500/20 text-pink-400
                        {% elif p == 'youtube' %}bg-red-500/20 text-red-400
                        {% elif p == 'snapchat' %}bg-yellow-500/20 text-yellow-400
                        {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                        {% if p == 'facebook' %}f{% elif p == 'tiktok' %}T{% elif p == 'youtube' %}Y{% elif p == 'snapchat' %}S{% else %}X{% endif %}
                    </div>
                    <span class="text-white text-sm capitalize">{{ p }}</span>
                </label>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-slate-400 text-sm">لا توجد منصات إعلانية متاحة حالياً. تواصل مع مدير النظام.</p>
            {% endif %}
        </div>

        <!-- Budget & Duration -->
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">الميزانية والمدة</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-2">الميزانية الإجمالية ($)</label>
                    <input type="range" id="budgetSlider" name="budget_amount" min="1" max="{{ user_budget.remaining }}" value="{{ (user_budget.remaining / 2)|int or 5 }}" step="0.5"
                        class="w-full accent-gold-500" oninput="updateBudgetDisplay()">
                    <div class="flex justify-between mt-1">
                        <span class="text-xs text-slate-500">$1</span>
                        <span id="budgetDisplay" class="text-lg font-bold text-gold-400">${{ ((user_budget.remaining / 2)|int or 5) }}</span>
                        <span class="text-xs text-slate-500">${{ "%.0f"|format(user_budget.remaining) }}</span>
                    </div>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-2">مدة الحملة (أيام)</label>
                    <select name="duration_days" id="durationSelect" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white" onchange="updateBudgetDisplay()">
                        <option value="3">3 أيام</option>
                        <option value="7" selected>7 أيام</option>
                        <option value="14">14 يوم</option>
                        <option value="21">21 يوم</option>
                        <option value="30">30 يوم</option>
                    </select>
                    <div class="text-xs text-slate-500 mt-1">الميزانية اليومية: <span id="dailyBudget" class="text-gold-400">--</span></div>
                </div>
            </div>
        </div>

        <!-- AI Suggestions Preview -->
        <div class="glass p-6 rounded-2xl" id="aiSuggestionsBox" style="display:none;">
            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <span class="text-blue-400">&#9733;</span> اقتراحات الذكاء الاصطناعي
            </h2>
            <div id="aiSuggestionsContent" class="space-y-3 text-sm">
                <div class="text-center py-4">
                    <div class="inline-flex items-center gap-2 text-blue-400 text-sm">
                        <svg class="w-4 h-4 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>
            <!-- Warnings -->
            <div id="aiWarnings" class="mt-3 space-y-1"></div>
        </div>

        {% if available_platforms %}
        <button type="submit" id="submitBtn" class="w-full bg-gold-500 text-black py-4 rounded-xl font-bold hover:bg-gold-400 transition shadow-lg shadow-gold-500/20 text-lg">
            تقديم الحملة للمراجعة
        </button>
        <p class="text-center text-xs text-slate-500">سيتم مراجعة الحملة من مدير النظام قبل إطلاقها</p>
        {% endif %}
    </form>
</div>

<script>
function updateBudgetDisplay() {
    const budget = document.getElementById('budgetSlider').value;
    const duration = document.getElementById('durationSelect').value;
    document.getElementById('budgetDisplay').textContent = '$' + parseFloat(budget).toFixed(2);
    document.getElementById('dailyBudget').textContent = '$' + (budget / duration).toFixed(2) + '/يوم';
}

let suggestTimeout;
function updateSuggestions() {
    clearTimeout(suggestTimeout);
    const checked = document.querySelectorAll('.platform-check:checked');
    if (checked.length === 0) {
        document.getElementById('aiSuggestionsBox').style.display = 'none';
        return;
    }
    document.getElementById('aiSuggestionsBox').style.display = 'block';
    document.getElementById('aiSuggestionsContent').innerHTML = '<div class="text-center py-4"><div class="inline-flex items-center gap-2 text-blue-400 text-sm"><svg class="w-4 h-4 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>';

    suggestTimeout = setTimeout(() => {
        const platforms = Array.from(checked).map(c => c.value);
        const budget = parseFloat(document.getElementById('budgetSlider').value);
        fetch("{{ url_for('campaigns.api_ad_targeting', campaign_id=campaign.id) }}", {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({platforms, budget})
        })
        .then(r => r.json())
        .then(data => {
            let html = '';
            html += '<div class="grid grid-cols-2 gap-3">';
            html += '<div class="bg-black/20 p-3 rounded-lg"><div class="text-xs text-slate-400">العمر</div><div class="text-white">' + (data.age_min||18) + ' - ' + (data.age_max||45) + '</div></div>';
            html += '<div class="bg-black/20 p-3 rounded-lg"><div class="text-xs text-slate-400">الجنس</div><div class="text-white">' + (data.gender||'all') + '</div></div>';
            html += '</div>';
            if (data.locations && data.locations.length) {
                html += '<div><span class="text-xs text-slate-400">المناطق:</span> ' + data.locations.map(l => '<span class="text-xs px-2 py-0.5 rounded bg-blue-500/20 text-blue-400 mx-0.5">' + l + '</span>').join('') + '</div>';
            }
            if (data.interests && data.interests.length) {
                html += '<div><span class="text-xs text-slate-400">الاهتمامات:</span> ' + data.interests.slice(0,6).map(i => '<span class="text-xs px-2 py-0.5 rounded bg-purple-500/20 text-purple-400 mx-0.5">' + i + '</span>').join('') + '</div>';
            }
            if (data.budget_split) {
                html += '<div class="bg-black/20 p-3 rounded-lg"><div class="text-xs text-slate-400 mb-1">توزيع الميزانية</div>';
                for (const [k,v] of Object.entries(data.budget_split)) {
                    html += '<div class="flex justify-between text-xs"><span class="text-white">' + k + '</span><span class="text-gold-400">' + v + '%</span></div>';
                }
                html += '</div>';
            }
            if (data.ad_caption_ar) {
                html += '<div class="bg-black/20 p-3 rounded-lg"><div class="text-xs text-slate-400">نص الإعلان المقترح</div><div class="text-white text-xs mt-1">' + data.ad_caption_ar + '</div></div>';
            }
            if (data.reasoning) {
                html += '<div class="text-xs text-slate-500 italic mt-2">' + data.reasoning + '</div>';
            }
            document.getElementById('aiSuggestionsContent').innerHTML = html;

            // Warnings
            let warnHtml = '';
            if (data.warnings && data.warnings.length) {
                data.warnings.forEach(w => {
                    warnHtml += '<div class="text-xs text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-lg px-3 py-2">&#9888; ' + w + '</div>';
                });
            }
            document.getElementById('aiWarnings').innerHTML = warnHtml;
        })
        .catch(() => {
            document.getElementById('aiSuggestionsContent').innerHTML = '<p class="text-slate-400 text-sm">تعذر الحصول على اقتراحات AI. سيتم استخدام الإعدادات الافتراضية.</p>';
        });
    }, 800);
}

updateBudgetDisplay();
</script>
{% endblock %}