// ============================================================
// Admin Zone Builder — Custom Polygon Drawing (No DrawingManager)
// DrawingManager was removed from Google Maps API v3.65+
// Replace with a manual click-to-draw approach
// ============================================================

let adminMap;
let currentPolygon  = null;   // The finalized/editable polygon on the map
let previewPolyline = null;   // Dashed preview line while drawing
let tempMarkers     = [];     // Vertex dot markers while drawing
let drawnPoints     = [];     // Array of LatLng objects collected during drawing
let isDrawingMode   = false;

// ── Helpers ──────────────────────────────────────────────────

function setStatus(msg, color = '#0a8754') {
    const el = document.getElementById('zone-draw-status');
    if (el) { el.textContent = msg; el.style.color = color; }
}

function updateCoordinatesOutput() {
    if (!currentPolygon) return;
    const path = currentPolygon.getPath().getArray();
    const coordinates = path.map(p => ({
        lat: Number(p.lat().toFixed(6)),
        lng: Number(p.lng().toFixed(6))
    }));
    const textarea = document.getElementById('zone-coordinates-output');
    if (textarea) textarea.value = JSON.stringify(coordinates, null, 2);
}

// ── Drawing Controls ──────────────────────────────────────────

function startDrawing() {
    // Clear any existing polygon first
    clearZoneFully();

    isDrawingMode = true;
    adminMap.setOptions({ draggableCursor: 'crosshair' });
    document.getElementById('btn-start-draw').style.display  = 'none';
    document.getElementById('btn-finish-draw').style.display = 'inline-block';
    document.getElementById('btn-undo-point').style.display  = 'inline-block';
    setStatus('🖊 انقر على الخريطة لإضافة نقاط المضلع. أضف 3 نقاط على الأقل.', '#d97706');
}

function undoLastPoint() {
    if (!isDrawingMode || drawnPoints.length === 0) return;

    // Remove last marker
    const lastMarker = tempMarkers.pop();
    if (lastMarker) lastMarker.setMap(null);

    drawnPoints.pop();
    refreshPreviewPolyline();

    if (drawnPoints.length === 0) {
        setStatus('🖊 ابدأ بالنقر على الخريطة لإضافة نقاط.', '#d97706');
    } else {
        setStatus(`🖊 ${drawnPoints.length} نقطة — انقر لإضافة المزيد أو اضغط "إنهاء".`, '#d97706');
    }
}

function finishDrawing() {
    if (drawnPoints.length < 3) {
        setStatus('❗ يجب إضافة 3 نقاط على الأقل لإتمام المضلع.', '#dc3545');
        return;
    }

    isDrawingMode = false;
    adminMap.setOptions({ draggableCursor: null });

    // Remove temp markers and preview polyline
    tempMarkers.forEach(m => m.setMap(null));
    tempMarkers = [];
    if (previewPolyline) { previewPolyline.setMap(null); previewPolyline = null; }

    // Create the final editable polygon
    currentPolygon = new google.maps.Polygon({
        paths: drawnPoints,
        strokeColor: '#0a8754',
        strokeOpacity: 0.9,
        strokeWeight: 3,
        fillColor: '#0a8754',
        fillOpacity: 0.25,
        editable: true,
        draggable: true,
        map: adminMap,
        zIndex: 1
    });

    // Attach real-time edit listeners
    const path = currentPolygon.getPath();
    google.maps.event.addListener(path, 'set_at',    updateCoordinatesOutput);
    google.maps.event.addListener(path, 'insert_at', updateCoordinatesOutput);
    google.maps.event.addListener(path, 'remove_at', updateCoordinatesOutput);
    google.maps.event.addListener(currentPolygon, 'dragend', updateCoordinatesOutput);

    drawnPoints = [];
    updateCoordinatesOutput();

    document.getElementById('btn-start-draw').style.display  = 'inline-block';
    document.getElementById('btn-finish-draw').style.display = 'none';
    document.getElementById('btn-undo-point').style.display  = 'none';

    setStatus(`✅ المضلع جاهز (${currentPolygon.getPath().getLength()} نقطة). يمكنك تعديله أو حفظه.`, '#0a8754');
}

// ── Live Preview While Drawing ────────────────────────────────

function refreshPreviewPolyline() {
    if (previewPolyline) { previewPolyline.setMap(null); previewPolyline = null; }
    if (drawnPoints.length < 2) return;

    previewPolyline = new google.maps.Polyline({
        path: drawnPoints,
        geodesic: true,
        strokeColor: '#0a8754',
        strokeOpacity: 0.6,
        strokeWeight: 2,
        icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 3 }, offset: '0', repeat: '15px' }],
        map: adminMap
    });
}

function addDotMarker(latLng, index) {
    const marker = new google.maps.Marker({
        position: latLng,
        map: adminMap,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 7,
            fillColor: '#0a8754',
            fillOpacity: 1,
            strokeColor: '#ffffff',
            strokeWeight: 2
        },
        label: { text: String(index + 1), color: '#fff', fontSize: '10px', fontWeight: 'bold' },
        title: `نقطة ${index + 1}`,
        zIndex: 10
    });
    return marker;
}

// ── Clear / Reset ─────────────────────────────────────────────

function clearZoneFully() {
    if (currentPolygon) { currentPolygon.setMap(null); currentPolygon = null; }
    if (previewPolyline) { previewPolyline.setMap(null); previewPolyline = null; }
    tempMarkers.forEach(m => m.setMap(null));
    tempMarkers = [];
    drawnPoints = [];
    const textarea = document.getElementById('zone-coordinates-output');
    if (textarea) textarea.value = '';
}

window.clearZoneMap = function() {
    isDrawingMode = false;
    adminMap.setOptions({ draggableCursor: null });
    clearZoneFully();

    document.getElementById('btn-start-draw').style.display  = 'inline-block';
    document.getElementById('btn-finish-draw').style.display = 'none';
    document.getElementById('btn-undo-point').style.display  = 'none';
    setStatus('🖊 انقر على "ابدأ رسم المنطقة" لرسم منطقة التوصيل.', '#64748b');
};

// ── Save Zone ─────────────────────────────────────────────────

window.saveDeliveryZone = async function() {
    const coordsStr = document.getElementById('zone-coordinates-output').value;

    if (!coordsStr || !currentPolygon) {
        Swal.fire({ icon: 'warning', title: 'تنبيه', text: 'الرجاء رسم مضلع منطقة أولاً!' });
        return;
    }

    let coords;
    try { coords = JSON.parse(coordsStr); }
    catch (e) {
        Swal.fire({ icon: 'error', title: 'خطأ', text: 'حدث خطأ في محتوى الإحداثيات.' });
        return;
    }

    try {
        const token = localStorage.getItem('token');
        const res = await fetch(`${window.API_URL || ''}/api/admin/delivery-zone`, {
            method: 'PUT',
            headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
            body: JSON.stringify({ deliveryZone: coords })
        });

        const data = await res.json();
        if (res.ok) {
            Swal.fire({
                icon: 'success', title: '✅ تم الحفظ بنجاح!',
                text: `تم حفظ منطقة التوصيل (${coords.length} نقطة) وستُطبَّق فوراً.`,
                confirmButtonColor: '#0a8754'
            });
        } else { throw new Error(data.message || 'فشل الحفظ'); }
    } catch (err) {
        Swal.fire({ icon: 'error', title: 'فشل الحفظ', text: err.message || 'خطأ في الاتصال بالسيرفر', confirmButtonColor: '#dc3545' });
    }
};

// ── Load Existing Zone ────────────────────────────────────────

async function loadExistingZone() {
    try {
        const token = localStorage.getItem('token');
        const res = await fetch(`${window.API_URL || ''}/api/admin/delivery-zone`, {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        if (!res.ok) return;
        const data = await res.json();
        const zone = data.deliveryZone;
        if (!zone || zone.length < 3) return;

        // Draw existing zone as editable polygon
        currentPolygon = new google.maps.Polygon({
            paths: zone,
            strokeColor: '#0a8754',
            strokeOpacity: 0.9,
            strokeWeight: 3,
            fillColor: '#0a8754',
            fillOpacity: 0.25,
            editable: true,
            draggable: true,
            map: adminMap,
            zIndex: 1
        });

        const path = currentPolygon.getPath();
        google.maps.event.addListener(path, 'set_at',    updateCoordinatesOutput);
        google.maps.event.addListener(path, 'insert_at', updateCoordinatesOutput);
        google.maps.event.addListener(path, 'remove_at', updateCoordinatesOutput);
        google.maps.event.addListener(currentPolygon, 'dragend', updateCoordinatesOutput);

        const textarea = document.getElementById('zone-coordinates-output');
        if (textarea) textarea.value = JSON.stringify(zone, null, 2);

        // Center map on loaded zone
        const bounds = new google.maps.LatLngBounds();
        zone.forEach(p => bounds.extend(new google.maps.LatLng(p.lat, p.lng)));
        adminMap.fitBounds(bounds);

        setStatus(`✅ تم تحميل منطقة محفوظة (${zone.length} نقطة). يمكنك تعديلها مباشرة.`, '#0a8754');
        console.log('✅ Existing zone loaded:', zone.length, 'points');
    } catch (e) {
        console.warn('Could not load existing zone:', e);
    }
}

// ── Map Init ──────────────────────────────────────────────────

function initAdminMap() {
    adminMap = new google.maps.Map(document.getElementById('admin-map'), {
        center: { lat: 15.6445, lng: 32.4777 },
        zoom: 12,
        mapTypeId: 'roadmap',
        disableDefaultUI: false,
        zoomControl: true,
    });

    // Map click → add point while in drawing mode
    adminMap.addListener('click', (e) => {
        if (!isDrawingMode) return;
        const latLng = e.latLng;
        drawnPoints.push(latLng);
        tempMarkers.push(addDotMarker(latLng, drawnPoints.length - 1));
        refreshPreviewPolyline();
        setStatus(`🖊 ${drawnPoints.length} نقطة — استمر بالنقر أو اضغط "إنهاء الرسم".`, '#d97706');
    });

    setStatus('🖊 انقر على "ابدأ رسم المنطقة" لرسم منطقة التوصيل.', '#64748b');
    loadExistingZone();
}
