<script setup>
import { onMounted, ref, watch } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';

const props = defineProps({
    coverage: {
        type: Object,
        required: true
    },
    height: {
        type: String,
        default: '250px'
    },
    mapId: {
        type: String,
        default: 'view-map'
    }
});

const map = ref(null);
const mapContainer = ref(null);

onMounted(() => {
    initializeMap();
});

watch(() => props.coverage, (newCoverage) => {
    if (map.value && newCoverage) {
        updateBounds();
    }
}, { deep: true });

const initializeMap = () => {
    // Create the map with minimal controls
    map.value = L.map(mapContainer.value, {
        zoomControl: false,
        attributionControl: false,
        dragging: false,
        scrollWheelZoom: false,
        doubleClickZoom: false,
        boxZoom: false,
        tap: false,
        keyboard: false,
        touchZoom: false
    });

    // // Add a simple tile layer (OpenStreetMap)
    let osmGgray = new L.TileLayer.WMS('https://ows.terrestris.de/osm-gray/service', {
        format: 'image/png',
        attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
        layers: 'OSM-WMS',
    });
    let layerOptions = {
        label: DEFAULT_BASE_LAYER_NAME,
        visible: true,
        layer: osmGgray,
    };
    layerOptions.layer.addTo(map.value);

    // Add a light-colored rectangle for the coverage area
    updateBounds();
};

const updateBounds = () => {
    if (!props.coverage || !map.value) return;

    // Clear any existing layers except the base tile layer
    map.value.eachLayer(layer => {
        if (layer instanceof L.Rectangle) {
            map.value.removeLayer(layer);
        }
    });

    // Create bounds from the coverage coordinates
    const bounds = L.latLngBounds(
        [props.coverage.y_min, props.coverage.x_min],
        [props.coverage.y_max, props.coverage.x_max]
    );

    // Add a rectangle with emerald styling
    L.rectangle(bounds, {
        color: '#10b981', // emerald-500
        weight: 2,
        fillColor: '#d1fae5', // emerald-100
        fillOpacity: 0.5
    }).addTo(map.value);

    // Fit the map to the bounds with some padding
    map.value.fitBounds(bounds, {
        padding: [20, 20]
    });
};
</script>

<template>
    <div class="map-container bg-emerald-50 dark:bg-emerald-900/30 
              rounded-lg shadow-sm overflow-hidden">
        <div :id="mapId" ref="mapContainer" :style="{ height: height }" class="w-full"></div>
    </div>
</template>

<style scoped>
/* Ensure the Leaflet container has proper styling */
:deep(.leaflet-container) {
    background-color: #f0fdf4;
    /* emerald-50 */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    :deep(.leaflet-container) {
        background-color: rgba(6, 78, 59, 0.3);
        /* emerald-900/30 */
    }

    :deep(.leaflet-tile) {
        filter: brightness(0.8) contrast(1.2) grayscale(0.3);
    }
}
</style>