{% extends "base.html" %}
{% block title %}إدارة الخطط{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-serif font-bold text-white">إدارة الخطط</h1>
        <a href="{{ url_for('admin.index') }}" class="text-sm text-slate-400 hover:text-gold-400">← لوحة الإدارة</a>
    </div>

    <div class="space-y-4">
        {% for plan in plans %}
        <div class="glass p-6 rounded-2xl">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-bold text-white">{{ plan.display_name }}</h3>
                    <p class="text-xs text-slate-400 mt-1">{{ plan.name }} | {{ plan.reports_per_month }} تقرير/شهر | {{ plan.price_monthly }} {{ 'SAR' }}</p>
                </div>
                <div class="flex items-center gap-4">
                    <form method="POST" action="{{ url_for('admin.set_plan_video_provider', plan_id=plan.id) }}" class="flex items-center gap-2">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <label class="text-xs text-slate-400">مزود الفيديو:</label>
                        <select name="video_provider" onchange="this.form.submit()" class="bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-gold-500/50">
                            <option value="sora" {% if plan.video_provider == 'sora' %}selected{% endif %}>OpenAI Sora</option>
                            <option value="veo" {% if plan.video_provider == 'veo' %}selected{% endif %}>Google Veo 3</option>
                            <option value="kling" {% if plan.video_provider == 'kling' %}selected{% endif %}>Kling AI ⭐</option>
                            <option value="runway" {% if plan.video_provider == 'runway' %}selected{% endif %}>Runway Gen-4</option>
                            <option value="pika" {% if plan.video_provider == 'pika' %}selected{% endif %}>Pika Labs</option>
                            <option value="fal" {% if plan.video_provider == 'fal' %}selected{% endif %}>fal.ai</option>
                            <option value="none" {% if plan.video_provider == 'none' %}selected{% endif %}>معطل</option>
                        </select>
                    </form>
                    <span class="text-xs px-3 py-1 rounded-full
                        {% if plan.video_provider == 'kling' %}bg-emerald-500/20 text-emerald-400
                        {% elif plan.video_provider == 'veo' %}bg-blue-500/20 text-blue-400
                        {% elif plan.video_provider == 'runway' %}bg-purple-500/20 text-purple-400
                        {% elif plan.video_provider == 'pika' %}bg-pink-500/20 text-pink-400
                        {% elif plan.video_provider == 'fal' %}bg-cyan-500/20 text-cyan-400
                        {% elif plan.video_provider == 'none' %}bg-red-500/20 text-red-400
                        {% else %}bg-gold-500/20 text-gold-400{% endif %}">
                        {% if plan.video_provider == 'kling' %}Kling
                        {% elif plan.video_provider == 'veo' %}Veo
                        {% elif plan.video_provider == 'runway' %}Runway
                        {% elif plan.video_provider == 'pika' %}Pika
                        {% elif plan.video_provider == 'fal' %}fal.ai
                        {% elif plan.video_provider == 'none' %}معطل
                        {% else %}Sora{% endif %}
                    </span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="mt-8 glass p-6 rounded-2xl">
        <h3 class="text-white font-bold mb-3">كيف يعمل النظام</h3>
        <div class="space-y-2 text-xs text-slate-400">
            <p>&#9679; كل خطة لها مزود فيديو افتراضي</p>
            <p>&#9679; يمكنك تخصيص مزود فيديو لمستخدم معين من <a href="{{ url_for('admin.users') }}" class="text-gold-400 hover:text-gold-300">صفحة المستخدمين</a></p>
            <p>&#9679; الأولوية: تخصيص المستخدم ← إعداد الخطة ← Sora (افتراضي)</p>
            <p>&#9679; اختيار "معطل" يمنع المستخدم من توليد الفيديو</p>
        </div>
    </div>

    <div class="mt-4 glass p-6 rounded-2xl">
        <h3 class="text-white font-bold mb-3">مقارنة مزودي الفيديو</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-xs text-slate-300">
                <thead>
                    <tr class="border-b border-white/10 text-slate-400">
                        <th class="py-2 px-3 text-right">المزود</th>
                        <th class="py-2 px-3 text-right">السعر التقريبي</th>
                        <th class="py-2 px-3 text-right">المدة القصوى</th>
                        <th class="py-2 px-3 text-right">المميزات</th>
                        <th class="py-2 px-3 text-right">API Key المطلوب</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-white/5">
                        <td class="py-2 px-3 font-bold text-emerald-400">Kling AI ⭐</td>
                        <td class="py-2 px-3">$0.14 — $0.98/فيديو</td>
                        <td class="py-2 px-3">10 ثانية (حتى 3 دقائق مع التمديد)</td>
                        <td class="py-2 px-3">أفضل سعر/جودة، يدعم العربي</td>
                        <td class="py-2 px-3 font-mono">KLING_ACCESS_KEY + KLING_SECRET_KEY</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-2 px-3 font-bold text-gold-400">OpenAI Sora</td>
                        <td class="py-2 px-3">~$2-5/فيديو</td>
                        <td class="py-2 px-3">12 ثانية</td>
                        <td class="py-2 px-3">جودة سينمائية عالية</td>
                        <td class="py-2 px-3 font-mono">OPENAI_API_KEY</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-2 px-3 font-bold text-blue-400">Google Veo 3</td>
                        <td class="py-2 px-3">~$0.50/فيديو</td>
                        <td class="py-2 px-3">8 ثانية</td>
                        <td class="py-2 px-3">صوت + فيديو مدمج، حوار مزامن</td>
                        <td class="py-2 px-3 font-mono">GOOGLE_GEMINI_API_KEY</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-2 px-3 font-bold text-purple-400">Runway Gen-4</td>
                        <td class="py-2 px-3">$0.05 — $0.10/فيديو</td>
                        <td class="py-2 px-3">10 ثانية</td>
                        <td class="py-2 px-3">جودة سينمائية، تحكم دقيق</td>
                        <td class="py-2 px-3 font-mono">RUNWAY_API_KEY</td>
                    </tr>
                    <tr>
                        <td class="py-2 px-3 font-bold text-pink-400">Pika Labs</td>
                        <td class="py-2 px-3">~$0.04/فيديو</td>
                        <td class="py-2 px-3">4 ثانية</td>
                        <td class="py-2 px-3">إبداعي وسريع، أنماط متعددة</td>
                        <td class="py-2 px-3 font-mono">PIKA_API_KEY</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}