/**
 * Tela de cadastro da obra:
 * - título limitado a 40 caracteres, com rótulo, dica e contador visual;
 * - contador visual no descritivo breve (160 caracteres);
 * - mapa Leaflet/OSM pra marcar as coordenadas clicando, sem digitar.
 */
(function ($) {
	'use strict';

	var MARINGA = [-23.4205, -51.9331];

	/**
	 * Barra fina que cresce conforme o texto se aproxima do limite.
	 */
	function criaContador(campo, maximo, ciano) {
		var barra = document.createElement('span');
		barra.className = 'mfm-contador';
		var fill = document.createElement('span');
		fill.className = 'mfm-contador__fill' + (ciano ? ' mfm-contador__fill--ciano' : '');
		barra.appendChild(fill);
		campo.insertAdjacentElement('afterend', barra);

		function atualiza() {
			fill.style.width = Math.min(100, (campo.value.length / maximo) * 100) + '%';
		}
		campo.addEventListener('input', atualiza);
		atualiza();
	}

	$(function () {
		// ----- Título breve: rótulo + contador + dica -----------------
		var titulo = document.getElementById('title');
		var tituloDiv = document.getElementById('titlediv');
		if (titulo && tituloDiv) {
			titulo.maxLength = 40;

			var rotulo = document.createElement('label');
			rotulo.className = 'mfm-titulo-label';
			rotulo.htmlFor = 'title';
			rotulo.innerHTML = 'Título breve <span class="mfm-hint">— máx. 40 caracteres</span>';
			tituloDiv.insertAdjacentElement('beforebegin', rotulo);

			criaContador(titulo, 40, false);

			var dica = document.createElement('p');
			dica.className = 'mfm-titulo-dica';
			dica.textContent = 'Aparece no card e no pin do mapa. Ex.: "Contorno Sul", "UBS Zona Norte".';
			tituloDiv.insertAdjacentElement('afterend', dica);
		}

		// ----- Descritivo breve: contador ciano ------------------------
		var descritivo = document.querySelector('.mfm-campo-descritivo textarea');
		if (descritivo) {
			criaContador(descritivo, 160, true);
		}

		// ----- Mapa de coordenadas -------------------------------------
		var el = document.getElementById('mfm-mapa-obra');
		if (!el || typeof L === 'undefined') {
			return;
		}

		var $lat = $('.mfm-campo-lat input[type="text"]');
		var $lng = $('.mfm-campo-lng input[type="text"]');

		function coordsSalvas() {
			var lat = parseFloat($lat.val());
			var lng = parseFloat($lng.val());
			return isNaN(lat) || isNaN(lng) ? null : [lat, lng];
		}

		var salvas = coordsSalvas();
		var map = L.map(el).setView(salvas || MARINGA, salvas ? 16 : 12);
		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; OpenStreetMap'
		}).addTo(map);

		var marker = null;

		function posiciona(latlng, preenche) {
			if (marker) {
				marker.setLatLng(latlng);
			} else {
				marker = L.marker(latlng, { draggable: true }).addTo(map);
				marker.on('dragend', function () {
					preencheCampos(marker.getLatLng());
				});
			}
			if (preenche) {
				preencheCampos(L.latLng(latlng));
			}
		}

		function preencheCampos(latlng) {
			$lat.val(latlng.lat.toFixed(6)).trigger('change');
			$lng.val(latlng.lng.toFixed(6)).trigger('change');
		}

		if (salvas) {
			posiciona(salvas, false);
		}

		map.on('click', function (e) {
			posiciona(e.latlng, true);
		});

		// Digitou/colou coordenadas na mão? Move o marcador junto.
		$lat.add($lng).on('change', function () {
			var c = coordsSalvas();
			if (c) {
				posiciona(c, false);
				map.setView(c, Math.max(map.getZoom(), 14));
			}
		});
	});
})(jQuery);
