// ============================================================
// Admin Panel — Main Controller
// ============================================================

const token = localStorage.getItem('adminToken') || localStorage.getItem('token');
if (!token) window.location.href = 'admin-login.html';

const BASE = window.API_URL || 'https://wassili.site';
const headers = () => ({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' });

// ✅ Format numbers in English (not Arabic ٠١٢٣)
function fmtNum(n) { return Number(n || 0).toLocaleString('en'); }

// ── State ──
let allOrders = [];
let allUsers = [];
let allCaptains = [];
let notifications = [];
let gvMap = null;
let miniMapInstance = null;
let captainMarkers = {};
let currentPage = 'overview';

// ── Browser Push Notifications (Notification API) ──
// Works even when the tab is in the background — no Firebase Web SDK needed!
function requestBrowserNotifPermission() {
    if (!('Notification' in window)) return;
    if (Notification.permission === 'default') {
        Notification.requestPermission().then(p =>
            console.log('[Admin] Notification permission:', p)
        );
    }
}

function showBrowserNotif(title, body, orderId) {
    if (!('Notification' in window) || Notification.permission !== 'granted') return;
    try {
        const notif = new Notification(title, {
            body,
            icon: '/icons/icon-192x192.png',
            badge: '/icons/icon-192x192.png',
            tag: orderId ? `order-${orderId}` : 'admin-alert',  // prevents duplicates
            renotify: true,
            requireInteraction: false
        });
        // Click → focus the admin tab
        notif.onclick = () => {
            window.focus();
            notif.close();
            if (orderId) viewOrder(orderId);
        };
        // Auto-close after 8 seconds
        setTimeout(() => notif.close(), 8000);
    } catch(e) { console.warn('[Admin] Browser notif failed:', e); }
}

// ── Socket.io ──
const socket = io(BASE, { transports: ['polling', 'websocket'], reconnection: true, reconnectionDelay: 2000 });

// Request notification permission as soon as the page loads
document.addEventListener('DOMContentLoaded', requestBrowserNotifPermission);

socket.on('connect', () => {
    console.log('✅ Admin Socket connected:', socket.id);
    socket.emit('admin_join');
    // Join admin's personal room for targeted notifications
    socket.emit('user_join', getAdminId());
});

// Listen for new orders (emitted to all)
socket.on('new_order_available', (data) => {
    const msg = `طلب توصيل جديد بسعر ${data.price || '?'} ج.س`;
    showToast(`🆕 طلب جديد — ${data.pickup || 'طلب'} | ${data.price || ''} ج.س`);
    addNotification('طلب جديد', msg, data.orderId);
    showBrowserNotif('🚨 طلب توصيل جديد!', msg, data.orderId);  // ← browser notif
    document.getElementById('ordersBadge').style.display = 'block';
    if (currentPage === 'overview') { loadLiveOrders(); loadDashboard(); }
    if (currentPage === 'orders') loadAllOrders();
    playNotifSound();
});

// Shop orders
socket.on('shop_order_available', (data) => {
    const msg = `${data.shopName || 'محل'} — ${data.price || '?'} ج.س`;
    showToast(`🛒 طلب محل — ${data.shopName || '?'} | ${data.price || ''} ج.س`);
    addNotification('طلب محل جديد', msg, data.orderId);
    showBrowserNotif('🛒 طلب محل جديد!', msg, data.orderId);   // ← browser notif
    document.getElementById('ordersBadge').style.display = 'block';
    if (currentPage === 'overview') { loadLiveOrders(); loadDashboard(); }
    if (currentPage === 'orders') loadAllOrders();
    playNotifSound();
});

// Order status changes
socket.on('order_status_updated', () => {
    if (currentPage === 'overview') { loadLiveOrders(); loadDashboard(); }
    if (currentPage === 'orders') loadAllOrders();
});

// Admin-specific order updates from backend
socket.on('admin_order_update', (data) => {
    if (currentPage === 'overview') { loadLiveOrders(); loadDashboard(); }
    if (currentPage === 'orders') loadAllOrders();
});

// Captain location updates for map — ✅ Real-time marker movement
socket.on('captain_location_update', (data) => {
    const id = data.captainId || data.userId;
    if (!id || !data.lat || !data.lng) return;

    const status = data.status === 'offline' ? 'offline' : 'available';
    // الرقم يكون في الـ payload لو أُرسل، أو نحتفظ بالموجود في الـ marker
    const phone = data.phone || captainMarkers[id]?.data?.phone || '';

    // Update on whichever map is active
    if (gvMap) {
        updateCaptainMarkerOnMap(gvMap, id, data.lat, data.lng, data.name || 'كابتن', status, phone);
    }
    if (miniMapInstance) {
        updateCaptainMarkerOnMap(miniMapInstance, id, data.lat, data.lng, data.name || 'كابتن', status, phone);
    }
    updateMapCounter();
});

// ✅ Real-time: refresh captains page when a new captain registers or status changes
socket.on('user_status', () => {
    if (currentPage === 'captains') loadCaptains();
});

// New notification from server (admin-specific via admin's socket room)
socket.on('new_notification', (data) => {
    if (data && data.title) {
        addNotification(data.title, data.message || '', null);
        showToast(data.title);
        playNotifSound();
    }
});

// ── Helpers ──
function getAdminId() {
    try {
        const user = JSON.parse(localStorage.getItem('user') || '{}');
        return user._id || '';
    } catch(e) { return ''; }
}

function timeAgo(date) {
    const diff = (Date.now() - new Date(date).getTime()) / 1000;
    if (diff < 60) return 'الآن';
    if (diff < 3600) return Math.floor(diff/60) + ' د';
    if (diff < 86400) return Math.floor(diff/3600) + ' س';
    return Math.floor(diff/86400) + ' ي';
}

const STATUS_LABELS = {
    pending: 'قيد الانتظار',
    scheduled: 'مجدول',
    accepted: 'مقبول',
    picked_up: 'قيد التوصيل',
    delivered: 'مكتمل',
    cancelled: 'ملغي'
};

function statusLabel(s) { return STATUS_LABELS[s] || s; }

function showToast(text) {
    const toast = document.getElementById('gvToast');
    document.getElementById('gvToastText').textContent = text;
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 4000);
}

function playNotifSound() {
    try {
        const audio = new Audio('/sounds/wassili-bell.wav');
        audio.volume = 0.6;
        audio.play().catch(()=>{});
    } catch(e) {}
}

// Sort helper — newest first
function sortByNewest(arr) {
    return [...arr].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
}

// ── Notifications ──
function addNotification(title, message, orderId) {
    notifications.unshift({ title, message, orderId, time: new Date(), unread: true });
    if (notifications.length > 100) notifications.pop();
    updateNotifCount();
    renderNotifications();
}

function updateNotifCount() {
    const count = notifications.filter(n => n.unread).length;
    const el = document.getElementById('notifCount');
    if (count > 0) { el.textContent = count > 99 ? '99+' : count; el.style.display = 'flex'; }
    else { el.style.display = 'none'; }
}

function renderNotifications() {
    const list = document.getElementById('notifList');
    if (notifications.length === 0) {
        list.innerHTML = '<div class="gv-empty"><i class="fas fa-bell-slash"></i><p>لا توجد إشعارات</p></div>';
        return;
    }
    list.innerHTML = notifications.slice(0, 50).map(n => `
        <div class="gv-notif-item ${n.unread ? 'unread' : ''}" ${n.orderId ? `onclick="viewOrder('${n.orderId}')"` : ''}>
            <h5>${window.escapeHtml(n.title)}</h5>
            <p>${window.escapeHtml(n.message)}</p>
            <div class="time">${timeAgo(n.time)}</div>
        </div>
    `).join('');
}

function toggleNotifPanel(open) {
    document.getElementById('notifPanel').classList.toggle('open', open);
    document.getElementById('notifOverlay').classList.toggle('show', open);
    if (open) { notifications.forEach(n => n.unread = false); updateNotifCount(); renderNotifications(); }
}

// ── Page Navigation ──
function switchPage(page) {
    currentPage = page;
    document.querySelectorAll('.gv-page').forEach(p => p.classList.remove('active'));
    const pageEl = document.getElementById('page-' + page);
    if (pageEl) pageEl.classList.add('active');
    document.querySelectorAll('.gv-nav-item').forEach(b => b.classList.remove('active'));
    const navBtn = document.querySelector(`.gv-nav-item[data-page="${page}"]`);
    if (navBtn) navBtn.classList.add('active');

    const titles = {
        overview: 'نظرة عامة', orders: 'الطلبات', livemap: 'الخريطة الحية',
        users: 'المستخدمين', captains: 'الكباتن', broadcast: 'إرسال إشعار'
    };
    document.getElementById('pageTitle').textContent = titles[page] || page;

    // Load data for page
    if (page === 'overview') loadDashboard();
    if (page === 'orders') loadAllOrders();
    if (page === 'livemap') initFullMap();
    if (page === 'users') loadUsers();
    if (page === 'captains') loadCaptains();

    // Hide badges
    if (page === 'orders') document.getElementById('ordersBadge').style.display = 'none';
    if (page === 'captains') document.getElementById('captainsBadge').style.display = 'none';

    // Close mobile sidebar
    document.getElementById('gvSidebar').classList.remove('mobile-open');
}

async function refreshCurrentPage() {
    const btn = document.querySelector('.gv-topbar-btn[onclick="refreshCurrentPage()"]');
    const icon = btn ? btn.querySelector('i') : null;

    // 1. Spin the icon and disable button
    if (icon) {
        icon.classList.add('fa-spin');
        btn.disabled = true;
        btn.style.opacity = '0.6';
    }

    try {
        // 2. Refresh ONLY the data for the current page (no full page reload)
        const refreshTasks = [];

        if (currentPage === 'overview') {
            refreshTasks.push(loadDashboard(), loadLiveOrders(), loadOnlineCaptainsCount());
        } else if (currentPage === 'orders') {
            refreshTasks.push(loadAllOrders());
        } else if (currentPage === 'livemap') {
            refreshTasks.push(refreshMapCaptains());
        } else if (currentPage === 'captains') {
            refreshTasks.push(loadCaptains());
        } else if (currentPage === 'users') {
            refreshTasks.push(loadUsers());
        }

        await Promise.all(refreshTasks);

        // 3. Success feedback
        showToast('✅ تم التحديث');
    } catch (e) {
        console.error('Refresh error:', e);
        showToast('⚠️ فشل التحديث — حاول مرة أخرى');
    } finally {
                // 4. Stop spinning
        if (icon) {
            icon.classList.remove('fa-spin');
            btn.disabled = false;
            btn.style.opacity = '1';
        }
    }
}

function toggleMobileSidebar() {
    document.getElementById('gvSidebar').classList.toggle('mobile-open');
}

// ── Dashboard / Overview ──
async function loadDashboard() {
    try {
        const res = await fetch(`${BASE}/api/admin/dashboard`, { headers: headers() });
        if (!res.ok) throw new Error('Failed');
        const data = await res.json();

        document.getElementById('stat-clients').textContent = fmtNum(data.stats.customers);
        document.getElementById('stat-captains').textContent = fmtNum(data.stats.captains);
        document.getElementById('stat-orders').textContent = fmtNum(data.stats.orders);
        document.getElementById('stat-revenue').textContent = fmtNum(data.stats.revenue) + ' ج.س';

        renderStatusBar(data.ordersByStatus || {});
    } catch(e) { console.error('Dashboard error:', e); }

    loadLiveOrders();
    loadOnlineCaptainsCount();
    initMiniMap();
}

function renderStatusBar(counts) {
    const order = ['pending', 'scheduled', 'accepted', 'picked_up', 'delivered', 'cancelled'];
    const total = order.reduce((sum, k) => sum + (counts[k] || 0), 0);

    const bar = document.getElementById('statusBar');
    if (total === 0) {
        bar.innerHTML = '<div class="gv-empty"><i class="fas fa-chart-bar"></i><p>لا توجد طلبات بعد</p></div>';
        return;
    }

    bar.innerHTML = order.map(status => {
        const count = counts[status] || 0;
        const percent = total > 0 ? (count / total * 100) : 0;
        return `
            <div class="gv-status-bar-row">
                <div class="gv-status-bar-label">
                    <div class="dot gv-color-${status}"></div>
                    <span>${statusLabel(status)}</span>
                </div>
                <div class="gv-status-bar-progress">
                    <div class="gv-status-bar-fill gv-color-${status}" style="width:${percent}%;"></div>
                </div>
                <div class="gv-status-bar-count">${fmtNum(count)}</div>
                <div class="gv-status-bar-percent">${percent.toFixed(1)}%</div>
            </div>
        `;
    }).join('');
}

async function loadOnlineCaptainsCount() {
    try {
        const res = await fetch(`${BASE}/api/admin/active-captains`, { headers: headers() });
        if (!res.ok) return;
        const captains = await res.json();
        const online = captains.filter(c => c.isActive && c.currentLocation && c.currentLocation.lat).length;
        document.getElementById('stat-online').textContent = online;
    } catch(e) {}
}

async function loadLiveOrders() {
    try {
        const res = await fetch(`${BASE}/api/admin/orders/live`, { headers: headers() });
        if (!res.ok) throw new Error('Failed');
        let live = await res.json();

        const feed = document.getElementById('liveOrdersFeed');
        const counter = document.getElementById('liveOrdersCount');
        if (counter) counter.textContent = `${live.length} طلب`;

        if (live.length === 0) {
            feed.innerHTML = '<div class="gv-empty"><i class="fas fa-inbox"></i><p>لا توجد طلبات نشطة</p></div>';
            return;
        }

        feed.innerHTML = live.slice(0, 30).map(o => `
            <div class="gv-order-item" onclick="viewOrder('${o._id}')">
                <div class="gv-order-status ${o.status}"></div>
                <div class="gv-order-info">
                    <h5>${window.escapeHtml(o.client?.name || 'عميل')} ${o.captain ? '← ' + window.escapeHtml(o.captain.name) : ''}</h5>
                    <p>${window.escapeHtml(o.pickup?.address || '?')} → ${window.escapeHtml(o.dropoff?.address || '?')}</p>
                </div>
                <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
                    <span class="gv-badge ${o.status}">${statusLabel(o.status)}</span>
                    <div class="gv-order-price">${o.price} ج.س</div>
                </div>
            </div>
        `).join('');
    } catch(e) {
        console.error('Live orders error:', e);
    }
}

// ── All Orders ──
async function loadAllOrders() {
    try {
        const res = await fetch(`${BASE}/api/admin/orders`, { headers: headers() });
        if (!res.ok) throw new Error('Failed');
        allOrders = sortByNewest(await res.json()); // ✅ newest first
        renderAllOrders(allOrders);
    } catch(e) { console.error(e); }
}

function filterOrders() {
    const status = document.getElementById('orderStatusFilter').value;
    const q = (document.getElementById('orderSearch').value || '').toLowerCase().trim();

    let filtered = allOrders;
    if (status !== 'all') filtered = filtered.filter(o => o.status === status);
    if (q) {
        filtered = filtered.filter(o =>
            (o.client?.name || '').toLowerCase().includes(q) ||
            (o.captain?.name || '').toLowerCase().includes(q) ||
            (o.pickup?.address || '').toLowerCase().includes(q) ||
            (o.dropoff?.address || '').toLowerCase().includes(q) ||
            String(o.price).includes(q)
        );
    }
    renderAllOrders(filtered);
}

function renderAllOrders(orders) {
    const body = document.getElementById('allOrdersBody');
    if (!orders.length) {
        body.innerHTML = '<tr><td colspan="8"><div class="gv-empty"><i class="fas fa-inbox"></i><p>لا توجد طلبات</p></div></td></tr>';
        return;
    }
    body.innerHTML = orders.slice(0, 200).map(o => `
        <tr onclick="viewOrder('${o._id}')" style="cursor:pointer;">
            <td style="font-weight:700;">${window.escapeHtml(o.client?.name || '—')}</td>
            <td>${o.captain ? window.escapeHtml(o.captain.name) : '<span style="color:#94a3b8;">—</span>'}</td>
            <td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;">${window.escapeHtml(o.pickup?.address || '?')}</td>
            <td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;">${window.escapeHtml(o.dropoff?.address || '?')}</td>
            <td style="font-weight:700;color:var(--gv-success);white-space:nowrap;">${o.price} ج.س</td>
            <td><span class="gv-badge ${o.status}">${statusLabel(o.status)}</span></td>
            <td style="font-size:12px;color:var(--gv-dark-2);white-space:nowrap;">${timeAgo(o.createdAt)}</td>
            <td><button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="event.stopPropagation();viewOrder('${o._id}')" title="تفاصيل"><i class="fas fa-eye"></i></button></td>
        </tr>
    `).join('');
}

function viewOrder(orderId) {
    window.open(`admin-order-details.html?id=${orderId}`, '_blank');
}

// ── Users ──
async function loadUsers() {
    try {
        const res = await fetch(`${BASE}/api/admin/users`, { headers: headers() });
        if (!res.ok) throw new Error('Failed');
        allUsers = sortByNewest(await res.json());
        renderUsers(allUsers);
    } catch(e) { console.error(e); }
}

function filterUsers() {
    const q = document.getElementById('userSearch').value.toLowerCase();
    const filtered = allUsers.filter(u =>
        (u.name || '').toLowerCase().includes(q) ||
        (u.phone || '').includes(q) ||
        (u.email || '').toLowerCase().includes(q)
    );
    renderUsers(filtered);
}

function renderUsers(users) {
    const body = document.getElementById('usersBody');
    if (!users.length) {
        body.innerHTML = '<tr><td colspan="5"><div class="gv-empty"><p>لا يوجد مستخدمين</p></div></td></tr>';
        return;
    }
    const roleMap = { client: 'عميل', captain: 'كابتن', merchant: 'تاجر', admin: 'مدير' };
    const roleBadge = { client: 'delivered', captain: 'pending', merchant: 'picked_up', admin: 'accepted' };
    body.innerHTML = users.slice(0, 300).map(u => `
        <tr>
            <td style="font-weight:700;">${window.escapeHtml(u.name || '—')}</td>
            <td dir="ltr" style="font-size:13px;">${window.escapeHtml(u.phone || '—')}</td>
            <td><span class="gv-badge ${roleBadge[u.role] || 'pending'}">${roleMap[u.role] || u.role}</span></td>
            <td>${u.isActive ? '<span style="color:var(--gv-success);font-weight:700;">● نشط</span>' : '<span style="color:var(--gv-danger);font-weight:700;">○ معطل</span>'}</td>
            <td style="white-space:nowrap;">
                <button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="editUser('${u._id}')" title="تعديل">
                    <i class="fas fa-pen"></i>
                </button>
                <button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="toggleUserStatus('${u._id}')" title="${u.isActive ? 'تعطيل' : 'تفعيل'}">
                    <i class="fas fa-${u.isActive ? 'ban' : 'check'}"></i>
                </button>
                <button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="deleteUser('${u._id}')" title="حذف" style="color:var(--gv-danger);">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');
}

async function toggleUserStatus(userId) {
    try {
        await fetch(`${BASE}/api/admin/user/${userId}/status`, { method: 'PUT', headers: headers() });
        loadUsers();
        showToast('تم تحديث حالة المستخدم');
    } catch(e) { console.error(e); }
}

async function deleteUser(userId) {
    const result = await Swal.fire({
        title: 'حذف المستخدم؟', text: 'لا يمكن التراجع',
        icon: 'warning', showCancelButton: true, confirmButtonText: 'احذف', cancelButtonText: 'إلغاء',
        confirmButtonColor: '#ef4444'
    });
    if (!result.isConfirmed) return;
    try {
        await fetch(`${BASE}/api/admin/users/${userId}`, { method: 'DELETE', headers: headers() });
        loadUsers();
        showToast('تم الحذف');
    } catch(e) { console.error(e); }
}

// ✅ Edit User Modal
async function editUser(userId) {
    // Fetch user data
    let user;
    try {
        const res = await fetch(`${BASE}/api/admin/user/${userId}`, { headers: headers() });
        if (!res.ok) throw new Error('Failed');
        user = await res.json();
    } catch(e) { Swal.fire('خطأ', 'فشل جلب بيانات المستخدم', 'error'); return; }

    const vehicleOptions = user.role === 'captain' ? `
        <label style="display:block;text-align:right;font-weight:700;margin-top:8px;font-size:13px;">نوع المركبة</label>
        <select id="swal-vehicle" class="swal2-select" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-family:inherit;">
            <option value="motorcycle" ${user.vehicleType === 'motorcycle' ? 'selected' : ''}>🏍️ موتر</option>
            <option value="electric" ${user.vehicleType === 'electric' ? 'selected' : ''}>⚡ موتر كهربائي</option>
            <option value="bicycle" ${user.vehicleType === 'bicycle' ? 'selected' : ''}>🚲 عجلة هوائية</option>
        </select>
    ` : '';

    const { isConfirmed, value } = await Swal.fire({
        title: 'تعديل المستخدم',
        html: `
            <input id="swal-name" class="swal2-input" placeholder="الاسم" value="${user.name || ''}">
            <input id="swal-email" class="swal2-input" placeholder="البريد" type="email" value="${user.email || ''}">
            <input id="swal-phone" class="swal2-input" placeholder="الهاتف" dir="ltr" value="${user.phone || ''}">
            <label style="display:block;text-align:right;font-weight:700;margin-top:8px;font-size:13px;">الدور</label>
            <select id="swal-role" class="swal2-select" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-family:inherit;">
                <option value="client" ${user.role === 'client' ? 'selected' : ''}>عميل</option>
                <option value="captain" ${user.role === 'captain' ? 'selected' : ''}>كابتن</option>
                <option value="merchant" ${user.role === 'merchant' ? 'selected' : ''}>تاجر</option>
                <option value="admin" ${user.role === 'admin' ? 'selected' : ''}>مدير</option>
            </select>
            ${vehicleOptions}
            <input id="swal-pass" class="swal2-input" placeholder="كلمة مرور جديدة (اختياري)" type="password">
        `,
        confirmButtonText: 'حفظ', showCancelButton: true, cancelButtonText: 'إلغاء',
        preConfirm: () => {
            const data = {
                name: document.getElementById('swal-name').value,
                email: document.getElementById('swal-email').value,
                phone: document.getElementById('swal-phone').value,
                role: document.getElementById('swal-role').value,
            };
            const passEl = document.getElementById('swal-pass');
            if (passEl && passEl.value) data.password = passEl.value;
            const vehicleEl = document.getElementById('swal-vehicle');
            if (vehicleEl) data.vehicleType = vehicleEl.value;
            return data;
        }
    });

    if (!isConfirmed) return;
    try {
        const res = await fetch(`${BASE}/api/admin/users/${userId}`, {
            method: 'PUT', headers: headers(), body: JSON.stringify(value)
        });
        const data = await res.json();
        if (res.ok) { showToast('✅ تم التحديث'); loadUsers(); loadCaptains(); }
        else Swal.fire('خطأ', data.message, 'error');
    } catch(e) { Swal.fire('خطأ', 'فشل الاتصال', 'error'); }
}

// ── Captains ──
async function loadCaptains() {
    try {
        const [captainsRes, pendingRes] = await Promise.all([
            fetch(`${BASE}/api/admin/active-captains`, { headers: headers() }),
            fetch(`${BASE}/api/admin/pending-captains`, { headers: headers() })
        ]);
        allCaptains = await captainsRes.json();
        const pending = await pendingRes.json();

        renderCaptainsTable(allCaptains);
        renderPendingCaptains(pending);

        if (pending.length > 0) document.getElementById('captainsBadge').style.display = 'block';
    } catch(e) { console.error(e); }
}

function renderCaptainsTable(captains) {
    const body = document.getElementById('captainsBody');
    if (!captains.length) {
        body.innerHTML = '<tr><td colspan="6"><div class="gv-empty"><p>لا يوجد كباتن</p></div></td></tr>';
        return;
    }
    const vehicleMap = { motorcycle: '🏍️', bicycle: '🚲', electric: '⚡' };
    body.innerHTML = captains.map(c => {
        const formattedPhone = c.phone ? (c.phone.toString().startsWith('+') ? c.phone : '+' + c.phone) : '—';
        return `
        <tr>
            <td style="font-weight:700;">${window.escapeHtml(c.name || '—')}</td>
            <td dir="ltr" style="font-size:13px;">${window.escapeHtml(formattedPhone)}</td>
            <td>${vehicleMap[c.vehicleType] || '—'}</td>
            <td style="font-weight:700;color:${(c.wallet_balance || 0) < 0 ? 'var(--gv-danger)' : 'var(--gv-success)'};white-space:nowrap;">
                ${fmtNum(c.wallet_balance || 0)} ج.س
            </td>
            <td>${c.isActive ? '<span style="color:var(--gv-success);font-weight:700;">● نشط</span>' : '<span style="color:var(--gv-dark-2);">○ غير نشط</span>'}</td>
            <td style="white-space:nowrap;">
                <button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="editUser('${c._id}')" title="تعديل">
                    <i class="fas fa-pen"></i>
                </button>
                <button class="gv-btn gv-btn-ghost gv-btn-icon" onclick="toggleUserStatus('${c._id}')" title="تبديل الحالة">
                    <i class="fas fa-power-off"></i>
                </button>
            </td>
        </tr>
        `;
    }).join('');
}

function renderPendingCaptains(pending) {
    const body = document.getElementById('pendingCaptainsBody');
    if (!pending.length) {
        body.innerHTML = '<div class="gv-empty"><i class="fas fa-check-circle"></i><p>لا توجد طلبات معلقة</p></div>';
        return;
    }
    body.innerHTML = pending.map(c => {
        const formattedPhone = c.phone ? (c.phone.toString().startsWith('+') ? c.phone : '+' + c.phone) : '';
        return `
        <div style="display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--gv-border);border-radius:12px;margin-bottom:10px;flex-wrap:wrap;">
            <div style="width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gv-primary),var(--gv-accent));color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;">
                ${window.escapeHtml((c.name || '?')[0])}
            </div>
            <div style="flex:1;min-width:140px;">
                <div style="font-weight:700;font-size:14px;">${window.escapeHtml(c.name)}</div>
                <div style="font-size:12px;color:var(--gv-dark-2);" dir="ltr">${window.escapeHtml(formattedPhone)} ${c.email ? '| ' + window.escapeHtml(c.email) : ''}</div>
            </div>
            <div style="display:flex;gap:8px;">
                <button class="gv-btn gv-btn-success gv-btn-sm" onclick="approveCaptain('${c._id}')"><i class="fas fa-check"></i> قبول</button>
                <button class="gv-btn gv-btn-danger gv-btn-sm" onclick="rejectCaptain('${c._id}')"><i class="fas fa-times"></i> رفض</button>
            </div>
        </div>
        `;
    }).join('');
}

async function approveCaptain(id) {
    try {
        await fetch(`${BASE}/api/admin/approve-captain/${id}`, { method: 'PUT', headers: headers() });
        showToast('✅ تمت الموافقة');
        loadCaptains();
    } catch(e) { console.error(e); }
}

async function rejectCaptain(id) {
    const { value: reason } = await Swal.fire({
        title: 'سبب الرفض', input: 'text', inputPlaceholder: 'اكتب السبب...',
        showCancelButton: true, confirmButtonText: 'رفض', cancelButtonText: 'إلغاء'
    });
    if (!reason) return;
    try {
        await fetch(`${BASE}/api/admin/reject-captain/${id}`, {
            method: 'PUT', headers: headers(), body: JSON.stringify({ reason })
        });
        showToast('تم الرفض');
        loadCaptains();
    } catch(e) { console.error(e); }
}

function openAddCaptainModal() {
    Swal.fire({
        title: 'إضافة كابتن جديد',
        html: `
            <input id="swal-name" class="swal2-input" placeholder="الاسم الكامل">
            <input id="swal-email" class="swal2-input" placeholder="البريد الإلكتروني" type="email">
            <input id="swal-phone" class="swal2-input" placeholder="رقم الهاتف" dir="ltr">
            <label style="display:block;text-align:right;font-weight:700;margin-top:8px;font-size:13px;">نوع المركبة</label>
            <select id="swal-vehicle" class="swal2-select" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-family:inherit;">
                <option value="motorcycle">🏍️ موتر</option>
                <option value="electric">⚡ موتر كهربائي</option>
                <option value="bicycle">🚲 عجلة هوائية</option>
            </select>
            <input id="swal-pass" class="swal2-input" placeholder="كلمة المرور" type="password">
        `,
        confirmButtonText: 'إنشاء', showCancelButton: true, cancelButtonText: 'إلغاء',
        preConfirm: () => ({
            name: document.getElementById('swal-name').value,
            email: document.getElementById('swal-email').value,
            phone: document.getElementById('swal-phone').value,
            password: document.getElementById('swal-pass').value,
            vehicleType: document.getElementById('swal-vehicle').value
        })
    }).then(async (result) => {
        if (!result.isConfirmed) return;
        try {
            const res = await fetch(`${BASE}/api/admin/create-captain`, {
                method: 'POST', headers: headers(), body: JSON.stringify(result.value)
            });
            const data = await res.json();
            if (res.ok) { showToast('✅ تم الإنشاء'); loadCaptains(); }
            else Swal.fire('خطأ', data.message, 'error');
        } catch(e) { Swal.fire('خطأ', 'فشل الاتصال', 'error'); }
    });
}

// ── Broadcast ──
let selectedBroadcastUserId = null;
let selectedBroadcastUserName = '';
let broadcastSearchTimer = null;

document.querySelectorAll('.broadcast-target').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.broadcast-target').forEach(b => {
            b.classList.remove('active','gv-btn-primary');
            b.classList.add('gv-btn-ghost');
        });
        btn.classList.add('active','gv-btn-primary');
        btn.classList.remove('gv-btn-ghost');

        // إظهار/إخفاء حقل البحث عن مستخدم محدد
        const container = document.getElementById('userSearchContainer');
        if (btn.dataset.target === 'user') {
            container.style.display = 'block';
        } else {
            container.style.display = 'none';
            clearSelectedUser();
        }
    });
});

function searchBroadcastUser() {
    clearTimeout(broadcastSearchTimer);
    const q = document.getElementById('broadcastUserSearch').value.trim();
    const resultsDiv = document.getElementById('broadcastUserResults');

    if (q.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    broadcastSearchTimer = setTimeout(async () => {
        try {
            const res = await fetch(`${BASE}/api/admin/users`, { headers: headers() });
            const users = await res.json();
            const filtered = users.filter(u =>
                (u.name || '').toLowerCase().includes(q.toLowerCase()) ||
                (u.phone || '').includes(q)
            ).slice(0, 20);

            if (!filtered.length) {
                resultsDiv.innerHTML = '<div style="padding:12px;text-align:center;color:var(--gv-dark-2);font-size:13px;">لا توجد نتائج</div>';
            } else {
                const roleMap = { client: 'عميل', captain: 'كابتن', merchant: 'تاجر', admin: 'مدير' };
                resultsDiv.innerHTML = filtered.map(u => `
                    <div onclick="selectBroadcastUser('${u._id}', '${(u.name || '').replace(/'/g, "\\'")}' )" 
                        style="padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--gv-border);display:flex;align-items:center;justify-content:space-between;transition:background .15s;"
                        onmouseover="this.style.background='var(--gv-bg)'" onmouseout="this.style.background='transparent'">
                        <div>
                            <span style="font-weight:700;font-size:14px;">${window.escapeHtml(u.name || '—')}</span>
                            <span style="font-size:12px;color:var(--gv-dark-2);margin-right:8px;" dir="ltr">${u.phone || ''}</span>
                        </div>
                        <span style="font-size:11px;padding:3px 8px;border-radius:6px;background:var(--gv-bg);color:var(--gv-dark-2);">${roleMap[u.role] || u.role}</span>
                    </div>
                `).join('');
            }
            resultsDiv.style.display = 'block';
        } catch(e) {
            console.error('Search error:', e);
            resultsDiv.style.display = 'none';
        }
    }, 300);
}

function selectBroadcastUser(id, name) {
    selectedBroadcastUserId = id;
    selectedBroadcastUserName = name;
    document.getElementById('broadcastUserResults').style.display = 'none';
    document.getElementById('broadcastUserSearch').style.display = 'none';
    document.getElementById('selectedUserBadge').style.display = 'flex';
    document.getElementById('selectedUserName').textContent = name;
}

function clearSelectedUser() {
    selectedBroadcastUserId = null;
    selectedBroadcastUserName = '';
    document.getElementById('broadcastUserSearch').value = '';
    document.getElementById('broadcastUserSearch').style.display = 'block';
    document.getElementById('broadcastUserResults').style.display = 'none';
    document.getElementById('selectedUserBadge').style.display = 'none';
}

async function sendBroadcast() {
    const title = document.getElementById('broadcastTitle').value.trim();
    const message = document.getElementById('broadcastMsg').value.trim();
    const target = document.querySelector('.broadcast-target.active')?.dataset.target || 'all';

    if (!title || !message) { Swal.fire('تنبيه', 'يرجى ملء العنوان والرسالة', 'warning'); return; }

    // التحقق من اختيار مستخدم عند الإرسال لمستخدم محدد
    if (target === 'user' && !selectedBroadcastUserId) {
        Swal.fire('تنبيه', 'يرجى اختيار مستخدم من نتائج البحث', 'warning');
        return;
    }

    const payload = { title, message, target };
    if (target === 'user') payload.userId = selectedBroadcastUserId;

    try {
        const res = await fetch(`${BASE}/api/admin/send-notification`, {
            method: 'POST', headers: headers(),
            body: JSON.stringify(payload)
        });
        const data = await res.json();
        if (res.ok) {
            Swal.fire('تم', `تم إرسال الإشعار لـ ${data.sentTo} مستخدم`, 'success');
            document.getElementById('broadcastTitle').value = '';
            document.getElementById('broadcastMsg').value = '';
            clearSelectedUser();
        } else { Swal.fire('خطأ', data.message, 'error'); }
    } catch(e) { Swal.fire('خطأ', 'فشل الاتصال', 'error'); }
}

// ── Maps ──
function makeCaptainIcon(status) {
    const colors = { available: '#10b981', busy: '#f59e0b', offline: '#94a3b8' };
    const fill = colors[status] || colors.available;
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 40 48">
        <ellipse cx="20" cy="45" rx="7" ry="3" fill="rgba(0,0,0,0.15)"/>
        <path d="M20 2C11 2 4 9 4 18C4 29 20 46 20 46C20 46 36 29 36 18C36 9 29 2 20 2Z" fill="${fill}" stroke="white" stroke-width="2.5"/>
        <circle cx="20" cy="18" r="7" fill="white"/>
        <text x="20" y="23" text-anchor="middle" font-size="12" font-weight="bold">🏍</text>
    </svg>`;
    return {
        url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg),
        scaledSize: new google.maps.Size(40, 48),
        anchor: new google.maps.Point(20, 46)
    };
}

function updateCaptainMarker(id, lat, lng, name, status, phone) {
    // Update on all active maps
    if (gvMap) updateCaptainMarkerOnMap(gvMap, id, lat, lng, name, status, phone);
    else if (miniMapInstance) updateCaptainMarkerOnMap(miniMapInstance, id, lat, lng, name, status, phone);
}

function updateCaptainMarkerOnMap(map, id, lat, lng, name, status, phone) {
    if (!map) return;

    if (captainMarkers[id]) {
        // ✅ Smooth position update (marker already exists)
        captainMarkers[id].marker.setPosition({ lat, lng });
        captainMarkers[id].marker.setIcon(makeCaptainIcon(status));
        captainMarkers[id].data = { name, status, lat, lng, phone };
        // Make sure it's on the right map
        if (captainMarkers[id].marker.getMap() !== map) {
            captainMarkers[id].marker.setMap(map);
        }
    } else {
        const marker = new google.maps.Marker({
            position: { lat, lng }, map, title: name,
            icon: makeCaptainIcon(status)
        });
        const infoWindow = new google.maps.InfoWindow();
        marker.addListener('click', () => {
            const d = captainMarkers[id]?.data || {};
            const statusMap = { available: '🟢 متاح', offline: '⚫ غير متصل' };
            const formattedPhone = d.phone ? (d.phone.toString().startsWith('+') ? d.phone : '+' + d.phone) : '';
            const phoneHtml = formattedPhone
                ? `<a href="tel:${window.escapeHtml(formattedPhone)}" style="display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 10px;background:#10b981;color:white;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;justify-content:center;">📞 <span dir="ltr">${window.escapeHtml(formattedPhone)}</span></a>`
                : '';
            infoWindow.setContent(`
                <div style="font-family:'Cairo',sans-serif;direction:rtl;text-align:right;min-width:160px;padding:4px;">
                    <div style="font-weight:800;font-size:14px;margin-bottom:4px;">🏍️ ${d.name || 'كابتن'}</div>
                    <div style="font-size:12px;color:#555;">الحالة: ${statusMap[d.status] || '🟢 متاح'}</div>
                    ${phoneHtml}
                </div>
            `);
            infoWindow.open(map, marker);
        });
        captainMarkers[id] = { marker, infoWindow, data: { name, status, lat, lng, phone } };
    }
}

function updateMapCounter() {
    const count = Object.values(captainMarkers).filter(m => m.data.status !== 'offline').length;
    const el = document.getElementById('mapOnlineCount');
    if (el) el.innerHTML = `<i class="fas fa-circle" style="font-size:8px;"></i> ${count} نشط`;
}

let _captainSearchTimer = null;

// Called on every keystroke — waits 600ms after user stops typing before searching
window.highlightMapCaptain = function() {
    clearTimeout(_captainSearchTimer);
    _captainSearchTimer = setTimeout(_runCaptainSearch, 600);
};

function _runCaptainSearch() {
    const q = (document.getElementById('mapCaptainSearch')?.value || '').toLowerCase().trim();
    const map = gvMap || miniMapInstance;
    if (!map) return;

    let found = false;
    Object.values(captainMarkers).forEach(({ marker, data, infoWindow }) => {
        const nameMatch = (data.name || '').toLowerCase().includes(q);
        const phoneMatch = (data.phone || '').includes(q);
        
        if (q === '') {
            marker.setAnimation(null);
            infoWindow.close();
            return;
        }

        if (nameMatch || phoneMatch) {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            if (!found) {
                map.panTo(marker.getPosition());
                map.setZoom(15);
                infoWindow.open(map, marker);
                found = true;
            }
        } else {
            marker.setAnimation(null);
            infoWindow.close();
        }
    });
}

function initMiniMap() {
    if (miniMapInstance || !window.google?.maps) return;
    const el = document.getElementById('miniMap');
    if (!el) return;

    miniMapInstance = new google.maps.Map(el, {
        center: { lat: 15.6445, lng: 32.4777 }, zoom: 12,
        disableDefaultUI: true, zoomControl: true,
        styles: [
            { featureType: 'poi', stylers: [{ visibility: 'off' }] },
            { featureType: 'transit', stylers: [{ visibility: 'off' }] }
        ]
    });
    loadMapCaptains(miniMapInstance);
}

function initFullMap() {
    if (!window.google?.maps) { setTimeout(initFullMap, 500); return; }
    const el = document.getElementById('fullMap');
    if (!el) return;

    if (!gvMap) {
        gvMap = new google.maps.Map(el, {
            center: { lat: 15.6445, lng: 32.4777 }, zoom: 13,
            mapTypeControl: false, streetViewControl: false, fullscreenControl: true,
            styles: [
                { featureType: 'poi', stylers: [{ visibility: 'off' }] },
                { featureType: 'transit', stylers: [{ visibility: 'off' }] }
            ]
        });
    }
    refreshMapCaptains();
}

async function loadMapCaptains(map) {
    try {
        const res = await fetch(`${BASE}/api/admin/active-captains`, { headers: headers() });
        if (!res.ok) return;
        const captains = await res.json();

        let onlineCount = 0;
        captains.forEach(c => {
            const loc = c.currentLocation || c.location;
            if (!loc || !loc.lat || !loc.lng) return;

            // ✅ FIX: إذا الكابتن isActive = متاح (أخضر)، بغض النظر عن عمر الموقع
            // الأصفر فقط لو عنده طلب نشط (لكن ما عندنا هذه المعلومة هنا)
            let status = 'offline';
            if (c.isActive) { status = 'available'; onlineCount++; }

            updateCaptainMarker(c._id, loc.lat, loc.lng, c.name || 'كابتن', status, c.phone || '');
        });

        const el = document.getElementById('mapOnlineCount');
        if (el) el.innerHTML = `<i class="fas fa-circle" style="font-size:8px;"></i> ${onlineCount} نشط`;
    } catch(e) { console.error(e); }
}

async function refreshMapCaptains() {
    const map = gvMap || miniMapInstance;
    if (map) {
        // We do NOT clear captainMarkers here to preserve smooth animations.
        // loadMapCaptains will upsert them properly.
        await loadMapCaptains(map);
    }
}

// Google Maps callback
window._gvMapInit = function() {
    if (currentPage === 'overview') initMiniMap();
    if (currentPage === 'livemap') initFullMap();
};
if (window._gvMapReady) window._gvMapInit();

// ── Logout ──
function logout() {
    localStorage.removeItem('adminToken');
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    window.location.href = 'admin-login.html';
}

// ── Mobile Detection ──
function checkMobile() {
    const toggle = document.getElementById('menuToggle');
    if (window.innerWidth <= 991) toggle.style.display = 'flex';
    else toggle.style.display = 'none';
}
window.addEventListener('resize', checkMobile);
checkMobile();

// ── Init ──
document.addEventListener('DOMContentLoaded', () => {
    loadDashboard();
});

// ── Periodic refresh ──
setInterval(() => {
    if (currentPage === 'overview') { loadLiveOrders(); loadOnlineCaptainsCount(); }
    if (currentPage === 'livemap') refreshMapCaptains();
}, 15000); // ✅ Every 15s for more responsive map

// ── Socket reconnect: reload map data ──
socket.on('reconnect', () => {
    console.log('🔄 Socket reconnected — refreshing map');
    if (currentPage === 'livemap') refreshMapCaptains();
    if (currentPage === 'overview') { loadLiveOrders(); initMiniMap(); }
});
