{{template "base.html" .}}

{{define "title"}}Dash{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script src="/static/js/address-display.js"></script>
<script src="/static/js/address-suggestion.js"></script>
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map.js"></script>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
function setDistrictColors(map) {
	const features = map.querySourceFeatures('tegola-mosquito', {sourceLayer: 'district'});
	//console.log("features", features);
	const regionIds = [...new Set(features.map(f => f.properties.regionid))];
	map.setPaintProperty('districts', 'fill-opacity', 0.4);
	if (regionIds.length > 0) {
		// Generate color mapping
		const colorScale = {};
		regionIds.forEach((id, index) => {
			// Generate a color (this is a simple example - consider using a proper color library)
			colorScale[id] = `hsl(${index * (360 / regionIds.length)}, 70%, 50%)`;
		});
		const matchExpression = ['match', ['get', 'regionid']];
		regionIds.forEach(id => {
			matchExpression.push(id, colorScale[id]);
		});
		matchExpression.push('#cccccc'); // Default color
		//console.log("using district coloring", matchExpression);
		map.setPaintProperty('districts', 'fill-color', matchExpression);
	} else {
		map.setPaintProperty('districts', 'fill-color', 'rgb(250, 100, 100)');
		//console.log("using fallback district coloring");
	}
}

async function fetchDistrict(lng, lat) {
	try {
		const url = `/api/district?lat=${lat}&lng=${lng}`
		const response = await fetch(url);
		var agencyEl = document.querySelector("#district-agency");
		var managerEl = document.querySelector("#district-manager");
		var phoneEl = document.querySelector("#district-phone");
		var websiteEl = document.querySelector("#district-website");
		if (response.status == 404) {
			agencyEl.innerHTML = "no matching district";
			managerEl.innerHTML = "-";
			phoneEl.innerHTML = "-";
			websiteEl.innerHTML = "-";
			return
		}
		const data = await response.json();
		console.log("district", data);
		agencyEl.innerHTML = data.agency;
		managerEl.innerHTML = data.manager;
		phoneEl.innerHTML = data.phone;
		websiteEl.innerHTML = data.website;
	} catch (error) {
		console.error('Error fetching geocoding suggestions:', error);
	}
}

function onLoad() {
	console.log("Setting up the map...");
	mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
	const map = new mapboxgl.Map({
		container: 'map', // container ID
		style: 'mapbox://styles/mapbox/standard', // style URL
		//style: 'mapbox://styles/eliribble/cmke4af8i004401suh3cahegw',
		center: [-119.3, 36.327], // starting position [lng, lat]
		//center: [7.01, 50.74],
		zoom: 9 // starting zoom
	});
	map.on("load", function() {
		console.log("Map post-load...");
		map.addSource('tegola-mosquito', {
			'type': 'vector',
			'tiles': [
				'https://dev-tegola.nidus.cloud/maps/mosquito/{z}/{x}/{y}'
			]
		});
		map.addLayer({
			'id': 'districts',
			'source': 'tegola-mosquito', // ID of the tile source created above
			'source-layer': 'district',
			'type': 'fill',
		});
		map.addInteraction("nidus-click-interaction", {
			type: 'click',
			target: { layerId: 'mosquito' },
			handler: (e) => {
				const coordinates = e.feature.geometry.coordinates.slice();
				const properties = e.feature.properties;
				console.log("Coordinates", coordinates[0]);
				console.log("Properties", properties);
				/*new mapboxgl.Popup()
					.setLngLat(coordinates[0][0])
					.setHTML("Cell: " + properties.cell)
					.addTo(map);*/
				//window.location.href = '/cell/' + properties.cell;
			}
		});
		map.addInteraction('nidus-mouseenter-interaction', {
			type: 'mouseenter',
			target: { layerId: 'nidus' },
			handler: () => {
				map.getCanvas().style.cursor = 'pointer';
			}
		});
		map.addInteraction('nidus-mouseleave-interaction', {
			type: 'mouseleave',
			target: { layerId: 'nidus' },
			handler: () => {
				map.getCanvas().style.cursor = '';
			}
		});
		map.on('sourcedata', (e) => {
			if (e.sourceId == 'tegola-mosquito' && e.isSourceLoaded) {
				setDistrictColors(map)
			}
		});
		console.log("Map post-load done.");
	});
	
	map.addControl(new mapboxgl.NavigationControl());
	console.log("Map init done.");

	/*const address = document.getElementById('address');
	const suggestionsContainer = document.getElementById('suggestions');
	addressSuggestionEnable(address, suggestionsContainer);*/
	const addressDisplay = document.querySelector("address-display");
	const addressInput = document.querySelector("address-input");
	addressInput.addEventListener("address-selected", (event) => {
		const l = event.detail.location;
		// Center map on selected address

		map.jumpTo({
			center: l.geometry.coordinates,
			zoom: 14,
		});

		// Add marker for selected address
		const marker = new mapboxgl.Marker({
			color: "#FF0000",
			draggable: false
		}).setLngLat(l.geometry.coordinates).addTo(map);

		addressDisplay.show(l);
		fetchDistrict(l.geometry.coordinates[0], l.geometry.coordinates[1]);
	});
}
document.addEventListener("DOMContentLoaded", onLoad);
</script>
<style>
body {
	background-color: #f8f9fa;
}
.detail-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	color: #6c757d;
	margin-bottom: 2px;
	font-weight: 600;
}
.dashboard-container {
	padding: 20px 0;
}
.stats-card {
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	transition: transform 0.2s;
	height: 100%;
}
.stats-card:hover {
	transform: translateY(-5px);
}
.map-container {
	background-color: #e9ecef;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
#map {
	height: 500px;
	width:100%;
	margin-bottom: 10px;
}
#map img {
	max-width: none;
	min-width: 0px;
	height: auto;
}
.section-title {
	margin: 30px 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dee2e6;
}
.last-refreshed {
	color: #6c757d;
}
.logo-placeholder {
	width: 100px;
	height: 40px;
	background-color: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.metric-icon {
	font-size: 2rem;
	margin-bottom: 10px;
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
}
.metric-value {
	font-size: 2rem;
	font-weight: bold;
}
.syncing {
	color: #28a745;
	animation: fa-spin 2s linear infinite;
}
</style>
{{end}}
{{define "content"}}
<div class="container my-4">
	<div class="card-body p-0">
		<div class="mb-3 position-relative">
			<address-input
					placeholder="Start typing an address (min 3 characters)"
					api-key="{{ .MapboxToken }}">
			</address-input>
		</div>
		<div class="mt-3">
		</div>
	</div>
	<div class="card-body p-0">
		<div class="map-container" id="map-container">
			<div id="map"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-6">
			<div class="card-body p-0">
				<address-display></address-display>
			</div>
		</div>
		<div class="col-6">
			<div class="district-display" class="mt-4 ">
				<h5 class="mb-3">District Details</h5>
				<div class="location-card p-3 mb-3">
					<div class="district-detail">
						<div class="detail-label">Agency</div>
						<div class="detail-value" id="district-agency">-</div>
					</div>
					<div class="district-detail">
						<div class="detail-label">Manager</div>
						<div class="agency detail-value" id="district-manager">-</div>
					</div>
					<div class="district-detail">
						<div class="detail-label">Phone</div>
						<div class="agency detail-value" id="district-phone">-</div>
					</div>
					<div class="district-detail">
						<div class="detail-label">Website</div>
						<div class="agency detail-value" id="district-website">-</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{end}}