<div 
    class="coverage-map-component"
    x-data="{
        state: $wire.entangle('{{ $getStatePath() }}'),
        map: null,
        drawnItems: null,
        currentPolygon: null,
        isLeafletLoaded: false,

        init() {
            this.loadLeaflet();
        },

        loadLeaflet() {
            // Check if already loaded
            if (window.L && window.L.map && window.L.Control && window.L.Control.Draw) {
                this.isLeafletLoaded = true;
                this.initMap();
                return;
            }

            // Inject Leaflet CSS (if not exists)
            if (!document.getElementById('leaflet-core-css')) {
                const link = document.createElement('link');
                link.id = 'leaflet-core-css';
                link.rel = 'stylesheet';
                link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
                link.crossOrigin = '';
                document.head.appendChild(link);
            }

            // Inject Leaflet Draw CSS (if not exists)
            if (!document.getElementById('leaflet-draw-css')) {
                const link = document.createElement('link');
                link.id = 'leaflet-draw-css';
                link.rel = 'stylesheet';
                link.href = 'https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css';
                document.head.appendChild(link);
            }

            // Load Leaflet JS
            if (!window.L) {
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=';
                script.crossOrigin = '';
                script.onload = () => this.loadLeafletDraw();
                script.onerror = () => console.error('Failed to load Leaflet');
                document.head.appendChild(script);
            } else {
                this.loadLeafletDraw();
            }
        },

        loadLeafletDraw() {
            if (window.L.Control && window.L.Control.Draw) {
                this.isLeafletLoaded = true;
                this.initMap();
                return;
            }
            
            const script = document.createElement('script');
            script.src = 'https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js';
            script.onload = () => {
                this.isLeafletLoaded = true;
                this.initMap();
            };
            script.onerror = () => console.error('Failed to load Leaflet Draw');
            document.head.appendChild(script);
        },

        initMap() {
            if (!this.isLeafletLoaded) {
                setTimeout(() => this.initMap(), 100);
                return;
            }

            const container = this.$refs.mapContainer;
            if (!container || this.map) return;

            // Ensure clean slate
            container.innerHTML = '';
            if (container._leaflet_id) {
                delete container._leaflet_id;
            }

            // Create Map
            this.map = L.map(container, {
                zoomControl: true,
                attributionControl: true,
                preferCanvas: true
            }).setView([30.0444, 31.2357], 12);

            // Add Tiles
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap contributors'
            }).addTo(this.map);

            // Feature Group for drawings
            this.drawnItems = new L.FeatureGroup();
            this.map.addLayer(this.drawnItems);

            // Drawing Controls
            const drawControl = new L.Control.Draw({
                position: 'topright',
                draw: {
                    polygon: {
                        allowIntersection: false,
                        showArea: true,
                        drawError: {
                            color: '#ef4444',
                            message: '<strong>خطأ!</strong> الحدود لا يمكن أن تتقاطع.'
                        },
                        shapeOptions: {
                            color: '#16a34a',
                            fillColor: '#22c55e',
                            fillOpacity: 0.5,
                            weight: 3
                        }
                    },
                    polyline: false,
                    circle: false,
                    rectangle: false,
                    marker: false,
                    circlemarker: false
                },
                edit: {
                    featureGroup: this.drawnItems,
                    remove: true
                }
            });
            this.map.addControl(drawControl);

            // Load existing polygon
            this.loadExistingPolygon();

            // Event: Created
            this.map.on(L.Draw.Event.CREATED, (e) => {
                this.drawnItems.clearLayers();
                
                const layer = e.layer;
                layer.setStyle({
                    color: '#16a34a',
                    fillColor: '#22c55e',
                    fillOpacity: 0.5,
                    weight: 3
                });

                layer.bindTooltip('منطقة التغطية', {
                    permanent: false,
                    direction: 'center',
                    className: 'coverage-tooltip'
                });

                this.drawnItems.addLayer(layer);
                this.currentPolygon = layer;
                this.updateState();
                this.showNotification('✓ تم رسم منطقة التغطية بنجاح', 'success');
            });

            // Event: Edited
            this.map.on(L.Draw.Event.EDITED, () => {
                this.updateState();
                this.showNotification('✓ تم تعديل منطقة التغطية', 'success');
            });

            // Event: Deleted
            this.map.on(L.Draw.Event.DELETED, () => {
                this.currentPolygon = null;
                this.updateState();
                this.showNotification('تم حذف منطقة التغطية', 'info');
            });

            // Keep polygon visible on zoom/pan
            this.map.on('zoomend moveend', () => {
                if (this.currentPolygon && this.map.hasLayer(this.currentPolygon)) {
                    this.currentPolygon.bringToFront();
                }
            });

            // Fix modal visibility
            setTimeout(() => {
                this.map.invalidateSize(true);
                if (this.drawnItems.getLayers().length > 0) {
                    this.fitBoundsToPolygon();
                }
            }, 400);
        },

        loadExistingPolygon() {
            if (!this.state) return;
            
            try {
                const geojson = typeof this.state === 'string' ? JSON.parse(this.state) : this.state;
                
                if (geojson && geojson.type === 'Polygon') {
                    const layer = L.geoJSON(geojson, {
                        style: {
                            color: '#16a34a',
                            fillColor: '#22c55e',
                            fillOpacity: 0.5,
                            weight: 3
                        }
                    });

                    layer.eachLayer(l => {
                        l.bindTooltip('منطقة التغطية', {
                            permanent: false,
                            direction: 'center',
                            className: 'coverage-tooltip'
                        });
                        this.drawnItems.addLayer(l);
                        this.currentPolygon = l;
                    });

                    setTimeout(() => this.fitBoundsToPolygon(), 200);
                }
            } catch (e) {
                console.error('Error loading polygon:', e);
            }
        },

        fitBoundsToPolygon() {
            if (this.drawnItems.getLayers().length > 0) {
                const bounds = this.drawnItems.getBounds();
                if (bounds.isValid()) {
                    this.map.fitBounds(bounds, { 
                        padding: [50, 50],
                        maxZoom: 14
                    });
                }
            }
        },

        updateState() {
            const layers = this.drawnItems.getLayers();
            if (layers.length > 0) {
                const geojson = layers[0].toGeoJSON();
                this.state = JSON.stringify(geojson.geometry);
            } else {
                this.state = null;
            }
        },

        showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `map-notification map-notification-${type}`;
            notification.textContent = message;
            this.$refs.mapContainer.appendChild(notification);
            
            setTimeout(() => {
                notification.style.opacity = '0';
                setTimeout(() => notification.remove(), 300);
            }, 2500);
        }
    }"
    wire:ignore
>
    <div class="mb-3 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg">
        <div class="text-sm text-blue-900">
            <p class="font-bold mb-2 text-base">📍 كيفية تحديد منطقة التغطية:</p>
            <ol class="list-decimal list-inside space-y-1.5 mr-2">
                <li>اضغط على أيقونة <strong>المضلع</strong> في أعلى يمين الخريطة لبدء الرسم</li>
                <li>انقر على الخريطة لتحديد نقاط الحدود (على الأقل 3 نقاط)</li>
                <li>اضغط على <strong>النقطة الأولى</strong> مرة أخرى لإنهاء الرسم وإغلاق الشكل</li>
                <li>المنطقة الخضراء تمثل نطاق التغطية للفرع</li>
                <li>يمكن التعديل أو الحذف من الأدوات في أعلى اليمين</li>
            </ol>
        </div>
    </div>

    <div 
        x-ref="mapContainer" 
        class="w-full rounded-xl border-2 border-gray-300 shadow-lg overflow-hidden bg-gray-100" 
        style="height: 600px; min-height: 600px; width: 100%; position: relative;"
    ></div>

    <style>
        .leaflet-container { 
            height: 100% !important; 
            width: 100% !important;
            background: #f3f4f6 !important;
            font-family: Arial, sans-serif;
        }

        .coverage-tooltip {
            background: #16a34a !important;
            color: white !important;
            border: none !important;
            border-radius: 6px !important;
            padding: 6px 12px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
        }

        .coverage-tooltip::before {
            border-top-color: #16a34a !important;
        }

        .map-notification {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2000;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .map-notification-success {
            background: #22c55e;
            color: white;
        }

        .map-notification-info {
            background: #3b82f6;
            color: white;
        }

        .leaflet-interactive {
            transition: all 0.2s ease;
        }

        .leaflet-interactive:hover {
            fill-opacity: 0.7 !important;
            stroke-width: 4 !important;
        }

        /* Fix for draw toolbar icons */
        .leaflet-draw-toolbar a {
            background-image: url('https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/images/spritesheet.png') !important;
            background-repeat: no-repeat;
        }

        .leaflet-retina .leaflet-draw-toolbar a {
            background-image: url('https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/images/spritesheet-2x.png') !important;
            background-size: 270px 30px;
        }
    </style>
</div>