{% extends "base.html" %}
{% block title %}إدارة مزودي الفيديو{% endblock %}
{% block content %}
<div class="max-w-6xl 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 flex items-center gap-3">
            <svg class="w-6 h-6 text-gold-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>
            إدارة مزودي الفيديو AI
        </h1>
        <a href="{{ url_for('admin.index') }}" class="text-sm text-slate-400 hover:text-gold-400">← لوحة الإدارة</a>
    </div>

    <!-- Provider Cards -->
    <div class="space-y-4 mb-10">
        {% for pdef in provider_defs %}
        {% set cfg = configs_map.get(pdef.name) %}
        <div class="glass rounded-2xl overflow-hidden">
            <div class="p-6">
                <div class="flex items-start justify-between gap-4">
                    <!-- Provider Info -->
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h3 class="text-lg font-bold text-white">{{ pdef.display }}</h3>
                            {% if cfg and cfg.is_active and cfg.api_key %}
                                <span class="text-xs px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400">نشط ✓</span>
                            {% elif cfg and cfg.api_key %}
                                <span class="text-xs px-2 py-0.5 rounded-full bg-yellow-500/20 text-yellow-400">معطل</span>
                            {% else %}
                                <span class="text-xs px-2 py-0.5 rounded-full bg-slate-500/20 text-slate-400">غير مُعد</span>
                            {% endif %}
                        </div>
                        <p class="text-xs text-slate-400 mb-1">{{ pdef.price_info }}</p>
                        <a href="{{ pdef.doc_url }}" target="_blank" class="text-xs text-gold-400 hover:text-gold-300">{{ pdef.doc_url }} ↗</a>
                    </div>

                    <!-- Toggle Button -->
                    {% if cfg %}
                    <form method="POST" action="{{ url_for('admin.toggle_video_provider', config_id=cfg.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="px-3 py-1.5 rounded-lg text-xs font-medium transition
                            {% if cfg.is_active %}bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30
                            {% else %}bg-red-500/20 text-red-400 hover:bg-red-500/30{% endif %}">
                            {% if cfg.is_active %}نشط{% else %}معطل{% endif %}
                        </button>
                    </form>
                    {% endif %}
                </div>

                <!-- API Key Form -->
                <form method="POST" action="{{ url_for('admin.save_video_provider') }}" class="mt-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="provider_name" value="{{ pdef.name }}">
                    <input type="hidden" name="display_name" value="{{ pdef.display }}">
                    <input type="hidden" name="is_active" value="1">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <!-- API Key -->
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">{{ pdef.key_label }}</label>
                            <div class="flex gap-2">
                                <input type="password" name="api_key"
                                    value="{{ cfg.api_key if cfg and cfg.api_key else '' }}"
                                    placeholder="أدخل المفتاح..."
                                    class="flex-1 bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500/50 font-mono"
                                    onfocus="this.type='text'" onblur="this.type='password'">
                            </div>
                        </div>

                        <!-- API Secret (if needed) -->
                        {% if pdef.secret_label %}
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">{{ pdef.secret_label }}</label>
                            <input type="password" name="api_secret"
                                value="{{ cfg.api_secret if cfg and cfg.api_secret else '' }}"
                                placeholder="أدخل المفتاح السري..."
                                class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500/50 font-mono"
                                onfocus="this.type='text'" onblur="this.type='password'">
                        </div>
                        {% endif %}

                        <!-- Notes -->
                        <div class="{% if not pdef.secret_label %}md:col-span-1{% endif %}">
                            <label class="block text-xs text-slate-400 mb-1">ملاحظات</label>
                            <input type="text" name="notes"
                                value="{{ cfg.notes if cfg and cfg.notes else '' }}"
                                placeholder="ملاحظات اختيارية..."
                                class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500/50">
                        </div>
                    </div>

                    <!-- Allowed Durations -->
                    <div class="mt-3">
                        <label class="block text-xs text-slate-400 mb-2">الفترات الزمنية المتاحة للمستخدمين (ثانية)</label>
                        <div class="flex flex-wrap gap-3">
                            {% set admin_durations = (cfg.extra_config or {}).get('allowed_durations', pdef.supported_durations) if cfg else pdef.supported_durations %}
                            {% for dur in pdef.supported_durations %}
                            <label class="flex items-center gap-1.5 text-sm text-white cursor-pointer bg-black/20 px-3 py-1.5 rounded-lg hover:bg-black/30 transition">
                                <input type="checkbox" name="allowed_durations" value="{{ dur }}"
                                    {% if dur in admin_durations %}checked{% endif %}
                                    class="accent-gold-500 rounded">
                                <span>{{ dur }}s</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="flex items-center gap-3 mt-3">
                        <button type="submit" class="bg-gold-500/20 text-gold-400 px-4 py-2 rounded-lg text-xs font-medium hover:bg-gold-500/30 transition">
                            حفظ
                        </button>
                        {% if cfg %}
                        <span class="text-xs text-slate-500">
                            آخر تحديث: {{ cfg.updated_at.strftime('%Y-%m-%d %H:%M') if cfg.updated_at else 'N/A' }}
                        </span>
                        {% endif %}
                        {% if cfg %}
                        <form method="POST" action="{{ url_for('admin.delete_video_provider', config_id=cfg.id) }}" class="mr-auto"
                              onsubmit="return confirm('هل أنت متأكد من حذف هذا المزود؟')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="text-xs text-red-400 hover:text-red-300">حذف</button>
                        </form>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Plan Assignment Section -->
    <div class="glass p-6 rounded-2xl mb-6">
        <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
            <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="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 plan in plans %}
            <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                <div>
                    <span class="text-white font-medium text-sm">{{ plan.display_name }}</span>
                    <span class="text-xs text-slate-500 mr-2">({{ plan.name }})</span>
                </div>
                <form method="POST" action="{{ url_for('admin.assign_plan_video_provider') }}" class="flex items-center gap-2">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="plan_id" value="{{ plan.id }}">
                    <select name="video_provider" onchange="this.form.submit()"
                        class="bg-black/30 border border-white/10 rounded-lg px-3 py-1.5 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>
                    <span class="text-xs px-2 py-0.5 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 %}">
                        {{ plan.video_provider or 'sora' }}
                    </span>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Info Box -->
    <div class="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; <strong class="text-white">أولوية المفاتيح:</strong> قاعدة البيانات (هذه الصفحة) ← ملف .env ← فارغ</p>
            <p>&#9679; <strong class="text-white">أولوية المزود:</strong> تخصيص المستخدم ← إعداد الباقة ← Sora (افتراضي)</p>
            <p>&#9679; تعطيل المزود يمنع استخدامه حتى لو المفتاح موجود</p>
            <p>&#9679; اختيار "معطل" في الباقة يمنع المستخدم من توليد الفيديو</p>
            <p>&#9679; المفاتيح مخزنة في قاعدة البيانات بشكل آمن ويمكن تعديلها بدون إعادة تشغيل السيرفر</p>
        </div>
    </div>
</div>
{% endblock %}