{% extends "base.html" %}
{% block title %}User Manager{% endblock %}

{% block content %}
<div class="space-y-6" x-data="userManager()">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">User Manager</h1>
            <p class="mt-1 text-sm text-gray-400">Kelola user, approve/reject registrasi</p>
        </div>
        <a href="/admin/" class="text-xs text-gray-500 hover:text-gray-300 transition">
            &larr; Dashboard
        </a>
    </div>

    <!-- Status Filter Tabs -->
    <div class="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
        <a href="/admin/users"
           class="shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition
                  {% if status_filter == 'all' %}bg-gray-700 text-white{% else %}bg-gray-900 text-gray-400 hover:text-white hover:bg-gray-800{% endif %}">
            Semua
        </a>
        <a href="/admin/users?status=pending"
           class="shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition
                  {% if status_filter == 'pending' %}bg-amber-900/60 text-amber-300 border border-amber-700/50{% else %}bg-gray-900 text-gray-400 hover:text-white hover:bg-gray-800{% endif %}">
            Pending
            {% if pending_count and pending_count > 0 %}
            <span class="ml-1 px-1.5 py-0.5 bg-amber-600 text-white text-xs rounded-full">{{ pending_count }}</span>
            {% endif %}
        </a>
        <a href="/admin/users?status=active"
           class="shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition
                  {% if status_filter == 'active' %}bg-emerald-900/60 text-emerald-300 border border-emerald-700/50{% else %}bg-gray-900 text-gray-400 hover:text-white hover:bg-gray-800{% endif %}">
            Active
        </a>
        <a href="/admin/users?status=disabled"
           class="shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition
                  {% if status_filter == 'disabled' %}bg-red-900/60 text-red-300 border border-red-700/50{% else %}bg-gray-900 text-gray-400 hover:text-white hover:bg-gray-800{% endif %}">
            Disabled
        </a>
    </div>

    <!-- User List -->
    {% if users|length == 0 %}
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-8 text-center">
        <svg class="w-10 h-10 text-gray-600 mx-auto mb-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
        </svg>
        <p class="text-gray-500 text-sm">Tidak ada user dengan filter ini</p>
    </div>
    {% else %}
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <!-- Desktop Table -->
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-800">
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">User</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Email</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Status</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Markets</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Registered</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Last Login</th>
                        <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    {% for user in users %}
                    <tr class="hover:bg-gray-800/50 transition" id="user-row-{{ user.id }}">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-white uppercase">
                                    {{ user.username[:2] }}
                                </div>
                                <div>
                                    <p class="text-white font-medium">{{ user.display_name or user.username }}</p>
                                    <p class="text-xs text-gray-500">@{{ user.username }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-400">{{ user.email }}</td>
                        <td class="px-4 py-3">
                            <span id="status-badge-{{ user.id }}">
                                {% if not user.is_active %}
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-400 border border-red-800/50">
                                    <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>
                                    Disabled
                                </span>
                                {% elif not user.is_approved %}
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-900/50 text-amber-400 border border-amber-800/50">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
                                    Pending
                                </span>
                                {% else %}
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-900/50 text-emerald-400 border border-emerald-800/50">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                                    Active
                                </span>
                                {% endif %}
                            </span>
                        </td>
                        <!-- Market Access Toggles -->
                        <td class="px-4 py-3">
                            <div class="flex gap-1" id="markets-{{ user.id }}">
                                {% set um = user_markets.get(user.id, ['stock']) %}
                                <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-sky-900/60 text-sky-300 border border-sky-800/50">IDX</span>
                                <button @click="toggleMarket({{ user.id }}, 'stock_us', {{ 'true' if 'stock_us' in um else 'false' }})"
                                    class="px-1.5 py-0.5 rounded text-[10px] font-medium transition cursor-pointer
                                        {{ 'bg-violet-900/60 text-violet-300 border border-violet-800/50' if 'stock_us' in um else 'bg-gray-800 text-gray-600 border border-gray-700 hover:border-violet-700' }}">
                                    US
                                </button>
                                <button @click="toggleMarket({{ user.id }}, 'crypto', {{ 'true' if 'crypto' in um else 'false' }})"
                                    class="px-1.5 py-0.5 rounded text-[10px] font-medium transition cursor-pointer
                                        {{ 'bg-amber-900/60 text-amber-300 border border-amber-800/50' if 'crypto' in um else 'bg-gray-800 text-gray-600 border border-gray-700 hover:border-amber-700' }}">
                                    Crypto
                                </button>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-400 text-xs">
                            {{ user.created_at.strftime('%d %b %Y, %H:%M') if user.created_at else '-' }}
                        </td>
                        <td class="px-4 py-3 text-gray-400 text-xs">
                            {{ user.last_login.strftime('%d %b %Y, %H:%M') if user.last_login else 'Belum pernah' }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex items-center justify-end gap-2" id="actions-{{ user.id }}">
                                {% if not user.is_approved and user.is_active %}
                                <!-- Pending: Approve -->
                                <button @click="approveUser({{ user.id }}, '{{ user.username }}')"
                                        class="px-3 py-1.5 text-xs font-medium bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition">
                                    Approve
                                </button>
                                <button @click="disableUser({{ user.id }}, '{{ user.username }}')"
                                        class="px-3 py-1.5 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition">
                                    Reject
                                </button>
                                {% elif user.is_active %}
                                <!-- Active: Disable -->
                                <button @click="disableUser({{ user.id }}, '{{ user.username }}')"
                                        class="px-3 py-1.5 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition">
                                    Disable
                                </button>
                                {% else %}
                                <!-- Disabled: Enable -->
                                <button @click="enableUser({{ user.id }}, '{{ user.username }}')"
                                        class="px-3 py-1.5 text-xs font-medium bg-gray-700 hover:bg-emerald-600 text-gray-300 hover:text-white rounded-lg transition">
                                    Enable
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Mobile Cards -->
        <div class="md:hidden divide-y divide-gray-800">
            {% for user in users %}
            <div class="p-4 space-y-3" id="user-card-{{ user.id }}">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-white uppercase">
                            {{ user.username[:2] }}
                        </div>
                        <div>
                            <p class="text-white font-medium text-sm">{{ user.display_name or user.username }}</p>
                            <p class="text-xs text-gray-500">{{ user.email }}</p>
                        </div>
                    </div>
                    <span id="m-status-{{ user.id }}">
                        {% if not user.is_active %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-400">Disabled</span>
                        {% elif not user.is_approved %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-900/50 text-amber-400">Pending</span>
                        {% else %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-900/50 text-emerald-400">Active</span>
                        {% endif %}
                    </span>
                </div>
                <div class="flex items-center justify-between text-xs text-gray-500">
                    <span>Registered {{ user.created_at.strftime('%d %b %Y') if user.created_at else '-' }}</span>
                    <span>Login {{ user.last_login.strftime('%d %b %Y') if user.last_login else 'never' }}</span>
                </div>
                <!-- Mobile Market Access -->
                <div class="flex items-center gap-2" id="m-markets-{{ user.id }}">
                    <span class="text-[10px] text-gray-500 uppercase font-medium">Markets:</span>
                    {% set um = user_markets.get(user.id, ['stock']) %}
                    <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-sky-900/60 text-sky-300 border border-sky-800/50">IDX</span>
                    <button @click="toggleMarket({{ user.id }}, 'stock_us', {{ 'true' if 'stock_us' in um else 'false' }})"
                        class="px-1.5 py-0.5 rounded text-[10px] font-medium transition
                            {{ 'bg-violet-900/60 text-violet-300 border border-violet-800/50' if 'stock_us' in um else 'bg-gray-800 text-gray-600 border border-gray-700' }}">
                        US
                    </button>
                    <button @click="toggleMarket({{ user.id }}, 'crypto', {{ 'true' if 'crypto' in um else 'false' }})"
                        class="px-1.5 py-0.5 rounded text-[10px] font-medium transition
                            {{ 'bg-amber-900/60 text-amber-300 border border-amber-800/50' if 'crypto' in um else 'bg-gray-800 text-gray-600 border border-gray-700' }}">
                        Crypto
                    </button>
                </div>
                <div class="flex gap-2" id="m-actions-{{ user.id }}">
                    {% if not user.is_approved and user.is_active %}
                    <button @click="approveUser({{ user.id }}, '{{ user.username }}')"
                            class="flex-1 px-3 py-2 text-xs font-medium bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition text-center">
                        Approve
                    </button>
                    <button @click="disableUser({{ user.id }}, '{{ user.username }}')"
                            class="flex-1 px-3 py-2 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition text-center">
                        Reject
                    </button>
                    {% elif user.is_active %}
                    <button @click="disableUser({{ user.id }}, '{{ user.username }}')"
                            class="flex-1 px-3 py-2 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition text-center">
                        Disable
                    </button>
                    {% else %}
                    <button @click="enableUser({{ user.id }}, '{{ user.username }}')"
                            class="flex-1 px-3 py-2 text-xs font-medium bg-gray-700 hover:bg-emerald-600 text-gray-300 hover:text-white rounded-lg transition text-center">
                        Enable
                    </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <p class="text-xs text-gray-600 text-center">{{ users|length }} user ditampilkan</p>
    {% endif %}

    <!-- Toast Notification -->
    <div x-show="toast.show" x-transition
         class="fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl shadow-lg border text-sm font-medium"
         :class="toast.type === 'success' ? 'bg-emerald-900/90 border-emerald-700 text-emerald-300'
                                            : 'bg-red-900/90 border-red-700 text-red-300'"
         x-text="toast.message"
         @click="toast.show = false">
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function userManager() {
    return {
        toast: { show: false, message: '', type: 'success' },

        showToast(message, type = 'success') {
            this.toast = { show: true, message, type };
            setTimeout(() => this.toast.show = false, 3000);
        },

        async approveUser(userId, username) {
            if (!confirm(`Approve user "${username}"?`)) return;

            try {
                const res = await fetch(`/api/v1/admin/users/${userId}/approve`, { method: 'POST' });
                const data = await res.json();
                if (res.ok) {
                    this.showToast(`User "${username}" berhasil di-approve`);
                    // Update status badge + actions
                    this.updateRowStatus(userId, 'active');
                } else {
                    this.showToast(data.error || 'Gagal approve user', 'error');
                }
            } catch (e) {
                this.showToast('Network error', 'error');
            }
        },

        async disableUser(userId, username) {
            if (!confirm(`Disable user "${username}"? User tidak akan bisa login.`)) return;

            try {
                const res = await fetch(`/api/v1/admin/users/${userId}/disable`, { method: 'POST' });
                const data = await res.json();
                if (res.ok) {
                    this.showToast(`User "${username}" berhasil di-disable`);
                    this.updateRowStatus(userId, 'disabled');
                } else {
                    this.showToast(data.error || 'Gagal disable user', 'error');
                }
            } catch (e) {
                this.showToast('Network error', 'error');
            }
        },

        async enableUser(userId, username) {
            if (!confirm(`Enable user "${username}"?`)) return;

            try {
                const res = await fetch(`/api/v1/admin/users/${userId}/enable`, { method: 'POST' });
                const data = await res.json();
                if (res.ok) {
                    this.showToast(`User "${username}" berhasil di-enable`);
                    this.updateRowStatus(userId, 'active');
                } else {
                    this.showToast(data.error || 'Gagal enable user', 'error');
                }
            } catch (e) {
                this.showToast('Network error', 'error');
            }
        },

        async toggleMarket(userId, market, currentlyEnabled) {
            // First get current markets
            try {
                const getRes = await fetch(`/api/v1/admin/users/${userId}/allowed-markets`);
                const getData = await getRes.json();
                let markets = getData.allowed_markets || ['stock'];

                // Toggle the market
                if (currentlyEnabled) {
                    markets = markets.filter(m => m !== market);
                } else {
                    markets.push(market);
                }

                // Save
                const res = await fetch(`/api/v1/admin/users/${userId}/allowed-markets`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ markets })
                });
                const data = await res.json();
                if (res.ok) {
                    const labels = { stock_us: 'Saham US', crypto: 'Crypto' };
                    const action = currentlyEnabled ? 'dinonaktifkan' : 'diaktifkan';
                    this.showToast(`${labels[market] || market} ${action} untuk user`);
                    // Reload page to refresh toggle state
                    location.reload();
                } else {
                    this.showToast(data.error || 'Gagal update market access', 'error');
                }
            } catch (e) {
                this.showToast('Network error', 'error');
            }
        },

        updateRowStatus(userId, newStatus) {
            // Update desktop badge
            const badge = document.getElementById(`status-badge-${userId}`);
            if (badge) {
                if (newStatus === 'active') {
                    badge.innerHTML = `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-900/50 text-emerald-400 border border-emerald-800/50"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>Active</span>`;
                } else {
                    badge.innerHTML = `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-400 border border-red-800/50"><span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>Disabled</span>`;
                }
            }

            // Update mobile badge
            const mBadge = document.getElementById(`m-status-${userId}`);
            if (mBadge) {
                if (newStatus === 'active') {
                    mBadge.innerHTML = `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-900/50 text-emerald-400">Active</span>`;
                } else {
                    mBadge.innerHTML = `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-400">Disabled</span>`;
                }
            }

            // Update desktop actions
            const actions = document.getElementById(`actions-${userId}`);
            if (actions) {
                if (newStatus === 'active') {
                    actions.innerHTML = `<button @click="disableUser(${userId}, '')" class="px-3 py-1.5 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition">Disable</button>`;
                } else {
                    actions.innerHTML = `<button @click="enableUser(${userId}, '')" class="px-3 py-1.5 text-xs font-medium bg-gray-700 hover:bg-emerald-600 text-gray-300 hover:text-white rounded-lg transition">Enable</button>`;
                }
            }

            // Update mobile actions
            const mActions = document.getElementById(`m-actions-${userId}`);
            if (mActions) {
                if (newStatus === 'active') {
                    mActions.innerHTML = `<button @click="disableUser(${userId}, '')" class="flex-1 px-3 py-2 text-xs font-medium bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white rounded-lg transition text-center">Disable</button>`;
                } else {
                    mActions.innerHTML = `<button @click="enableUser(${userId}, '')" class="flex-1 px-3 py-2 text-xs font-medium bg-gray-700 hover:bg-emerald-600 text-gray-300 hover:text-white rounded-lg transition text-center">Enable</button>`;
                }
            }
        }
    };
}
</script>
{% endblock %}