{% 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('campaigns.dashboard') }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; الحملات</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
        {% for platform in ['youtube', 'tiktok', 'facebook', 'instagram', 'twitter', 'snapchat'] %}
        {% set connected = accounts | selectattr('platform', 'equalto', platform) | list %}
        <div class="glass p-6 rounded-2xl {% if connected %}border border-emerald-500/30{% else %}border border-white/10{% endif %}">
            <div class="flex items-center justify-between mb-3">
                <span class="text-white font-bold capitalize">{{ platform }}</span>
                {% if connected %}
                <span class="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full">Connected</span>
                {% endif %}
            </div>
            {% if connected %}
            <p class="text-xs text-slate-400">{{ connected[0].platform_username or 'Connected' }}</p>
            {% else %}
            <a href="{{ url_for('campaigns.oauth_start', platform=platform) }}" class="inline-block mt-2 bg-white/10 text-white px-4 py-2 rounded-lg text-xs hover:bg-white/20 transition">Connect</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <h2 class="text-xl font-serif font-bold text-white mb-4">WhatsApp (Evolution API)</h2>
    <div class="glass p-6 rounded-2xl">
        {% if wa_instances %}
        <div class="space-y-3">
            {% for inst in wa_instances %}
            <div class="flex items-center justify-between p-4 bg-black/20 rounded-xl">
                <div>
                    <div class="text-white font-medium">{{ inst.instance_name }}</div>
                    <div class="text-xs text-slate-400">{{ inst.phone_number or 'N/A' }} | {{ inst.status }}</div>
                </div>
                <span class="text-xs px-2 py-1 rounded-full {% if inst.status == 'connected' %}bg-emerald-500/20 text-emerald-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ inst.status }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-slate-400">لا توجد حسابات واتساب. قم بتكوين Evolution API من الإعدادات.</p>
        {% endif %}
    </div>
</div>
{% endblock %}