/* MIPIEL Taller — JS del configurador (solicitud sin pago) */
(function () {
	'use strict';

	document.addEventListener('DOMContentLoaded', function () {
		var raiz = document.querySelector('[data-mt-config]');
		if (!raiz) { return; }

		var cfg = window.mipielTaller || {};
		var gracias = document.querySelector('[data-mt-gracias]');
		var boton = raiz.querySelector('[data-mt-enviar]');
		var error = raiz.querySelector('[data-mt-error]');
		var enviando = false;

		function elegido(nombre) {
			return raiz.querySelector('input[name="' + nombre + '"]:checked');
		}

		function valorDe(el, attr) {
			return el ? (el.getAttribute(attr) || '') : '';
		}

		function texto(el) {
			return el ? (el.value || '').trim() : '';
		}

		function campo(nombre) {
			return raiz.querySelector('[name="' + nombre + '"]');
		}

		function capitalizar(s) {
			return s.charAt(0).toUpperCase() + s.slice(1);
		}

		function lineas() {
			var l = [];
			var modelo = elegido('mt_modelo');
			var piel = elegido('mt_piel');
			var color = elegido('mt_color');

			if (modelo) { l.push('Modelo: ' + valorDe(modelo, 'data-nombre')); }
			if (piel) { l.push('Piel: ' + valorDe(piel, 'data-nombre')); }
			if (color) { l.push('Color: ' + valorDe(color, 'data-nombre')); }

			['hilo', 'herraje', 'cierre'].forEach(function (campoNombre) {
				var el = elegido('mt_' + campoNombre);
				if (el) { l.push(capitalizar(campoNombre) + ': ' + valorDe(el, 'data-nombre')); }
			});

			var grabado = raiz.querySelector('input[name="mt_grabado"]');
			if (grabado && grabado.value.trim()) {
				l.push('Grabado: "' + grabado.value.trim() + '"');
			}

			var medidas = raiz.querySelector('input[name="mt_medidas"]');
			if (medidas && medidas.value.trim()) {
				l.push('Medidas: ' + medidas.value.trim());
			}

			var codigo = raiz.querySelector('input[name="mt_codigo"]');
			if (codigo && codigo.value.trim()) {
				l.push('Código de muestreador: ' + codigo.value.trim().toUpperCase());
			}

			return l;
		}

		function config() {
			var datos = {};
			['modelo', 'piel', 'color', 'hilo', 'herraje', 'cierre'].forEach(function (campoNombre) {
				datos[campoNombre] = valorDe(elegido('mt_' + campoNombre), 'value');
			});
			datos.grabado = texto(raiz.querySelector('input[name="mt_grabado"]'));
			datos.medidas = texto(raiz.querySelector('input[name="mt_medidas"]'));
			datos.codigo = texto(raiz.querySelector('input[name="mt_codigo"]')).toUpperCase();
			return datos;
		}

		function pintar() {
			var l = lineas();
			var lista = raiz.querySelector('[data-mt-lista]');
			var titulo = raiz.querySelector('[data-mt-titulo]');
			var modelo = elegido('mt_modelo');

			if (l.length) {
				lista.innerHTML = '';
				l.forEach(function (item) {
					var li = document.createElement('li');
					li.textContent = item;
					lista.appendChild(li);
				});
			} else {
				lista.innerHTML = '<li class="mt-vacio">Aún no has elegido nada.</li>';
			}

			titulo.textContent = modelo ? 'Tu ' + valorDe(modelo, 'data-nombre') : 'Elige un modelo';

			if (boton) {
				boton.disabled = !(elegido('mt_modelo') && elegido('mt_piel') && elegido('mt_color'));
			}
		}

		raiz.addEventListener('change', pintar);
		raiz.addEventListener('input', function (e) {
			if (!e.target.matches('input[type="radio"], input[type="checkbox"]')) {
				pintar();
			}
		});
		pintar();

		function emailValido(valor) {
			return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(valor);
		}

		function mostrarError(mensaje) {
			if (!error) { return; }
			error.textContent = mensaje;
			error.scrollIntoView({ behavior: 'smooth', block: 'center' });
		}

		function validar() {
			var nombre = texto(campo('mt_nombre'));
			var correo = texto(campo('mt_correo'));
			var consentimiento = campo('mt_consentimiento') && campo('mt_consentimiento').checked;

			if (!nombre) {
				mostrarError('Escribe tu nombre para continuar.');
				return null;
			}
			if (!emailValido(correo)) {
				mostrarError('Revisa tu correo: no parece válido.');
				return null;
			}
			if (!consentimiento) {
				mostrarError('Necesitamos tu consentimiento para contactarte.');
				return null;
			}

			return {
				nombre: nombre,
				correo: correo,
				whatsapp: texto(campo('mt_whatsapp')),
				ciudad: texto(campo('mt_ciudad')),
				notas: texto(campo('mt_notas')),
				consentimiento: consentimiento,
				alternativas: campo('mt_alternativas') && campo('mt_alternativas').checked,
				web: campo('mt_web') ? campo('mt_web').value : ''
			};
		}

		if (boton) {
			boton.addEventListener('click', function () {
				if (enviando) { return; }
				if (error) { error.textContent = ''; }

				if (!(elegido('mt_modelo') && elegido('mt_piel') && elegido('mt_color'))) {
					mostrarError('Elige modelo, piel y color para continuar.');
					return;
				}

				var datosContacto = validar();
				if (!datosContacto) { return; }

				enviando = true;
				boton.disabled = true;
				boton.textContent = 'Enviando…';

				var datos = new FormData();
				datos.append('action', 'mipiel_enviar_solicitud');
				datos.append('nonce', cfg.nonce);
				datos.append('config', JSON.stringify(config()));
				datos.append('mt_nombre', datosContacto.nombre);
				datos.append('mt_correo', datosContacto.correo);
				datos.append('mt_whatsapp', datosContacto.whatsapp);
				datos.append('mt_ciudad', datosContacto.ciudad);
				datos.append('mt_notas', datosContacto.notas);
				datos.append('mt_consentimiento', datosContacto.consentimiento ? '1' : '');
				datos.append('mt_alternativas', datosContacto.alternativas ? '1' : '');
				datos.append('mt_web', datosContacto.web);

				fetch(cfg.ajaxUrl, { method: 'POST', body: datos, credentials: 'same-origin' })
					.then(function (r) { return r.json(); })
					.then(function (res) {
						if (!res || !res.success) {
							enviando = false;
							boton.disabled = false;
							boton.textContent = 'Enviar mi diseño al taller';
							mostrarError((res && res.data && res.data.mensaje) ? res.data.mensaje : 'Algo salió mal. Intenta de nuevo.');
							return;
						}
						mostrarGracias(res.data, datosContacto);
					})
					.catch(function () {
						enviando = false;
						boton.disabled = false;
						boton.textContent = 'Enviar mi diseño al taller';
						mostrarError('No pudimos conectar. Revisa tu internet e inténtalo de nuevo.');
					});
			});
		}

		function mostrarGracias(datos, contacto) {
			if (!gracias) { return; }

			raiz.setAttribute('hidden', 'hidden');

			var nombreEl = gracias.querySelector('[data-mt-gracias-nombre]');
			var idEl = gracias.querySelector('[data-mt-gracias-id]');
			var lista = gracias.querySelector('[data-mt-gracias-lista]');
			var correoEl = gracias.querySelector('[data-mt-gracias-correo]');

			if (nombreEl) { nombreEl.textContent = contacto.nombre.split(' ')[0]; }
			if (idEl) { idEl.textContent = datos.codigo; }

			if (lista) {
				lista.innerHTML = '';
				(datos.resumen || []).forEach(function (item) {
					var li = document.createElement('li');
					li.textContent = item;
					lista.appendChild(li);
				});
			}

			if (correoEl) {
				if (datos.correos_activos && datos.correo_enviado) {
					correoEl.textContent = 'También te enviamos una copia a ' + datos.correo + '.';
				} else {
					correoEl.textContent = 'Guardamos tu correo para contactarte.';
				}
			}

			gracias.removeAttribute('hidden');
			gracias.scrollIntoView({ behavior: 'smooth', block: 'start' });

			var copiar = gracias.querySelector('[data-mt-copiar]');
			if (copiar) {
				copiar.addEventListener('click', function () {
					var resumen = 'Solicitud ' + datos.codigo + '\n\n' + (datos.resumen || []).join('\n') + '\n\nSin pago ahora. Te contactamos en 1 a 2 días hábiles.';
					if (navigator.clipboard && navigator.clipboard.writeText) {
						navigator.clipboard.writeText(resumen).then(function () { avisoCopiado(copiar); });
					} else {
						var ta = document.createElement('textarea');
						ta.value = resumen;
						document.body.appendChild(ta);
						ta.select();
						document.execCommand('copy');
						ta.remove();
						avisoCopiado(copiar);
					}
				});
			}
		}

		function avisoCopiado(botonCopiar) {
			var original = botonCopiar.textContent;
			botonCopiar.textContent = 'Copiado';
			setTimeout(function () { botonCopiar.textContent = original; }, 1800);
		}
	});
})();