{% extends "base.html" %}
{% block title %}إنشاء حملة{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8">إنشاء حملة تسويقية</h1>

    <div class="glass p-8 rounded-2xl">
        <div class="mb-6 p-4 bg-black/20 rounded-xl">
            <div class="text-xs text-slate-400 mb-1">التقرير المرتبط</div>
            <div class="text-white font-bold">{{ report.project_name }}</div>
        </div>

        <form method="POST" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">اسم الحملة</label>
                <input type="text" name="name" value="{{ report.project_name }}" required
                    class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
            </div>
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">مزود الفيديو</label>
                {% if current_user.effective_video_provider == 'none' %}
                <div class="glass p-4 rounded-xl flex items-center gap-3 border border-red-500/20">
                    <div class="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center text-red-400 text-lg font-bold">&#10005;</div>
                    <div>
                        <div class="text-red-400 font-bold text-sm">غير متاح</div>
                        <div class="text-xs text-slate-500">توليد الفيديو غير مفعّل في باقتك الحالية</div>
                    </div>
                </div>
                {% else %}
                <div class="glass p-4 rounded-xl flex items-center gap-3">
                    <div class="w-10 h-10 bg-gold-500/20 rounded-lg flex items-center justify-center text-gold-400 text-lg font-bold">
                        {% if current_user.effective_video_provider == 'veo' %}V{% else %}S{% endif %}
                    </div>
                    <div>
                        <div class="text-white font-bold text-sm">
                            {% if current_user.effective_video_provider == 'veo' %}Google Veo 3
                            {% elif current_user.effective_video_provider == 'kling' %}Kling AI
                            {% elif current_user.effective_video_provider == 'runway' %}Runway Gen-4
                            {% elif current_user.effective_video_provider == 'pika' %}Pika Labs
                            {% elif current_user.effective_video_provider == 'fal' %}fal.ai
                            {% else %}OpenAI Sora{% endif %}
                        </div>
                        <div class="text-xs text-slate-500">يتم تحديده بواسطة مدير النظام حسب الباقة</div>
                    </div>
                </div>
                {% endif %}
            </div>

            {% if current_user.effective_video_provider != 'none' and allowed_durations %}
            <!-- Video Duration Selection -->
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">مدة الفيديو (ثانية)</label>
                <div class="flex flex-wrap gap-3">
                    {% for dur in allowed_durations %}
                    <label class="relative cursor-pointer">
                        <input type="radio" name="video_duration" value="{{ dur }}" {% if loop.last %}checked{% endif %} class="peer sr-only">
                        <div class="px-5 py-3 rounded-xl border border-white/10 bg-black/20 text-white text-center
                            peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:text-gold-400
                            hover:bg-white/5 transition min-w-[70px]">
                            <div class="text-lg font-bold">{{ dur }}s</div>
                            <div class="text-[10px] text-slate-500">{{ dur }} ثانية</div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if current_user.effective_video_provider != 'none' %}
            <!-- User Script Notes -->
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">ملاحظاتك على السيناريو (اختياري)</label>
                <textarea name="user_script_notes" rows="3" placeholder="مثال: أريد التركيز على الأسعار التنافسية، أضف عرض خاص في النهاية، استخدم أسلوب حماسي..."
                    class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-gold-500/50 transition placeholder-slate-600"></textarea>
                <p class="text-[10px] text-slate-500 mt-1">سيتم دمج ملاحظاتك مع بيانات التقرير لتوليد سيناريو مخصص. يمكنك تعديله لاحقاً.</p>
            </div>

            <button type="submit" id="createBtn" onclick="showLoading()" class="w-full bg-gold-500 text-black py-4 rounded-xl font-bold hover:bg-gold-400 transition shadow-lg shadow-gold-500/20">
                إنشاء الحملة وتوليد السيناريو
            </button>
            <div id="loadingMsg" class="hidden text-center mt-4">
                <div class="inline-flex items-center gap-3 bg-gold-500/10 border border-gold-500/20 text-gold-400 px-6 py-3 rounded-xl text-sm">
                    <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 5.373 0 12h4z"/></svg>
                    جاري توليد السيناريو... قد يستغرق بضع ثوانٍ
                </div>
            </div>
            {% else %}
            <div class="text-center p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-sm text-red-400">
                يرجى ترقية الباقة لتفعيل توليد الفيديو
            </div>
            {% endif %}
        </form>
    </div>
</div>
<script>
function showLoading() {
    document.getElementById('createBtn').disabled = true;
    document.getElementById('createBtn').classList.add('opacity-50');
    document.getElementById('loadingMsg').classList.remove('hidden');
}
</script>
{% endblock %}