{% extends "base.html" %}
{% block title %}إدارة المستخدمين{% endblock %}
{% block content %}
<div class="max-w-7xl 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>

    <form method="GET" class="mb-6">
        <div class="flex gap-3">
            <input type="text" name="q" value="{{ q }}" placeholder="بحث بالاسم أو البريد..." class="flex-1 bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-gold-500/50 transition">
            <button type="submit" class="bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition">بحث</button>
        </div>
    </form>

    <div class="glass rounded-2xl overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="border-b border-white/5">
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">المستخدم</th>
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">الخطة</th>
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">التقارير</th>
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">مزود الفيديو</th>
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">الحالة</th>
                    <th class="text-right text-xs font-mono text-slate-400 uppercase tracking-widest p-4">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                {% for user in pagination.items %}
                <tr class="border-b border-white/5 hover:bg-white/5 transition">
                    <td class="p-4">
                        <div class="text-white text-sm font-medium">{{ user.name }}</div>
                        <div class="text-xs text-slate-500">{{ user.email }}</div>
                    </td>
                    <td class="p-4">
                        <span class="text-xs px-2 py-1 rounded-full bg-gold-500/20 text-gold-400">{{ user.active_plan.display_name if user.active_plan else 'Free' }}</span>
                    </td>
                    <td class="p-4 text-slate-300 text-sm">{{ user.reports.count() }}</td>
                    <td class="p-4">
                        <form method="POST" action="{{ url_for('admin.set_video_provider', user_id=user.id) }}" class="flex items-center gap-2">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <select name="video_provider" onchange="this.form.submit()" class="bg-black/30 border border-white/10 rounded-lg px-2 py-1 text-xs text-white focus:outline-none focus:border-gold-500/50">
                                <option value="plan_default" {% if not user.video_provider %}selected{% endif %}>حسب الباقة ({{ user.active_plan.video_provider if user.active_plan and user.active_plan.video_provider else 'sora' }})</option>
                                <option value="sora" {% if user.video_provider == 'sora' %}selected{% endif %}>Sora</option>
                                <option value="veo" {% if user.video_provider == 'veo' %}selected{% endif %}>Veo</option>
                                <option value="none" {% if user.video_provider == 'none' %}selected{% endif %}>معطل</option>
                            </select>
                        </form>
                    </td>
                    <td class="p-4">
                        {% if user.is_admin %}<span class="text-xs px-2 py-1 rounded-full bg-red-500/20 text-red-400">Admin</span>{% endif %}
                        {% if user.email_verified %}<span class="text-xs px-2 py-1 rounded-full bg-emerald-500/20 text-emerald-400">Verified</span>{% else %}<span class="text-xs px-2 py-1 rounded-full bg-slate-500/20 text-slate-400">Unverified</span>{% endif %}
                    </td>
                    <td class="p-4">
                        <form method="POST" action="{{ url_for('admin.toggle_admin', user_id=user.id) }}" style="display:inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="text-xs text-slate-400 hover:text-gold-400 transition">{{ 'إزالة Admin' if user.is_admin else 'منح Admin' }}</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if pagination.pages > 1 %}
    <div class="flex justify-center gap-2 mt-6">
        {% for p in pagination.iter_pages() %}
            {% if p %}
                <a href="{{ url_for('admin.users', page=p, q=q) }}" class="px-3 py-2 rounded-lg text-sm {% if p == pagination.page %}bg-gold-500 text-black font-bold{% else %}text-slate-400 hover:text-white bg-white/5{% endif %} transition">{{ p }}</a>
            {% else %}
                <span class="text-slate-600 px-2">...</span>
            {% endif %}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}