{% 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-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#9670;</span> حسابات الجهة الراعية
        </h1>
        <a href="{{ url_for('admin.index') }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; لوحة التحكم</a>
    </div>

    <!-- Info -->
    <div class="glass p-4 rounded-2xl mb-6 border border-blue-500/20">
        <div class="flex items-start gap-3">
            <span class="text-blue-400 text-xl">&#9432;</span>
            <div class="text-sm text-slate-300">
                <p class="font-bold text-white mb-1">ما هي حسابات الجهة الراعية؟</p>
                <p>هذه حسابات التواصل الاجتماعي الخاصة بالشركة/المدير. عندما يختار المستخدم "النشر عبر الجهة الراعية"، سيتم نشر الفيديو على هذه الحسابات مجاناً بدلاً من حسابات المستخدم الشخصية.</p>
            </div>
        </div>
    </div>

    <!-- Add/Edit Account Form -->
    <div class="glass p-6 rounded-2xl mb-8">
        <h2 class="text-lg font-bold text-white mb-4">إضافة / تعديل حساب راعي</h2>
        <form method="POST" action="{{ url_for('admin.save_sponsor_account') }}" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">المنصة</label>
                    <select name="platform" required class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                        <option value="">اختر المنصة</option>
                        <option value="youtube">YouTube</option>
                        <option value="tiktok">TikTok</option>
                        <option value="facebook">Facebook</option>
                        <option value="instagram">Instagram</option>
                        <option value="twitter">X / Twitter</option>
                        <option value="snapchat">Snapchat</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">اسم الحساب</label>
                    <input type="text" name="account_name" placeholder="مثال: حساب الشركة الرسمي" class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">اسم المستخدم على المنصة</label>
                    <input type="text" name="platform_username" placeholder="@username" class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Access Token</label>
                    <input type="password" name="access_token" placeholder="Token..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Refresh Token (اختياري)</label>
                    <input type="password" name="refresh_token" placeholder="Refresh Token..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">معرّف الحساب على المنصة</label>
                    <input type="text" name="platform_user_id" placeholder="Channel ID / Page ID..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">ملاحظات</label>
                    <input type="text" name="notes" placeholder="ملاحظات إضافية..." class="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-white">
                </div>
                <div class="flex items-end gap-3">
                    <label class="flex items-center gap-2 text-sm text-white cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" checked class="rounded"> نشط
                    </label>
                    <button type="submit" class="bg-gold-500 text-black px-6 py-2 rounded-lg font-bold hover:bg-gold-400 transition">حفظ</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Accounts List -->
    <div class="space-y-3">
        {% for acc in accounts %}
        <div class="glass p-5 rounded-2xl flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl font-bold
                    {% if acc.platform == 'facebook' %}bg-blue-500/20 text-blue-400
                    {% elif acc.platform == 'instagram' %}bg-pink-500/20 text-pink-400
                    {% elif acc.platform == 'tiktok' %}bg-fuchsia-500/20 text-fuchsia-400
                    {% elif acc.platform == 'youtube' %}bg-red-500/20 text-red-400
                    {% elif acc.platform == 'snapchat' %}bg-yellow-500/20 text-yellow-400
                    {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                    {% if acc.platform == 'facebook' %}f{% elif acc.platform == 'instagram' %}I{% elif acc.platform == 'tiktok' %}T{% elif acc.platform == 'youtube' %}Y{% elif acc.platform == 'snapchat' %}S{% else %}X{% endif %}
                </div>
                <div>
                    <div class="text-white font-bold">{{ acc.account_name or acc.platform }}</div>
                    <div class="text-xs text-slate-400">
                        <span class="capitalize">{{ acc.platform }}</span>
                        {% if acc.platform_username %} &middot; {{ acc.platform_username }}{% endif %}
                        {% if acc.platform_user_id %} &middot; ID: {{ acc.platform_user_id }}{% endif %}
                    </div>
                    {% if acc.notes %}<div class="text-[10px] text-slate-500 mt-0.5">{{ acc.notes }}</div>{% endif %}
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="text-xs px-2 py-1 rounded-full {% if acc.is_active and acc.access_token %}bg-emerald-500/20 text-emerald-400{% elif acc.is_active %}bg-yellow-500/20 text-yellow-400{% else %}bg-red-500/20 text-red-400{% endif %}">
                    {% if acc.is_active and acc.access_token %}جاهز{% elif acc.is_active %}بدون توكن{% else %}معطل{% endif %}
                </span>
                <form method="POST" action="{{ url_for('admin.toggle_sponsor_account', account_id=acc.id) }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="text-xs text-slate-400 hover:text-gold-400 px-2 py-1">{{ 'تعطيل' if acc.is_active else 'تفعيل' }}</button>
                </form>
                <form method="POST" action="{{ url_for('admin.delete_sponsor_account', account_id=acc.id) }}" onsubmit="return confirm('حذف هذا الحساب؟')" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="text-xs text-red-400/60 hover:text-red-400 px-2 py-1">&#10005;</button>
                </form>
            </div>
        </div>
        {% else %}
        <div class="text-center py-8 text-slate-400">لا توجد حسابات راعية. أضف حساباً أعلاه.</div>
        {% endfor %}
    </div>
</div>
{% endblock %}