{% 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
                {% elif campaign.status == 'video_ready' %}bg-blue-500/15 text-blue-400 border border-blue-500/20
                {% elif campaign.status == 'script_ready' %}bg-purple-500/15 text-purple-400 border border-purple-500/20
                {% elif campaign.status == 'created' %}bg-slate-500/15 text-slate-400 border border-slate-500/20
                {% else %}bg-slate-500/15 text-slate-400 border border-slate-500/20{% endif %}">
                {% if campaign.status == 'video_processing' %}جاري توليد الفيديو
                {% elif campaign.status == 'video_ready' %}الفيديو جاهز
                {% elif campaign.status == 'script_ready' %}السيناريو جاهز
                {% elif campaign.status == 'created' %}جديد
                {% elif campaign.status == 'published' %}تم النشر
                {% else %}{{ campaign.status }}{% endif %}
            </span>
        </div>

        <!-- Progress Steps Indicator -->
        <div class="mt-8 flex items-center gap-3">
            {% set step1_done = campaign.script and campaign.status != 'created' %}
            {% 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>

            <!-- Video Language Selector (shown when script exists but no video yet) -->
            {% if not campaign.video_url %}
            <div class="bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-2xl p-5 mb-5 border border-blue-500/10 text-center">
                <label class="flex items-center justify-center gap-2 text-sm font-medium text-blue-300 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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
                    تغيير لغة الفيديو (الصوت والنص)
                </label>
                <div class="flex gap-4 justify-center">
                    <label class="relative cursor-pointer flex-1 max-w-[200px]">
                        <input type="radio" name="video_language_edit" value="ar" {% if campaign.video_language != 'en' %}checked{% endif %} onchange="updateVideoLanguage('ar')" class="peer sr-only">
                        <div class="p-3 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:shadow-lg peer-checked:shadow-gold-500/20">
                            <div class="flex items-center gap-3 justify-center">
                                <div class="w-10 h-10 bg-gold-500/20 rounded-lg flex items-center justify-center text-gold-400 text-xl">🇸🇦</div>
                                <div class="text-right">
                                    <div class="text-white font-bold text-sm">العربية</div>
                                    <div class="text-[10px] text-slate-400">صوت ونص عربي</div>
                                </div>
                            </div>
                        </div>
                    </label>
                    <label class="relative cursor-pointer flex-1 max-w-[200px]">
                        <input type="radio" name="video_language_edit" value="en" {% if campaign.video_language == 'en' %}checked{% endif %} onchange="updateVideoLanguage('en')" class="peer sr-only">
                        <div class="p-3 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-blue-500 peer-checked:bg-blue-500/10 peer-checked:shadow-lg peer-checked:shadow-blue-500/20">
                            <div class="flex items-center gap-3 justify-center">
                                <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center text-blue-400 text-xl">🇬🇧</div>
                                <div class="text-left">
                                    <div class="text-white font-bold text-sm">English</div>
                                    <div class="text-[10px] text-slate-400">Voice & text in English</div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
                <p class="text-[10px] text-slate-500 mt-3">يمكنك تغيير اللغة وإعادة توليد السيناريو</p>
            </div>
            <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>

            <!-- Video Language Selection -->
            <div class="bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-2xl p-5 mb-5 border border-blue-500/10 text-center">
                <label class="flex items-center justify-center gap-2 text-sm font-medium text-blue-300 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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
                    اختر لغة الفيديو (الصوت والنص)
                </label>
                <div class="flex gap-4 justify-center">
                    <label class="relative cursor-pointer flex-1 max-w-[200px]">
                        <input type="radio" name="video_language" value="ar" {% if campaign.video_language != 'en' %}checked{% endif %} onchange="updateVideoLanguage('ar')" class="peer sr-only">
                        <div class="p-3 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:shadow-lg peer-checked:shadow-gold-500/20">
                            <div class="flex items-center gap-3 justify-center">
                                <div class="w-10 h-10 bg-gold-500/20 rounded-lg flex items-center justify-center text-gold-400 text-xl">🇸🇦</div>
                                <div class="text-right">
                                    <div class="text-white font-bold text-sm">العربية</div>
                                    <div class="text-[10px] text-slate-400">صوت ونص عربي</div>
                                </div>
                            </div>
                        </div>
                    </label>
                    <label class="relative cursor-pointer flex-1 max-w-[200px]">
                        <input type="radio" name="video_language" value="en" {% if campaign.video_language == 'en' %}checked{% endif %} onchange="updateVideoLanguage('en')" class="peer sr-only">
                        <div class="p-3 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-blue-500 peer-checked:bg-blue-500/10 peer-checked:shadow-lg peer-checked:shadow-blue-500/20">
                            <div class="flex items-center gap-3 justify-center">
                                <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center text-blue-400 text-xl">🇬🇧</div>
                                <div class="text-left">
                                    <div class="text-white font-bold text-sm">English</div>
                                    <div class="text-[10px] text-slate-400">Voice & text in English</div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
                <p class="text-[10px] text-slate-500 mt-3">سيتم توليد الفيديو باللغة المختارة (صوت ونص)</p>
            </div>

            <!-- 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>
                <div class="flex items-center gap-4 mt-1">
                    {% if campaign.video_duration %}<p class="text-sm text-slate-400">المدة: {{ campaign.video_duration }} ثانية</p>{% endif %}
                    <p class="text-sm text-slate-400">
                        اللغة:
                        {% if campaign.video_language == 'en' %}
                        <span class="text-blue-400">🇬🇧 English</span>
                        {% else %}
                        <span class="text-gold-400">🇸🇦 العربية</span>
                        {% endif %}
                    </p>
                </div>
            </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>
            <button onclick="openRecreateModal()" id="recreateBtn" class="bg-purple-500/15 hover:bg-purple-500/25 text-purple-400 px-6 py-3 rounded-xl text-sm font-medium transition border border-purple-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 15m0 0A8.001 8.001 0 0015m0 0a8.001 8.001 0 00-5.418-2.002M5 4a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4z"/></svg>
                إعادة إنشاء الفيديو
            </button>
        </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>

    <!-- ═══════════════════════════════════════════ -->
    <!-- Video History Section -->
    <!-- ═══════════════════════════════════════════ -->
    <div class="glass rounded-3xl p-8 border border-white/5">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-white">تاريخ الفيديوهات • Video History</h2>
                    <p class="text-sm text-slate-500">الإصدارات السابقة من الفيديو • Previous video versions</p>
                </div>
            </div>
            <button onclick="loadVideoHistory()" class="text-purple-400 hover:text-purple-300 text-sm font-medium transition">
                <svg class="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 15m0 0A8.001 8.001 0 0015m0 0a8.001 8.001 0 00-5.418-2.002M5 4a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4z"/></svg>
                تحديث • Refresh
            </button>
        </div>

        <!-- Video History Content -->
        <div id="videoHistoryContent" class="space-y-4">
            <!-- Loading state -->
            <div id="historyLoading" class="text-center py-8">
                <div class="animate-spin w-8 h-8 border-2 border-purple-500 border-t-transparent rounded-full mx-auto mb-3"></div>
                <p class="text-sm text-slate-400">جاري تحميل التاريخ...</p>
            </div>

            <!-- Empty state -->
            <div id="historyEmpty" class="hidden 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <p class="text-sm text-slate-500">لا يوجد تاريخ للفيديوهات بعد</p>
                <p class="text-xs text-slate-600 mt-1">Video history will appear here after recreating videos</p>
            </div>

            <!-- History items will be inserted here -->
            <div id="historyItems" class="hidden space-y-4"></div>
        </div>
    </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';
    }
}

/* ── Video Language Selection ── */
async function updateVideoLanguage(language) {
    try {
        const res = await fetch('/campaigns/api/update-language/{{ campaign.id }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({video_language: language})
        });
        const data = await res.json();
        if (data.status === 'done') {
            // Show success message
            const statusEl = document.getElementById('scriptStatus');
            if (statusEl) {
                statusEl.textContent = language === 'ar' ? '✅ تم تغيير اللغة إلى العربية' : '✅ Language changed to English';
                statusEl.className = 'text-sm text-emerald-400 mt-3';
                setTimeout(() => {
                    statusEl.textContent = '';
                    statusEl.className = 'text-sm text-slate-400 mt-3';
                }, 3000);
            }
        } else {
            console.error('Failed to update language:', data.error);
        }
    } catch(e) {
        console.error('Error updating language:', e);
    }
}

/* ── Script Generation ── */
async function generateScript() {
    const btn = document.getElementById('scriptBtn');
    const statusEl = document.getElementById('scriptStatus');
    const notesEl = document.getElementById('preGenNotes');
    const userNotes = notesEl ? notesEl.value : '';

    // Disable button and show loading
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-5 h-5 animate-spin inline" 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 016a8 8 0 018 0v16a8 8 0 01-16 0V12a8 8 0 018 0z"/></svg> جاري توليد السيناريو...';

    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') {
            btn.innerHTML = '<svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> تم!';
            statusEl.innerHTML = '<span class="text-emerald-400">✅ تم توليد السيناريو بنجاح!</span>';
            setTimeout(() => location.reload(), 500);
        } else {
            btn.disabled = false;
            btn.innerHTML = '✨ توليد السيناريو';
            statusEl.innerHTML = '<span class="text-red-400">' + (data.error || 'حدث خطأ') + '</span>';
        }
    } catch(e) {
        btn.disabled = false;
        btn.innerHTML = '✨ توليد السيناريو';
        statusEl.innerHTML = '<span class="text-red-400">حدث خطأ في الاتصال</span>';
    }
}

/* ── 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 = 'إعادة المحاولة';
    }
}

// Old recreateVideo function replaced by modal-based approach
// The new openRecreateModal() function provides better UX with settings customization

{% 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>

<!-- Recreate Video Modal -->
<div id="recreateModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="glass-strong rounded-3xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <!-- Modal Header -->
        <div class="sticky top-0 glass-strong border-b border-white/10 p-6 rounded-t-3xl z-10">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold text-white flex items-center gap-3">
                        <span class="text-purple-400">🎬</span>
                        إعادة إنشاء الفيديو
                    </h2>
                    <p class="text-sm text-slate-400 mt-1">Recreate Video with Custom Settings</p>
                </div>
                <button onclick="closeRecreateModal()" class="text-slate-400 hover:text-white transition">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Modal Body -->
        <div class="p-6 space-y-6">
            <!-- Current Settings Display -->
            <div class="bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl p-4 border border-purple-500/20">
                <h3 class="text-sm font-bold text-purple-400 mb-2">الإعدادات الحالية • Current Settings</h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-slate-400">اللغة • Language:</span>
                        <span class="text-white font-bold" id="currentLang">{{ "🇸🇦 العربية" if campaign.video_language != "en" else "🇬🇧 English" }}</span>
                    </div>
                    <div>
                        <span class="text-slate-400">المدة • Duration:</span>
                        <span class="text-white font-bold" id="currentDur">{{ (campaign.video_duration|string + "s") if campaign.video_duration else "30s" }}</span>
                    </div>
                </div>
            </div>

            <!-- Language Selection -->
            <div class="space-y-3">
                <h3 class="text-lg font-bold text-white">🌍 لغة الفيديو • Video Language</h3>
                <div class="grid grid-cols-2 gap-4">
                    <label class="relative cursor-pointer">
                        <input type="radio" name="recreate_language" value="ar"
                               {% if campaign.video_language != "en" %}checked{% endif %}
                               class="peer sr-only" onchange="updateRecreatePreview()">
                        <div class="p-4 rounded-xl border border-white/10 bg-black/20 transition
                                    peer-checked:border-gold-500 peer-checked:bg-gold-500/10">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 bg-gold-500/20 rounded-lg flex items-center justify-center text-2xl">🇸🇦</div>
                                <div>
                                    <div class="font-bold text-white">العربية</div>
                                    <div class="text-xs text-slate-400">Arabic - صوت ونص عربي</div>
                                </div>
                            </div>
                        </div>
                    </label>

                    <label class="relative cursor-pointer">
                        <input type="radio" name="recreate_language" value="en"
                               {% if campaign.video_language == "en" %}checked{% endif %}
                               class="peer sr-only" onchange="updateRecreatePreview()">
                        <div class="p-4 rounded-xl border border-white/10 bg-black/20 transition
                                    peer-checked:border-gold-500 peer-checked:bg-gold-500/10">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center text-2xl">🇬🇧</div>
                                <div>
                                    <div class="font-bold text-white">English</div>
                                    <div class="text-xs text-slate-400">إنجليزي - English voice & text</div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Duration Selection -->
            <div class="space-y-3">
                <h3 class="text-lg font-bold text-white">⏱️ مدة الفيديو • Video Duration</h3>
                <div class="grid grid-cols-4 gap-3">
                    {% for duration in ["15", "30", "60", "90"] %}
                    <label class="relative cursor-pointer">
                        <input type="radio" name="recreate_duration" value="{{ duration }}"
                               {% if campaign.video_duration == duration %}checked{% elif duration == "30" and not campaign.video_duration %}checked{% endif %}
                               class="peer sr-only recreate-duration-radio" onchange="updateRecreatePreview()">
                        <div class="p-3 rounded-xl border border-white/10 bg-black/20 text-center transition
                                    peer-checked:border-purple-500 peer-checked:bg-purple-500/10">
                            <div class="text-lg font-bold text-white">{{ duration }}s</div>
                            <div class="text-xs text-slate-400">
                                {% if duration == "15" %}قصير•Short{% elif duration == "30" %}متوسط•Medium{% elif duration == "60" %}طويل•Long{% else %}أطول•Longest{% endif %}
                            </div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
            </div>

            <!-- Script Editing Section -->
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-bold text-white">📝 السيناريو • Script</h3>
                    <span class="text-xs text-slate-400">يمكنك التعديل قبل الإنشاء • Edit before recreation</span>
                </div>
                <div class="glass rounded-xl p-4">
                    <textarea id="recreateScript"
                              class="w-full bg-black/30 text-white rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-gold-500/50 transition min-h-[200px] leading-relaxed"
                              dir="auto">{{ campaign.script if campaign.script else "" }}</textarea>
                    <div class="flex items-center justify-between mt-3 pt-3 border-t border-white/10">
                        <div class="text-xs text-slate-400">
                            <span id="scriptCharCount">0</span> حرف • characters
                        </div>
                        <button onclick="resetScript()" class="text-xs text-gold-400 hover:text-gold-300 transition">
                            ↺ استعادة الأصل • Reset
                        </button>
                    </div>
                </div>
            </div>

            <!-- Processing Info -->
            <div class="bg-blue-500/10 rounded-xl p-4 border border-blue-500/20">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="text-sm">
                        <div class="text-blue-400 font-bold mb-1">ملاحظة هامة • Important Note</div>
                        <div class="text-slate-300">
                            سيتم حذف الفيديو الحالي وإنشاء فيديو جديد بالإعدادات المحددة.
                            <br>Current video will be deleted and new video will be created with selected settings.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary Preview -->
            <div id="recreateSummary" class="bg-gradient-to-r from-gold-500/10 to-orange-500/10 rounded-xl p-4 border border-gold-500/20">
                <h4 class="text-sm font-bold text-gold-400 mb-2">📋 ملخص الإعدادات • Settings Summary</h4>
                <div class="grid grid-cols-3 gap-4 text-sm">
                    <div>
                        <span class="text-slate-400">اللغة • Language:</span>
                        <div class="text-white font-bold" id="summaryLang">العربية</div>
                    </div>
                    <div>
                        <span class="text-slate-400">المدة • Duration:</span>
                        <div class="text-white font-bold" id="summaryDur">30s</div>
                    </div>
                    <div>
                        <span class="text-slate-400">السيناريو • Script:</span>
                        <div class="text-white font-bold" id="summaryScript">معدل • Edited</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="sticky bottom-0 glass-strong border-t border-white/10 p-6 rounded-b-3xl">
            <div class="flex gap-4">
                <button onclick="closeRecreateModal()" class="flex-1 bg-white/10 text-white px-6 py-3 rounded-xl font-bold hover:bg-white/20 transition">
                    إلغاء • Cancel
                </button>
                <button onclick="confirmRecreateVideo()" id="confirmRecreateBtn" class="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-xl font-bold hover:from-purple-600 hover:to-pink-600 transition 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 15m0 0A8.001 8.001 0 0015m0 0a8.001 8.001 0 00-5.418-2.002M5 4a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4z"/>
                    </svg>
                    تأكيد الإنشاء • Confirm
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Recreate Video Modal Functions
let originalScript = '';

function openRecreateModal() {
    originalScript = document.getElementById('recreateScript').value;
    document.getElementById('recreateModal').classList.remove('hidden');
    document.getElementById('recreateModal').classList.add('flex');
    updateRecreatePreview();
    updateScriptCharCount();
}

function closeRecreateModal() {
    document.getElementById('recreateModal').classList.add('hidden');
    document.getElementById('recreateModal').classList.remove('flex');
    // Reset script if cancelled
    document.getElementById('recreateScript').value = originalScript;
}

function updateRecreatePreview() {
    const lang = document.querySelector('input[name="recreate_language"]:checked').value;
    const dur = document.querySelector('input[name="recreate_duration"]:checked').value;
    const script = document.getElementById('recreateScript').value;

    // Update summary
    document.getElementById('summaryLang').textContent = lang === 'ar' ? 'العربية' : 'English';
    document.getElementById('summaryDur').textContent = dur + 's';
    document.getElementById('summaryScript').textContent = script !== originalScript ? 'معدل • Edited' : 'أصلي • Original';
}

function updateScriptCharCount() {
    const script = document.getElementById('recreateScript').value;
    document.getElementById('scriptCharCount').textContent = script.length;
}

function resetScript() {
    document.getElementById('recreateScript').value = originalScript;
    updateScriptCharCount();
    updateRecreatePreview();
}

// Add event listener for script textarea
document.addEventListener('DOMContentLoaded', function() {
    const scriptTextarea = document.getElementById('recreateScript');
    if (scriptTextarea) {
        // Initialize character count on page load
        updateScriptCharCount();
        scriptTextarea.addEventListener('input', function() {
            updateScriptCharCount();
            updateRecreatePreview();
        });
    }
});

async function confirmRecreateVideo() {
    const btn = document.getElementById('confirmRecreateBtn');
    const originalBtnText = btn.innerHTML;

    // Disable button and show loading
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-5 h-5 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 016a8 8 0 018 0v16a8 8 0 01-16 0V12a8 8 0 018 0z"/></svg> جاري الإنشاء...';

    try {
        // Get selected settings
        const language = document.querySelector('input[name="recreate_language"]:checked').value;
        const duration = document.querySelector('input[name="recreate_duration"]:checked').value;
        const script = document.getElementById('recreateScript').value;

        const res = await fetch('/campaigns/api/recreate-video/{{ campaign.id }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                video_language: language,
                video_duration: duration,
                script: script
            })
        });

        const data = await res.json();

        if (data.status === 'success') {
            btn.innerHTML = '<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> تم!';
            setTimeout(() => {
                closeRecreateModal();
                location.reload();
            }, 1500);
        } else {
            btn.disabled = false;
            btn.innerHTML = originalBtnText;
            alert(data.error || 'فشل إعادة إنشاء الفيديو');
        }
    } catch(e) {
        btn.disabled = false;
        btn.innerHTML = originalBtnText;
        alert('حدث خطأ في الاتصال');
    }
}

// Video History Management
async function loadVideoHistory() {
    const historyContent = document.getElementById('videoHistoryContent');
    const historyLoading = document.getElementById('historyLoading');
    const historyEmpty = document.getElementById('historyEmpty');
    const historyItems = document.getElementById('historyItems');

    // Show loading
    historyLoading.classList.remove('hidden');
    historyEmpty.classList.add('hidden');
    historyItems.classList.add('hidden');

    try {
        const res = await fetch(`/campaigns/api/video-history/{{ campaign.id }}`);
        const data = await res.json();

        // Hide loading
        historyLoading.classList.add('hidden');

        if (data.history && data.history.length > 0) {
            // Show history items
            historyItems.classList.remove('hidden');
            historyItems.innerHTML = data.history.map(item => `
                <div class="glass p-5 rounded-2xl border border-white/5 hover:border-purple-500/20 transition">
                    <div class="flex items-start justify-between">
                        <div class="flex items-start gap-4 flex-1">
                            <!-- Video Thumbnail -->
                            <div class="w-24 h-16 rounded-lg bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center border border-white/10">
                                <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="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>
                            </div>

                            <!-- Video Info -->
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-2">
                                    <h4 class="text-white font-bold">${item.language_display}</h4>
                                    <span class="text-xs text-slate-500">•</span>
                                    <span class="text-xs text-slate-400">${item.video_duration}s</span>
                                    <span class="text-xs text-slate-500">•</span>
                                    <span class="text-xs text-slate-400">${item.created_at}</span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="${item.video_url}" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 transition">
                                        مشاهدة • Watch
                                    </a>
                                    ${item.video_with_text_url ? `
                                        <span class="text-xs text-slate-600">•</span>
                                        <a href="${item.video_with_text_url}" target="_blank" class="text-xs text-purple-400 hover:text-purple-300 transition">
                                            مع النص • With Text
                                        </a>
                                    ` : ''}
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex gap-2">
                            <button onclick="restoreHistoryVideo(${item.id})" class="px-3 py-1.5 bg-emerald-500/10 text-emerald-400 rounded-lg text-xs font-medium hover:bg-emerald-500/20 transition border border-emerald-500/20">
                                استعادة • Restore
                            </button>
                            <button onclick="deleteHistoryVideo(${item.id})" class="px-3 py-1.5 bg-red-500/10 text-red-400 rounded-lg text-xs font-medium hover:bg-red-500/20 transition border border-red-500/20">
                                حذف • Delete
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        } else {
            // Show empty state
            historyEmpty.classList.remove('hidden');
        }
    } catch(e) {
        console.error('Error loading video history:', e);
        historyLoading.classList.add('hidden');
        historyEmpty.classList.remove('hidden');
    }
}

async function restoreHistoryVideo(historyId) {
    if (!confirm('هل تريد استعادة هذا الفيديو؟\nسيتم حفظ الفيديو الحالي في التاريخ.\n\nRestore this video? Current video will be saved to history.')) {
        return;
    }

    try {
        const res = await fetch(`/campaigns/api/video-history/restore/${historyId}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'}
        });

        const data = await res.json();

        if (data.status === 'success') {
            alert('✅ تم استعادة الفيديو بنجاح!\nVideo restored successfully!');
            location.reload();
        } else {
            alert(data.error || 'فشل استعادة الفيديو');
        }
    } catch(e) {
        alert('حدث خطأ في الاتصال');
    }
}

async function deleteHistoryVideo(historyId) {
    if (!confirm('هل تريد حذف هذا الفيديو نهائياً؟\nلا يمكن التراجع عن هذا الإجراء.\n\nPermanently delete this video? This cannot be undone.')) {
        return;
    }

    try {
        const res = await fetch(`/campaigns/api/video-history/delete/${historyId}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'}
        });

        const data = await res.json();

        if (data.status === 'success') {
            // Remove the deleted item from UI
            loadVideoHistory();
        } else {
            alert(data.error || 'فشل حذف الفيديو');
        }
    } catch(e) {
        alert('حدث خطأ في الاتصال');
    }
}

// Load video history when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadVideoHistory();
});
</script>
{% endblock %}