$(function () {
  // Pantalla 2 según etapa procesal. tipo: 'radio' | 'checkbox'. "Otra" salta la pantalla 2.
  const ETAPAS = {
    'Conciliación': { titulo: 'Conciliación', pregunta: '7. Acuerdo conciliación *', tipo: 'radio',
      opciones: ['Audiencia de conciliación', 'Pretensión del CCL', 'Constancia de no conciliación', 'Convenio'] },
    'Escrita': { titulo: 'Escrita', pregunta: '7. Acuerdo etapa escrita *', tipo: 'radio',
      opciones: ['Contestación', 'Réplica', 'Contrarréplica'] },
    'Oral': { titulo: 'Oral', pregunta: '7. Acuerdo etapa oral *', tipo: 'radio',
      opciones: ['Acta mínima preliminar', 'Acta mínima incidental', 'Acta mínima juicio', 'Sentencia'] },
    'Ejecución': { titulo: 'Ejecución', pregunta: '7. Acuerdo etapa ejecución *', tipo: 'radio',
      opciones: ['Auto de requerimiento de pago y embargo', 'Diligencia de pago y embargo'] },
    'Amparo': { titulo: 'Amparo', pregunta: '7. Acuerdo etapa amparo *', tipo: 'radio',
      opciones: ['Escrito inicial de amparo', 'Recepción del amparo', 'Notificación del amparo',
        'Radicación del amparo por el colegiado', 'Resolución de la suspensión', 'Resolución del amparo'] },
    'Otra': null
  };
  const MAX_MB = 10;
  const EXT_OK = ['doc','docx','xls','xlsx','ppt','pptx','pdf','jpg','jpeg','png','gif','mp4','mov','avi','mp3','wav'];

  let actual = 1;
  const $frm = $('#frm');

  const etapaSel = () => $('input[name=etapa]:checked').val();
  const esOtra = () => etapaSel() === 'Otra';

  function marcar($campo, msg) {
    $campo.toggleClass('invalido', !!msg).find('.error').first().text(msg || '');
    return !msg;
  }

  // ---------- Validaciones por pantalla ----------
  function validar(p) {
    let ok = true;
    if (p === 1) {
      const RE_NOMBRE = /^[A-Za-zÁÉÍÓÚÜÑáéíóúüñ .'-]+$/;
      const nombre = $.trim($('#nombre').val());
      ok = marcar($('#nombre').closest('.campo'),
        !nombre ? 'Escribe el/los nombre(s).'
        : nombre.length < 2 ? 'Escribe al menos 2 caracteres.'
        : !RE_NOMBRE.test(nombre) ? 'Usa solo letras y espacios.' : '') && ok;
      const apPat = $.trim($('#apellido_paterno').val());
      ok = marcar($('#apellido_paterno').closest('.campo'),
        !apPat ? 'Escribe el apellido paterno.'
        : apPat.length < 2 ? 'Escribe al menos 2 caracteres.'
        : !RE_NOMBRE.test(apPat) ? 'Usa solo letras y espacios.' : '') && ok;
      const apMat = $.trim($('#apellido_materno').val());
      ok = marcar($('#apellido_materno').closest('.campo'),
        apMat && !RE_NOMBRE.test(apMat) ? 'Usa solo letras y espacios.' : '') && ok;
      ok = marcar($('[data-grupo=juicio]'), $('input[name=juicio]:checked').length ? '' : 'Selecciona el tipo de juicio.') && ok;
      const exp = $.trim($('#expediente').val());
      ok = marcar($('#expediente').closest('.campo'),
        !exp ? 'Escribe el número de expediente.'
        : !/^[A-Za-z0-9\/\-. ]{3,30}$/.test(exp) ? 'Usa letras, números, "/" o "-" (3 a 30 caracteres).' : '') && ok;
      ['ciudad', 'estado'].forEach(id => {
        const v = $.trim($('#' + id).val());
        ok = marcar($('#' + id).closest('.campo'),
          !v ? 'Este campo es obligatorio.'
          : !/^[A-Za-zÁÉÍÓÚÜÑáéíóúüñ .'-]{2,60}$/.test(v) ? 'Usa solo letras y espacios.' : '') && ok;
      });
      ok = marcar($('[data-grupo=etapa]'), etapaSel() ? '' : 'Selecciona la etapa procesal.') && ok;
    }
    if (p === 2) {
      ok = marcar($('[data-grupo=acuerdo_etapa]'),
        $('#opcionesEtapa input:checked').length ? '' : 'Selecciona al menos una opción.') && ok;
      if (etapaSel() === 'Escrita') {
        const fecha = $('#fecha_audiencia_preliminar').val();
        ok = marcar($('[data-grupo=fecha_audiencia]'), fecha ? '' : 'Indica la fecha de audiencia preliminar.') && ok;
      }
    }
    if (p === 3) {
      const files = archivosSeleccionados;
      let msg = '';
      if (!files.length) msg = 'Carga al menos un archivo.';
      else {
        const malo = files.find(f =>
          f.size > MAX_MB * 1024 * 1024 || EXT_OK.indexOf(f.name.split('.').pop().toLowerCase()) < 0);
        if (malo) msg = 'Revisa "' + malo.name + '": tamaño o tipo no permitido.';
      }
      ok = marcar($('[data-grupo=archivo]'), msg) && ok;
      const obs = $.trim($('#observaciones').val());
      ok = marcar($('#observaciones').closest('.campo'),
        esOtra() && !obs ? 'Con etapa "Otra", indica qué documento subes.' : '') && ok;
    }
    if (!ok) $('.pantalla.activa .invalido').first()[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
    return ok;
  }

  // ---------- Navegación ----------
  function construirPantalla2() {
    const cfg = ETAPAS[etapaSel()];
    $('#tituloEtapa').text(cfg.titulo);
    $('#preguntaEtapa').text(cfg.pregunta);
    const html = cfg.opciones.map(o =>
      '<label><input ' + (cfg.tipo === 'radio' ? 'class="with-gap" type="radio"' : 'class="filled-in" type="checkbox"') +
      ' name="acuerdo_etapa[]" value="' + o + '"><span>' + o + '</span></label>').join('');
    $('#opcionesEtapa').html(html);

    const esEscrita = etapaSel() === 'Escrita';
    $('#campoFechaAudiencia').prop('hidden', !esEscrita);
    if (!esEscrita) $('#fecha_audiencia_preliminar').val('');
  }

  function ir(p) {
    actual = p;
    $('.pantalla').removeClass('activa').filter('[data-pantalla=' + p + ']').addClass('activa');
    $('#pasos li').each(function () {
      const n = +$(this).data('p');
      $(this).toggleClass('activo', n === p).toggleClass('hecho', n < p);
    });
    $('#btnAtras').prop('hidden', p === 1);
    $('#btnSiguiente').prop('hidden', p === 3);
    $('#btnEnviar').prop('hidden', p !== 3);
    $('#lblObs').text(esOtra() ? '8. Observaciones *' : '8. Observaciones');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  $('#btnSiguiente').on('click', function () {
    if (!validar(actual)) return;
    if (actual === 1) {
      if (esOtra()) { $('#pasoEtapa').addClass('oculto'); return ir(3); }
      $('#pasoEtapa').removeClass('oculto');
      construirPantalla2();
      return ir(2);
    }
    ir(3);
  });

  $('#btnAtras').on('click', function () {
    ir(actual === 3 && !esOtra() ? 2 : 1);
  });

  // Si cambia la etapa, se reinicia el camino alterno
  $('input[name=etapa]').on('change', function () {
    $('#opcionesEtapa').empty();
    $('#campoFechaAudiencia').prop('hidden', true);
    $('#fecha_audiencia_preliminar').val('');
    $('#pasoEtapa').toggleClass('oculto', esOtra());
  });

  // Limpia errores al escribir
  $frm.on('input change', '.invalido input', function () { $(this).closest('.campo').removeClass('invalido'); });

  // ---------- Archivos (múltiples, acumulables) ----------
  let archivosSeleccionados = [];

  function pintarLista() {
    const $ul = $('#listaArchivos').empty();
    archivosSeleccionados.forEach((f, i) => {
      const malo = f.size > MAX_MB * 1024 * 1024 || EXT_OK.indexOf(f.name.split('.').pop().toLowerCase()) < 0;
      $('<li>').toggleClass('malo', malo)
        .append($('<span>').text(f.name + ' — ' + (f.size / 1024 / 1024).toFixed(1) + ' MB'))
        .append($('<button type="button" aria-label="Quitar archivo">×</button>').on('click', () => {
          archivosSeleccionados.splice(i, 1); pintarLista();
        }))
        .appendTo($ul);
    });
  }

  $('#btnArchivo').on('click', () => $('#archivo').trigger('click'));
  $('#archivo').on('change', function () {
    archivosSeleccionados = archivosSeleccionados.concat(Array.from(this.files));
    this.value = ''; // permite volver a abrir el explorador y sumar más archivos
    pintarLista();
    $('[data-grupo=archivo]').removeClass('invalido');
  });

  // ---------- Envío (guardado simulado + PDF) ----------
  $frm.on('submit', function (e) {
    e.preventDefault();
    if (!validar(3)) return;
    $('#etapa_acuerdo_valor').val(
      esOtra() ? 'N/A (Otra)' : $('#opcionesEtapa input:checked').map((_, i) => i.value).get().join(', '));

    const fd = new FormData(this);
    fd.delete('archivo[]');
    archivosSeleccionados.forEach(f => fd.append('archivo[]', f));
    const $b = $('#btnEnviar').prop('disabled', true).text('Enviando…');

    $.ajax({ url: 'guardar.php', method: 'POST', data: fd, processData: false, contentType: false, dataType: 'json' })
      .done(function (r) {
        if (!r.ok) {
          M.toast({ html: r.mensaje || 'No se pudo guardar.', classes: 'red darken-1' });
          if (r.errores) Object.keys(r.errores).forEach(k => M.toast({ html: r.errores[k], classes: 'red darken-1' }));
          return;
        }
        $('#folio').text(r.folio);
        $('#lnkPdf').attr('href', r.pdf);
        $frm.prop('hidden', true); $('#pasos').prop('hidden', true); $('#resultado').prop('hidden', false);
        const a = document.createElement('a'); a.href = r.pdf; a.download = ''; document.body.appendChild(a); a.click(); a.remove();
      })
      .fail(function (xhr) {
        console.error('ERROR PHP:', xhr.responseText);
        M.toast({ html: 'Error del servidor. Revisa la consola.', classes: 'red darken-1' });
      })
      .always(() => $b.prop('disabled', false).text('Enviar'));
  });

  $('#btnNuevo').on('click', () => location.reload());
});