{% extends "base.html" %}
{% block title %}{{ campaign.name }} - حملة{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-10 space-y-8">

    <!-- Header -->
    <div class="glass rounded-3xl p-8 border border-white/5 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-l from-gold-500/5 via-transparent to-transparent pointer-events-none"></div>
        <div class="relative flex items-start justify-between">
            <div>
                <a href="{{ url_for('campaigns.dashboard') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-gold-400 transition mb-4">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                    العودة للحملات
                </a>
                <h1 class="text-3xl font-serif font-bold text-white leading-tight">{{ campaign.name }}</h1>
                {% if campaign.video_duration %}
                <p class="text-sm text-slate-400 mt-2">مدة الفيديو: {{ campaign.video_duration }} ثانية</p>
                {% endif %}
            </div>
            <span class="text-sm px-5 py-2.5 rounded-2xl font-semibold
                {% if campaign.status == 'published' %}bg-emerald-500/15 text-emerald-400 border border-emerald-500/20
                {% elif campaign.status == 'video_processing' %}bg-yellow-500/15 text-yellow-400 border border-yellow-500/20
                {% else %}bg-slate-500/15 text-slate-400 border border-slate-500/20{% endif %}">
                {{ campaign.status }}
            </span>
        </div>

        <!-- Progress Steps Indicator -->
        <div class="mt-8 flex items-center gap-3">
            {% set step1_done = campaign.script %}
            {% set step2_done = campaign.video_url %}
            {% set step3_done = campaign.status == 'published' %}
            {% for step_label, step_done in [('السيناريو', step1_done), ('الفيديو', step2_done), ('النشر', step3_done)] %}
            <div class="flex items-center gap-2 {% if not loop.first %}flex-1{% endif %}">
                {% if not loop.first %}
                <div class="flex-1 h-0.5 rounded {% if step_done %}bg-emerald-500/50{% else %}bg-white/10{% endif %}"></div>
                {% endif %}
                <div class="flex items-center gap-2 shrink-0">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                        {% if step_done %}bg-emerald-500/20 text-emerald-400 border border-emerald-500/30
                        {% else %}bg-white/5 text-slate-500 border border-white/10{% endif %}">
                        {% if step_done %}&#10003;{% else %}{{ loop.index }}{% endif %}
                    </div>
                    <span class="text-sm {% if step_done %}text-emerald-400{% else %}text-slate-500{% endif %}">{{ step_label }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- ═══════════════════════════════════════════ -->
    <!-- STEP 1: Script -->
    <!-- ═══════════════════════════════════════════ -->
    <div class="glass rounded-3xl p-8 border {% if campaign.script %}border-emerald-500/20{% else %}border-white/5{% endif %}">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center border border-purple-500/20">
                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">سيناريو الفيديو</h2>
                <p class="text-sm text-slate-500">الخطوة الأولى: إنشاء وتحسين سيناريو الفيديو</p>
            </div>
            {% if campaign.script %}
            <span class="mr-auto text-sm text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">&#10003; مكتمل</span>
            {% endif %}
        </div>

        {% if campaign.script %}
        <!-- Script Display -->
        <div id="scriptDisplay">
            <div class="bg-black/30 rounded-2xl p-6 max-h-64 overflow-y-auto mb-5 border border-white/5">
                <pre class="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed font-sans">{{ campaign.script[:800] }}{% if campaign.script|length > 800 %}...{% endif %}</pre>
            </div>

            {% if not campaign.video_url %}
            <div class="flex gap-3">
                <button onclick="showScriptEditor()" class="flex-1 bg-white/5 hover:bg-white/10 text-slate-300 px-5 py-3 rounded-xl text-sm font-medium transition border border-white/5 hover:border-white/10">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        تعديل يدوي
                    </span>
                </button>
                <button onclick="improveScript()" id="improveBtn" class="flex-1 bg-purple-500/15 hover:bg-purple-500/25 text-purple-400 px-5 py-3 rounded-xl text-sm font-medium transition border border-purple-500/20">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        تحسين بالذكاء الاصطناعي
                    </span>
                </button>
            </div>
            {% endif %}
        </div>

        <!-- Script Editor (hidden by default) -->
        <div id="scriptEditor" class="hidden">
            <textarea id="scriptEditArea" rows="10" class="w-full bg-black/30 border border-white/10 rounded-2xl px-5 py-4 text-sm text-white font-mono mb-4 focus:outline-none focus:border-gold-500/50 focus:ring-1 focus:ring-gold-500/20 leading-relaxed">{{ campaign.script }}</textarea>

            <!-- User Ideas / Suggestions -->
            <div class="bg-gradient-to-r from-purple-500/5 to-blue-500/5 rounded-2xl p-5 mb-4 border border-purple-500/10">
                <label class="flex items-center gap-2 text-sm font-medium text-purple-300 mb-3">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                    أفكارك واقتراحاتك للتحسين
                </label>
                <textarea id="scriptSuggestion" rows="3" placeholder="اكتب أفكارك هنا... مثال: اجعل النبرة أكثر حماساً، أضف عرض خاص في النهاية، ركز على الفئة العمرية الشابة..."
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-purple-500/50 placeholder-slate-600 leading-relaxed resize-none">{{ campaign.user_script_notes or '' }}</textarea>
                <p class="text-xs text-slate-600 mt-2">سيستخدم الذكاء الاصطناعي أفكارك لتحسين السيناريو</p>
            </div>

            <div class="flex gap-3">
                <button onclick="saveScriptEdit()" id="saveScriptBtn" class="flex-1 bg-gold-500 hover:bg-gold-400 text-black px-5 py-3 rounded-xl text-sm font-bold transition shadow-lg shadow-gold-500/10">
                    حفظ التعديل
                </button>
                <button onclick="aiImproveScript()" id="aiImproveBtn" class="flex-1 bg-purple-500/15 hover:bg-purple-500/25 text-purple-400 px-5 py-3 rounded-xl text-sm font-medium transition border border-purple-500/20">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        تحسين AI بناءً على أفكاري
                    </span>
                </button>
                <button onclick="cancelScriptEdit()" class="bg-white/5 hover:bg-white/10 text-slate-400 px-5 py-3 rounded-xl text-sm transition border border-white/5">إلغاء</button>
            </div>
            <div id="scriptEditStatus" class="text-sm text-slate-400 mt-3"></div>
        </div>

        {% else %}
        <!-- Generate Script -->
        <div class="text-center py-6">
            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center border border-purple-500/20">
                <svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <p class="text-slate-400 mb-5 text-sm">سيقوم الذكاء الاصطناعي بتوليد سيناريو احترافي بناءً على دراسة الجدوى</p>

            <!-- User Ideas BEFORE script generation -->
            <div class="bg-gradient-to-r from-purple-500/5 to-blue-500/5 rounded-2xl p-5 mb-5 border border-purple-500/10 text-right max-w-lg mx-auto">
                <label class="flex items-center gap-2 text-sm font-medium text-purple-300 mb-3">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                    أضف أفكارك قبل التوليد (اختياري)
                </label>
                <textarea id="preGenNotes" rows="3" placeholder="مثال: أريد فيديو يركز على العروض الترويجية، بنبرة شبابية وحماسية..."
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-purple-500/50 placeholder-slate-600 leading-relaxed resize-none">{{ campaign.user_script_notes or '' }}</textarea>
            </div>

            <button onclick="generateScript()" id="scriptBtn" class="bg-gradient-to-r from-gold-500 to-amber-500 hover:from-gold-400 hover:to-amber-400 text-black px-8 py-3.5 rounded-xl text-base font-bold transition shadow-lg shadow-gold-500/20 inline-flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                توليد السيناريو
            </button>
            <div id="scriptStatus" class="text-sm text-slate-400 mt-3"></div>
        </div>
        {% endif %}
    </div>

    <!-- ═══════════════════════════════════════════ -->
    <!-- STEP 2: Video Generation -->
    <!-- ═══════════════════════════════════════════ -->
    <div class="glass rounded-3xl p-8 border {% if campaign.video_url %}border-emerald-500/20{% elif campaign.status == 'video_processing' %}border-yellow-500/20{% else %}border-white/5{% endif %}">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center border border-blue-500/20">
                <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">توليد الفيديو</h2>
                <p class="text-sm text-slate-500">{{ campaign.video_provider or 'Sora' }} — الخطوة الثانية</p>
            </div>
            {% if campaign.video_url %}
            <span class="mr-auto text-sm text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">&#10003; مكتمل</span>
            {% endif %}
        </div>

        {% if campaign.video_url %}
        <div class="flex items-center gap-5 bg-black/30 rounded-2xl p-6 border border-white/5">
            <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center shrink-0">
                <svg class="w-10 h-10 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div class="flex-1">
                <p class="text-white font-semibold text-lg">الفيديو جاهز</p>
                {% if campaign.video_duration %}<p class="text-sm text-slate-400">المدة: {{ campaign.video_duration }} ثانية</p>{% endif %}
            </div>
            <a href="{{ url_for('campaigns.serve_video', campaign_id=campaign.id) }}" target="_blank"
                class="bg-blue-500/15 hover:bg-blue-500/25 text-blue-400 px-6 py-3 rounded-xl text-sm font-medium transition border border-blue-500/20 inline-flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg>
                مشاهدة الفيديو
            </a>
        </div>

        {% elif campaign.status == 'video_processing' %}
        <div id="videoProcessing" class="bg-black/30 rounded-2xl p-6 border border-yellow-500/10">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-4 h-4 bg-yellow-400 rounded-full animate-pulse"></div>
                <span class="text-base text-yellow-400 font-medium">جاري توليد الفيديو...</span>
            </div>
            <div id="videoProgress" class="w-full bg-white/10 rounded-full h-3 mb-3">
                <div id="videoProgressBar" class="bg-gradient-to-r from-gold-500 to-amber-500 h-3 rounded-full transition-all duration-500" style="width: 0%"></div>
            </div>
            <div id="videoStatus" class="text-sm text-slate-400">يتم فحص الحالة تلقائياً...</div>
        </div>
        <div id="videoError" class="hidden bg-black/30 rounded-2xl p-6 border border-red-500/10">
            <div class="text-sm text-red-400 mb-4" id="videoErrorMsg"></div>
            <button onclick="retryVideo()" id="retryBtn" class="bg-gold-500 hover:bg-gold-400 text-black px-6 py-3 rounded-xl text-sm font-bold transition">إعادة المحاولة</button>
        </div>

        {% elif campaign.script %}
        <div class="text-center py-4">
            {% if allowed_durations %}
            <p class="text-sm text-slate-400 mb-5">اختر مدة الفيديو المطلوبة:</p>
            <div class="flex flex-wrap justify-center gap-3 mb-6">
                {% for dur in allowed_durations %}
                <label class="relative cursor-pointer group">
                    <input type="radio" name="gen_duration" value="{{ dur }}" {% if campaign.video_duration == dur or (not campaign.video_duration and loop.last) %}checked{% endif %} class="peer sr-only gen-duration-radio">
                    <div class="w-20 h-20 rounded-2xl border-2 border-white/10 bg-black/30 flex flex-col items-center justify-center
                        peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:shadow-lg peer-checked:shadow-gold-500/10
                        group-hover:bg-white/5 transition-all">
                        <span class="text-2xl font-bold peer-checked:text-gold-400 text-white">{{ dur }}</span>
                        <span class="text-xs text-slate-500">ثانية</span>
                    </div>
                </label>
                {% endfor %}
            </div>
            {% endif %}
            <button onclick="generateVideo()" id="videoBtn" class="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-400 hover:to-cyan-400 text-white px-8 py-3.5 rounded-xl text-base font-bold transition shadow-lg shadow-blue-500/20 inline-flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                توليد الفيديو
            </button>
            <div id="videoStatus" class="text-sm text-slate-400 mt-3"></div>
        </div>
        {% else %}
        <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/5 flex items-center justify-center border border-white/5">
                <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            </div>
            <p class="text-sm text-slate-500">يتطلب إكمال السيناريو أولاً</p>
        </div>
        {% endif %}
    </div>

    <!-- ═══════════════════════════════════════════ -->
    <!-- STEP 3: Publish -->
    <!-- ═══════════════════════════════════════════ -->
    <div class="glass rounded-3xl p-8 border border-white/5">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-green-500/20 flex items-center justify-center border border-emerald-500/20">
                <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">النشر على المنصات</h2>
                <p class="text-sm text-slate-500">الخطوة الثالثة: اختر طريقة ومنصات النشر</p>
            </div>
        </div>

        {% if campaign.video_url %}

        <!-- Publish Mode Tabs -->
        <div class="flex rounded-2xl bg-black/30 p-1.5 mb-6 gap-1.5 border border-white/5">
            <button onclick="switchPublishTab('my')" id="tab-my"
                class="publish-tab flex-1 py-3 px-4 rounded-xl text-sm font-bold transition text-center
                bg-gold-500/15 text-gold-400 border border-gold-500/20">
                <span class="flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    منصاتي
                </span>
            </button>
            <button onclick="switchPublishTab('sponsor')" id="tab-sponsor"
                class="publish-tab flex-1 py-3 px-4 rounded-xl text-sm font-bold transition text-center
                text-slate-400 hover:text-white hover:bg-white/5">
                <span class="flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    الجهة الراعية
                </span>
            </button>
            <button onclick="switchPublishTab('paid')" id="tab-paid"
                class="publish-tab flex-1 py-3 px-4 rounded-xl text-sm font-bold transition text-center
                text-slate-400 hover:text-white hover:bg-white/5">
                <span class="flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    حملة مدفوعة
                </span>
            </button>
        </div>

        {% set platform_icons = {
            'youtube': {'color': 'red', 'label': 'YouTube', 'icon': 'Y'},
            'tiktok': {'color': 'fuchsia', 'label': 'TikTok', 'icon': 'T'},
            'facebook': {'color': 'blue', 'label': 'Facebook', 'icon': 'f'},
            'instagram': {'color': 'pink', 'label': 'Instagram', 'icon': 'I'},
            'twitter': {'color': 'slate', 'label': 'X / Twitter', 'icon': 'X'},
            'snapchat': {'color': 'yellow', 'label': 'Snapchat', 'icon': 'S'}
        } %}

        <!-- Tab 1: My Accounts -->
        <div id="panel-my" class="publish-panel">
            {% if user_platforms %}
            <p class="text-sm text-slate-400 mb-4">اختر المنصات التي تريد النشر عليها (يمكنك اختيار أكثر من منصة):</p>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-5">
                {% for platform, info in platform_icons.items() %}
                {% set connected = platform in user_platforms %}
                <label class="relative cursor-{% if connected %}pointer{% else %}not-allowed{% endif %} group">
                    <input type="checkbox" name="my_platforms" value="{{ platform }}"
                        class="peer sr-only my-platform-cb" {% if not connected %}disabled{% endif %}>
                    <div class="p-4 rounded-2xl border-2 transition-all
                        {% if connected %}
                        border-white/10 bg-black/20 hover:bg-white/5
                        peer-checked:border-{{ info.color }}-500 peer-checked:bg-{{ info.color }}-500/10 peer-checked:shadow-lg peer-checked:shadow-{{ info.color }}-500/10
                        {% else %}
                        border-white/5 bg-black/10 opacity-40
                        {% endif %}">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-{{ info.color }}-500/20 flex items-center justify-center text-{{ info.color }}-400 font-bold text-lg shrink-0">
                                {{ info.icon }}
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-white">{{ info.label }}</div>
                                {% if connected %}
                                <div class="text-xs text-emerald-400">&#9679; متصل</div>
                                {% else %}
                                <div class="text-xs text-slate-600">غير متصل</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </label>
                {% endfor %}
            </div>
            <button onclick="publishCampaign('my_accounts')" id="publishMyBtn"
                class="w-full bg-gradient-to-r from-gold-500 to-amber-500 hover:from-gold-400 hover:to-amber-400 text-black px-6 py-3.5 rounded-xl text-base font-bold transition shadow-lg shadow-gold-500/20 inline-flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                نشر على حساباتي
            </button>
            {% else %}
            <div class="text-center py-8">
                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/5 flex items-center justify-center border border-white/5">
                    <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                </div>
                <p class="text-sm text-slate-400 mb-3">لم تقم بربط أي حساب بعد</p>
                <a href="{{ url_for('campaigns.dashboard') }}" class="text-sm text-gold-400 hover:text-gold-300 font-medium">ربط حساباتي &#8599;</a>
            </div>
            {% endif %}
            <div id="publishMyStatus" class="text-sm mt-3"></div>
        </div>

        <!-- Tab 2: Sponsor -->
        <div id="panel-sponsor" class="publish-panel hidden">
            {% if sponsor_platforms %}
            <p class="text-sm text-slate-400 mb-4">النشر مجاناً على حسابات الجهة الراعية (اختر المنصات):</p>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-5">
                {% for platform in ['youtube', 'tiktok', 'facebook', 'instagram', 'twitter', 'snapchat'] %}
                {% if platform in sponsor_platforms %}
                {% set info = platform_icons[platform] %}
                <label class="relative cursor-pointer group">
                    <input type="checkbox" name="sponsor_platforms" value="{{ platform }}" class="peer sr-only sponsor-platform-cb">
                    <div class="p-4 rounded-2xl border-2 border-white/10 bg-black/20 hover:bg-white/5 transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-500/10 peer-checked:shadow-lg peer-checked:shadow-emerald-500/10">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center text-emerald-400 font-bold text-lg shrink-0">
                                {{ info.icon }}
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-white">{{ info.label }}</div>
                                <div class="text-xs text-emerald-400">&#10003; متاح مجاناً</div>
                            </div>
                        </div>
                    </div>
                </label>
                {% endif %}
                {% endfor %}
            </div>
            <button onclick="publishCampaign('sponsor')" id="publishSponsorBtn"
                class="w-full bg-gradient-to-r from-emerald-500 to-green-500 hover:from-emerald-400 hover:to-green-400 text-black px-6 py-3.5 rounded-xl text-base font-bold transition shadow-lg shadow-emerald-500/20 inline-flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                نشر عبر الجهة الراعية (مجاني)
            </button>
            {% else %}
            <div class="text-center py-8">
                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-emerald-500/5 flex items-center justify-center border border-emerald-500/10">
                    <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <p class="text-sm text-slate-400 mb-1">لا توجد حسابات راعية متاحة حالياً</p>
                <p class="text-xs text-slate-600">تواصل مع المدير لتفعيل هذه الخدمة</p>
            </div>
            {% endif %}
            <div id="publishSponsorStatus" class="text-sm mt-3"></div>
        </div>

        <!-- Tab 3: Paid Ad -->
        <div id="panel-paid" class="publish-panel hidden">
            <div class="text-center py-4">
                <p class="text-sm text-slate-400 mb-5">إعلان مدفوع على منصات التواصل الاجتماعي مع استهداف دقيق</p>
                <a href="{{ url_for('campaigns.launch_ad', campaign_id=campaign.id) }}"
                    class="inline-flex items-center gap-2 bg-gradient-to-r from-gold-500 to-amber-500 hover:from-gold-400 hover:to-amber-400 text-black px-8 py-3.5 rounded-xl text-base font-bold transition shadow-lg shadow-gold-500/20">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    إطلاق حملة إعلانية مدفوعة
                </a>
                <p class="text-xs text-slate-500 mt-3">Facebook, TikTok, YouTube, Snapchat, X...</p>
                <div class="mt-5 grid grid-cols-3 gap-3 max-w-md mx-auto">
                    <div class="bg-black/20 rounded-xl p-3 border border-white/5 text-center">
                        <svg class="w-5 h-5 text-gold-400 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        <span class="text-[11px] text-slate-400">استهداف دقيق</span>
                    </div>
                    <div class="bg-black/20 rounded-xl p-3 border border-white/5 text-center">
                        <svg class="w-5 h-5 text-gold-400 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        <span class="text-[11px] text-slate-400">تحليلات متقدمة</span>
                    </div>
                    <div class="bg-black/20 rounded-xl p-3 border border-white/5 text-center">
                        <svg class="w-5 h-5 text-gold-400 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span class="text-[11px] text-slate-400">ميزانية مرنة</span>
                    </div>
                </div>
            </div>
        </div>

        {% else %}
        <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/5 flex items-center justify-center border border-white/5">
                <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            </div>
            <p class="text-sm text-slate-500">يتطلب توليد الفيديو أولاً</p>
        </div>
        {% endif %}
    </div>

    <!-- ═══════════════════════════════════════════ -->
    <!-- Posts History -->
    <!-- ═══════════════════════════════════════════ -->
    {% if campaign.posts.count() > 0 %}
    <div class="glass rounded-3xl p-8 border border-white/5">
        <h2 class="text-xl font-bold text-white mb-5 flex items-center gap-2">
            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            المنشورات
        </h2>
        <div class="space-y-3">
            {% for post in campaign.posts %}
            <div class="flex items-center justify-between p-5 bg-black/20 rounded-2xl border border-white/5 hover:border-white/10 transition">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center text-sm font-bold
                        {% if post.platform == 'youtube' %}bg-red-500/20 text-red-400
                        {% elif post.platform == 'tiktok' %}bg-fuchsia-500/20 text-fuchsia-400
                        {% elif post.platform == 'facebook' %}bg-blue-500/20 text-blue-400
                        {% elif post.platform == 'instagram' %}bg-pink-500/20 text-pink-400
                        {% elif post.platform == 'snapchat' %}bg-yellow-500/20 text-yellow-400
                        {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                        {% if post.platform == 'youtube' %}Y{% elif post.platform == 'tiktok' %}T{% elif post.platform == 'facebook' %}f{% elif post.platform == 'instagram' %}I{% elif post.platform == 'snapchat' %}S{% else %}X{% endif %}
                    </div>
                    <div>
                        <span class="text-white font-medium capitalize">{{ post.platform }}</span>
                        <div class="flex items-center gap-2 mt-0.5">
                            <span class="text-xs px-2 py-0.5 rounded-full {% if post.status == 'published' %}bg-emerald-500/15 text-emerald-400{% else %}bg-yellow-500/15 text-yellow-400{% endif %}">{{ post.status }}</span>
                            {% if post.publish_mode == 'sponsor' %}
                            <span class="text-[10px] px-2 py-0.5 rounded-full bg-blue-500/15 text-blue-400">عبر الراعي</span>
                            {% elif post.publish_mode == 'my_accounts' %}
                            <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-500/15 text-slate-400">حسابي</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if post.post_url %}
                <a href="{{ post.post_url }}" target="_blank" class="text-sm text-gold-400 hover:text-gold-300 font-medium inline-flex items-center gap-1">
                    عرض <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<script>
/* ── Script Editing ── */
function showScriptEditor() {
    document.getElementById('scriptDisplay').classList.add('hidden');
    document.getElementById('scriptEditor').classList.remove('hidden');
}
function cancelScriptEdit() {
    document.getElementById('scriptEditor').classList.add('hidden');
    document.getElementById('scriptDisplay').classList.remove('hidden');
}

async function saveScriptEdit() {
    const btn = document.getElementById('saveScriptBtn');
    btn.disabled = true;
    btn.textContent = 'جاري الحفظ...';
    const script = document.getElementById('scriptEditArea').value;
    try {
        const res = await fetch('/campaigns/api/update-script/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({script: script})
        });
        const data = await res.json();
        if (data.status === 'done') location.reload();
        else {
            document.getElementById('scriptEditStatus').innerHTML = '<span class="text-red-400">' + (data.error || 'خطأ') + '</span>';
            btn.disabled = false; btn.textContent = 'حفظ التعديل';
        }
    } catch(e) {
        document.getElementById('scriptEditStatus').innerHTML = '<span class="text-red-400">خطأ في الاتصال</span>';
        btn.disabled = false; btn.textContent = 'حفظ التعديل';
    }
}

async function improveScript() {
    const btn = document.getElementById('improveBtn');
    btn.disabled = true; btn.textContent = 'جاري التحسين...';
    try {
        const res = await fetch('/campaigns/api/improve-script/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({suggestion: ''})
        });
        const data = await res.json();
        if (data.status === 'done') location.reload();
        else { btn.disabled = false; btn.textContent = '✨ تحسين بالذكاء'; }
    } catch(e) { btn.disabled = false; btn.textContent = '✨ تحسين بالذكاء'; }
}

async function aiImproveScript() {
    const btn = document.getElementById('aiImproveBtn');
    btn.disabled = true; btn.textContent = 'جاري التحسين...';
    const suggestion = document.getElementById('scriptSuggestion').value;
    const currentScript = document.getElementById('scriptEditArea').value;
    try {
        const res = await fetch('/campaigns/api/improve-script/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({suggestion: suggestion, current_script: currentScript})
        });
        const data = await res.json();
        if (data.status === 'done') {
            document.getElementById('scriptEditArea').value = data.script;
            document.getElementById('scriptEditStatus').innerHTML = '<span class="text-emerald-400">تم التحسين! راجع السيناريو ثم اضغط حفظ.</span>';
        } else {
            document.getElementById('scriptEditStatus').innerHTML = '<span class="text-red-400">' + (data.error || 'خطأ') + '</span>';
        }
        btn.disabled = false; btn.textContent = '✨ تحسين AI';
    } catch(e) {
        document.getElementById('scriptEditStatus').innerHTML = '<span class="text-red-400">خطأ في الاتصال</span>';
        btn.disabled = false; btn.textContent = '✨ تحسين AI';
    }
}

/* ── Script Generation ── */
async function generateScript() {
    document.getElementById('scriptBtn').disabled = true;
    document.getElementById('scriptStatus').textContent = 'جاري توليد السيناريو...';
    const notesEl = document.getElementById('preGenNotes');
    const userNotes = notesEl ? notesEl.value : '';
    try {
        const res = await fetch('/campaigns/api/generate-script/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({user_notes: userNotes})
        });
        const data = await res.json();
        if (data.status === 'done') location.reload();
        else document.getElementById('scriptStatus').textContent = data.error || 'حدث خطأ';
    } catch(e) {
        document.getElementById('scriptStatus').textContent = 'حدث خطأ في الاتصال';
    }
}

/* ── Video Generation ── */
async function generateVideo() {
    document.getElementById('videoBtn').disabled = true;
    document.getElementById('videoStatus').textContent = 'جاري بدء توليد الفيديو...';
    // Get selected duration
    const durRadio = document.querySelector('.gen-duration-radio:checked');
    const duration = durRadio ? durRadio.value : '';
    try {
        const res = await fetch('/campaigns/api/generate-video/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({duration: duration})
        });
        const data = await res.json();
        if (data.status === 'processing') {
            location.reload();
        } else {
            document.getElementById('videoBtn').disabled = false;
            document.getElementById('videoStatus').innerHTML = '<span class="text-red-400">خطأ: ' + (data.error || 'فشل بدء التوليد') + '</span>';
        }
    } catch(e) {
        document.getElementById('videoBtn').disabled = false;
        document.getElementById('videoStatus').innerHTML = '<span class="text-red-400">حدث خطأ في الاتصال</span>';
    }
}

let pollInterval;
let pollCount = 0;
const MAX_POLLS = 20;

function showVideoError(msg) {
    clearInterval(pollInterval);
    const processing = document.getElementById('videoProcessing');
    const errorDiv = document.getElementById('videoError');
    const errorMsg = document.getElementById('videoErrorMsg');
    if (processing) processing.classList.add('hidden');
    if (errorDiv) errorDiv.classList.remove('hidden');
    if (errorMsg) errorMsg.textContent = msg;
}

async function checkVideoStatus() {
    pollCount++;
    if (pollCount > MAX_POLLS) {
        showVideoError('انتهت مهلة الانتظار. قد يكون هناك مشكلة في خدمة توليد الفيديو. يمكنك إعادة المحاولة.');
        return;
    }
    try {
        const res = await fetch('/campaigns/api/video-status/{{ campaign.id }}');
        const data = await res.json();
        const statusEl = document.getElementById('videoStatus');
        const progressBar = document.getElementById('videoProgressBar');

        if (data.status === 'completed') {
            if (progressBar) progressBar.style.width = '100%';
            if (statusEl) statusEl.textContent = 'اكتمل التوليد! جاري التحديث...';
            clearInterval(pollInterval);
            setTimeout(() => location.reload(), 1000);
        } else if (data.status === 'processing') {
            const progress = data.progress || Math.min(pollCount * 5, 90);
            if (progressBar) progressBar.style.width = progress + '%';
            if (statusEl) statusEl.textContent = 'جاري التوليد... ' + progress + '%';
        } else if (data.status === 'error') {
            showVideoError(data.error || 'فشل توليد الفيديو');
        }
    } catch (e) {
        console.error('Status check failed:', e);
        showVideoError('فشل الاتصال بالخادم');
    }
}

async function retryVideo() {
    const btn = document.getElementById('retryBtn');
    btn.disabled = true;
    btn.textContent = 'جاري الإعادة...';
    try {
        await fetch('/campaigns/api/retry-video/{{ campaign.id }}', {method: 'POST'});
        location.reload();
    } catch(e) {
        btn.disabled = false;
        btn.textContent = 'إعادة المحاولة';
    }
}

{% if campaign.status == 'video_processing' %}
pollInterval = setInterval(checkVideoStatus, 15000);
checkVideoStatus();
{% endif %}

/* ── Publish Tabs ── */
function switchPublishTab(tab) {
    // Hide all panels
    document.querySelectorAll('.publish-panel').forEach(p => p.classList.add('hidden'));
    // Reset all tabs
    document.querySelectorAll('.publish-tab').forEach(t => {
        t.className = t.className.replace(/bg-gold-500\/20|text-gold-400|border|border-gold-500\/30|bg-emerald-500\/20|text-emerald-400|border-emerald-500\/30/g, '').trim();
        t.classList.add('text-slate-400');
    });
    // Show selected panel
    document.getElementById('panel-' + tab).classList.remove('hidden');
    const activeTab = document.getElementById('tab-' + tab);
    activeTab.classList.remove('text-slate-400');
    if (tab === 'sponsor') {
        activeTab.classList.add('bg-emerald-500/20', 'text-emerald-400', 'border', 'border-emerald-500/30');
    } else if (tab === 'paid') {
        activeTab.classList.add('bg-gold-500/20', 'text-gold-400', 'border', 'border-gold-500/30');
    } else {
        activeTab.classList.add('bg-gold-500/20', 'text-gold-400', 'border', 'border-gold-500/30');
    }
}

async function publishCampaign(mode) {
    let platforms = [];
    let statusEl, btn;

    if (mode === 'my_accounts') {
        platforms = [...document.querySelectorAll('.my-platform-cb:checked')].map(c => c.value);
        statusEl = document.getElementById('publishMyStatus');
        btn = document.getElementById('publishMyBtn');
    } else if (mode === 'sponsor') {
        platforms = [...document.querySelectorAll('.sponsor-platform-cb:checked')].map(c => c.value);
        statusEl = document.getElementById('publishSponsorStatus');
        btn = document.getElementById('publishSponsorBtn');
    }

    if (!platforms.length) {
        if (statusEl) statusEl.innerHTML = '<span class="text-red-400">اختر منصة واحدة على الأقل</span>';
        return;
    }

    if (btn) { btn.disabled = true; btn.textContent = 'جاري النشر...'; }
    if (statusEl) statusEl.innerHTML = '<span class="text-yellow-400">جاري النشر...</span>';

    try {
        const res = await fetch('/campaigns/api/publish/{{ campaign.id }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({platforms, captions: {}, publish_mode: mode})
        });
        const data = await res.json();
        if (data.error) {
            if (statusEl) statusEl.innerHTML = '<span class="text-red-400">' + data.error + '</span>';
            if (btn) { btn.disabled = false; btn.textContent = mode === 'sponsor' ? '🏢 نشر عبر الجهة الراعية' : 'نشر على حساباتي'; }
        } else {
            location.reload();
        }
    } catch(e) {
        if (statusEl) statusEl.innerHTML = '<span class="text-red-400">خطأ في الاتصال</span>';
        if (btn) { btn.disabled = false; btn.textContent = mode === 'sponsor' ? '🏢 نشر عبر الجهة الراعية' : 'نشر على حساباتي'; }
    }
}
</script>
{% endblock %}