/**
 * Multi-Device View System
 * نظام عرض عدة أجهزة على الخريطة
 */

class MultiDeviceView {
    constructor() {
        this.deviceMarkers = new Map(); // خريطة للأجهزة وعلاماتها
        this.isEnabled = false;
    }

    /**
     * تفعيل عرض عدة أجهزة
     */
    enable() {
        this.isEnabled = true;
        this.loadAllDevices();
    }

    /**
     * تعطيل عرض عدة أجهزة
     */
    disable() {
        this.isEnabled = false;
        this.clearAllMarkers();
    }

    /**
     * جلب جميع الأجهزة وعرضها
     */
    async loadAllDevices() {
        if (!this.isEnabled || typeof map === 'undefined' || !map) return;

        // جلب قائمة الأجهزة من القائمة الجانبية
        const deviceItems = document.querySelectorAll('li[data-device-id]');
        
        for (const item of deviceItems) {
            const deviceId = item.getAttribute('data-device-id');
            const deviceName = item.getAttribute('data-device-name');
            
            if (deviceId && !this.deviceMarkers.has(deviceId)) {
                await this.loadDeviceLocation(deviceId, deviceName);
            }
        }
    }

    /**
     * جلب موقع جهاز محدد
     */
    async loadDeviceLocation(deviceId, deviceName) {
        try {
            const response = await fetch(`get_latest_location.php?device_id=${encodeURIComponent(deviceId)}&t=${Date.now()}`);
            if (!response.ok) return;

            const data = await response.json();
            if (data.status === 'success' && data.data) {
                this.addDeviceMarker(deviceId, deviceName, data.data);
            }
        } catch (error) {
            console.error(`❌ خطأ في جلب موقع الجهاز ${deviceId}:`, error);
        }
    }

    /**
     * إضافة علامة جهاز على الخريطة
     */
    addDeviceMarker(deviceId, deviceName, locationData) {
        if (typeof map === 'undefined' || !map) return;

        const lat = parseFloat(locationData.latitude);
        const lng = parseFloat(locationData.longitude);

        if (isNaN(lat) || isNaN(lng)) return;

        // حذف العلامة القديمة إذا كانت موجودة
        if (this.deviceMarkers.has(deviceId)) {
            this.deviceMarkers.get(deviceId).setMap(null);
        }

        // إنشاء علامة جديدة
        const marker = new google.maps.Marker({
            position: { lat, lng },
            map: map,
            title: deviceName,
            icon: {
                url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                scaledSize: new google.maps.Size(32, 32)
            }
        });

        // إضافة معلومات عند النقر
        const infoWindow = new google.maps.InfoWindow({
            content: `
                <div style="font-family: 'Segoe UI', sans-serif; font-size: 13px; color: #333; min-width: 200px; padding: 5px; text-align: right;">
                    <h4 style="margin: 0 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid #eee; color: #007bff;">
                        📡 ${deviceName}
                    </h4>
                    <div>🕒 ${locationData.timestamp || 'غير متاح'}</div>
                    <div>🔋 ${locationData.battery || '--'}%</div>
                    <div style="margin-top: 10px;">
                        <button onclick="selectDevice('${deviceId}')" style="padding: 6px 12px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
                            تحديد هذا الجهاز
                        </button>
                    </div>
                </div>
            `
        });

        marker.addListener('click', () => {
            infoWindow.open(map, marker);
        });

        this.deviceMarkers.set(deviceId, marker);
    }

    /**
     * مسح جميع العلامات
     */
    clearAllMarkers() {
        this.deviceMarkers.forEach(marker => {
            marker.setMap(null);
        });
        this.deviceMarkers.clear();
    }

    /**
     * تحديث موقع جهاز محدد
     */
    updateDeviceLocation(deviceId, locationData) {
        if (this.deviceMarkers.has(deviceId)) {
            const marker = this.deviceMarkers.get(deviceId);
            const lat = parseFloat(locationData.latitude);
            const lng = parseFloat(locationData.longitude);
            
            if (!isNaN(lat) && !isNaN(lng)) {
                marker.setPosition({ lat, lng });
            }
        }
    }
}

// إنشاء instance عام
const multiDeviceView = new MultiDeviceView();

// دالة مساعدة لتحديد جهاز
window.selectDevice = function(deviceId) {
    const deviceSelect = document.getElementById('deviceSelect');
    if (deviceSelect) {
        deviceSelect.value = deviceId;
        if (typeof fetchLatestLocation === 'function') {
            fetchLatestLocation();
        }
    }
};

// تصدير للاستخدام العام
window.MultiDeviceView = MultiDeviceView;
window.multiDeviceView = multiDeviceView;

