function fechaHoy() { return new Date().toISOString().slice(0, 10); }
function IngresoMasivo({ onNavigate }) {
  return <IngresoMasivoForm onNavigate={onNavigate} />;
}

// Sirve para registrar 1 sola batería o cientos en lote.
function IngresoMasivoForm({ onNavigate }) {
  const toast = useToast();
  const esLuz = false;
  // Datos del producto, solo para luces. El modelo es obligatorio: el
  // procedimiento de la base lo exige y la pantalla no lo enviaba.
  const [modeloLuz, setModeloLuz] = React.useState('IPLE-01');
  const [tipoEnchufe, setTipoEnchufe] = React.useState('');
  const endpoint = esLuz ? '/movimientos-luces/ingreso-masivo' : '/movimientos-baterias/ingreso-masivo';
  const etiqueta = esLuz ? 'luz' : 'batería';

  const [codigos, setCodigos] = React.useState([]);
  const [codigoInput, setCodigoInput] = React.useState('');
  const [camaraAbierta, setCamaraAbierta] = React.useState(false);
  const [empleados, setEmpleados] = React.useState([]);
  const [proveedores, setProveedores] = React.useState([]);
  const [recibeId, setRecibeId] = React.useState('');
  // Origen del ingreso: solo aplica a Baterías (Mejora: Ingreso Masivo - Origen del ingreso).
  const [origenTipo, setOrigenTipo] = React.useState('PROVEEDOR');
  const [proveedorId, setProveedorId] = React.useState('');
  const [origenTexto, setOrigenTexto] = React.useState('');
  const [fecha, setFecha] = React.useState(fechaHoy);
  const [comentario, setComentario] = React.useState('');
  const [enviando, setEnviando] = React.useState(false);
  const [resultado, setResultado] = React.useState(null);
  const [modalCodigoRegistrado, setModalCodigoRegistrado] = React.useState(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    Api.get('/empleados', { activos: 'true' }).then((r) => setEmpleados(r.data)).catch(() => {});
    if (!esLuz) Api.get('/proveedores', { activos: 'true' }).then((r) => setProveedores(r.data)).catch(() => {});
    inputRef.current && inputRef.current.focus();
  }, []);

  const agregarCodigo = (codigoCrudo) => {
    const codigo = (codigoCrudo || '').trim();
    if (!codigo) return;
    setCodigos((prev) => {
      const yaExiste = prev.some((c) => c.codigo === codigo);
      return [...prev, { codigo, esDuplicado: yaExiste }];
    });
    setCodigoInput('');
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };
  const quitarCodigo = (idx) => setCodigos((prev) => prev.filter((_, i) => i !== idx));
  const totalDuplicados = codigos.filter((c) => c.esDuplicado).length;

  const registrar = async () => {
    if (codigos.length === 0) { toast.error(`Escanea al menos una ${etiqueta}`); return; }
    if (!recibeId) { toast.error('Selecciona quién recibe el lote'); return; }
    if (!esLuz && origenTipo === 'PROVEEDOR' && !proveedorId) {
      toast.error('Selecciona un proveedor registrado'); return;
    }

    setEnviando(true);
    try {
      const res = await Api.post(endpoint, {
        codigos: codigos.map((c) => c.codigo),
        empleado_recibe_id: Number(recibeId),
        ...(esLuz ? {
          modelo: modeloLuz,
          tipo_enchufe: tipoEnchufe || undefined,
        } : {
          origen_tipo: origenTipo,
          proveedor_id: origenTipo === 'PROVEEDOR' && proveedorId ? Number(proveedorId) : undefined,
          origen_texto: origenTipo !== 'PROVEEDOR' ? origenTexto.trim() || undefined : undefined,
        }),
        comentario: comentario || undefined,
        fecha: fecha,
      });
      setResultado(res);
      const codigosYaRegistrados = (res.errores || [])
        .filter((e) => e.tipo === 'CODIGO_YA_REGISTRADO')
        .map((e) => e.codigo)
        .filter(Boolean);
      if (codigosYaRegistrados.length > 0 && !esLuz) {
        setModalCodigoRegistrado({ codigos: codigosYaRegistrados });
      } else {
        toast.success(`Lote ${res.numero_lote}: ${res.registradas.length} ${esLuz ? 'luces' : 'baterías'} registradas`);
      }
      // Reset completo tras éxito confirmado por el backend (Mejora: reset de formulario).
      // Si el registro falla, no se llega a este bloque y los datos quedan intactos.
      setCodigos([]);
      setRecibeId('');
      setOrigenTipo('PROVEEDOR');
      setProveedorId('');
      setOrigenTexto('');
      setFecha(fechaHoy());
      setComentario('');
    } catch (err) {
      const codigosYaRegistrados = err.details?.tipo === 'CODIGO_YA_REGISTRADO'
        ? (err.details.codigos || []).filter(Boolean)
        : [];
      if (codigosYaRegistrados.length > 0 && !esLuz) {
        setModalCodigoRegistrado({ codigos: codigosYaRegistrados });
      } else {
        toast.error(err.message);
      }
    } finally {
      setEnviando(false);
    }
  };

  const onKeyDown = (e) => { if (e.key === 'Enter') { e.preventDefault(); agregarCodigo(codigoInput); } };
  const onCamaraDetecta = (texto) => { setCamaraAbierta(false); agregarCodigo(texto); };

  return (
    <div>
      <div className="scan-hero">
        {esLuz ? <IconBulb size={28} style={{ marginBottom: 12, opacity: .85 }} /> : <IconScan size={28} style={{ marginBottom: 12, opacity: .85 }} />}
        <input
          ref={inputRef}
          className="scan-hero__code-input"
          placeholder={`Escanea ${esLuz ? 'luces' : 'baterías'} (una o varias)…`}
          value={codigoInput}
          onChange={(e) => setCodigoInput(e.target.value)}
          onKeyDown={onKeyDown}
          autoFocus
        />
        <p className="scan-hero__hint">Cada código se agrega a la lista de abajo. Sirve para registrar 1 sola o cientos. Nada se guarda todavía.</p>
        <div className="scan-hero__actions">
          <button className="btn btn-primary" onClick={() => agregarCodigo(codigoInput)}>Agregar</button>
          <button className="btn btn-ghost" onClick={() => setCamaraAbierta(true)} style={{ background: 'rgba(255,255,255,.08)', color: 'white', borderColor: 'rgba(255,255,255,.25)' }}>
            <IconCamera size={16} /> Usar cámara
          </button>
        </div>
      </div>

      <ScannerCamera open={camaraAbierta} onClose={() => setCamaraAbierta(false)} onDetected={onCamaraDetecta} />

      <div className="grid-2">
        <div className="panel">
          <div className="panel__header">
            <div className="panel__title">{esLuz ? 'Luces' : 'Baterías'} escaneadas</div>
            <button className="btn btn-ghost btn-sm" disabled={codigos.length === 0} onClick={() => setCodigos([])}>Vaciar lista</button>
          </div>

          <div className="scan-counter-row">
            <div className="scan-counter"><div className="scan-counter__value">{codigos.length}</div><div className="scan-counter__label">Escaneadas</div></div>
            <div className="scan-counter"><div className="scan-counter__value" style={{ color: totalDuplicados ? 'var(--st-extraviada)' : undefined }}>{totalDuplicados}</div><div className="scan-counter__label">Duplicadas</div></div>
          </div>

          <div className="scan-list">
            {codigos.length === 0 && <div className="scan-list__empty">Todavía no escaneas ninguna {etiqueta}</div>}
            {codigos.map((c, i) => (
              <div key={i} className={`scan-list__row ${c.esDuplicado ? 'is-duplicate' : ''}`}>
                <span className="scan-list__code">{c.codigo}</span>
                {c.esDuplicado && <span className="scan-list__error">Repetida en esta lista</span>}
                <button className="scan-list__remove" onClick={() => quitarCodigo(i)} title="Quitar"><IconX size={15} /></button>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel__header"><div className="panel__title">Datos del lote</div></div>
          <div className="stack-y">
            {/* Datos del producto. Solo para luces: el modelo es obligatorio y
                la pantalla no lo enviaba, asi que el ingreso de luces fallaba
                en cuanto llegaba al procedimiento de la base. */}
            {esLuz && (
              <>
                <div className="field">
                  <label>Tipo de luz</label>
                  <select value={modeloLuz} onChange={(e) => setModeloLuz(e.target.value)} required>
                    <option value="IPLE-01">IPLE-01</option>
                    <option value="IPLE-01-ABS">IPLE-01-ABS</option>
                  </select>
                </div>
                <div className="field">
                  <label>Tipo de enchufe</label>
                  <select value={tipoEnchufe} onChange={(e) => setTipoEnchufe(e.target.value)}>
                    <option value="">Sin especificar</option>
                    <option value="Triangular">Triangular</option>
                    <option value="Lineal">Lineal</option>
                  </select>
                </div>
              </>
            )}

            {!esLuz && (
              <div className="field">
                <label>Origen del ingreso</label>
                <select value={origenTipo} onChange={(e) => { setOrigenTipo(e.target.value); setProveedorId(''); setOrigenTexto(''); }}>
                  <option value="PROVEEDOR">Proveedor</option>
                  <option value="OTRO">Otro</option>
                </select>
              </div>
            )}

            {!esLuz && origenTipo === 'PROVEEDOR' && (
              <div className="field">
                <label>Proveedor</label>
                <Combobox
                  options={proveedores.map((p) => ({ value: String(p.id), label: p.nombre }))}
                  value={proveedorId}
                  onChange={(v) => { setProveedorId(v); }}
                  placeholder="Selecciona o busca un proveedor…"
                />
              </div>
            )}

            {!esLuz && origenTipo === 'OTRO' && (
              <div className="field">
                <label>Detalle del origen (opcional)</label>
                <input value={origenTexto} onChange={(e) => setOrigenTexto(e.target.value)} placeholder="Ej. Traslado interno" />
              </div>
            )}

            <div className="field">
              <label>Quién recibe</label>
              <select value={recibeId} onChange={(e) => setRecibeId(e.target.value)} required>
                <option value="">Selecciona…</option>
                {empleados.map((e) => <option key={e.id} value={e.id}>{e.nombre} - {(e.area_nombre || '').toUpperCase()}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Fecha</label>
              <input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
            </div>
            <div className="field">
              <label>Comentario</label>
              <input value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder={`Ej. Lote proveedor XYZ`} />
            </div>
          </div>
          <p className="text-muted" style={{ fontSize: 13, marginTop: 4 }}>
            Solo se permite códigos nuevos.
          </p>
          <button className="btn btn-primary btn-block" disabled={enviando || codigos.length === 0} onClick={registrar} style={{ marginTop: 8 }}>
            {enviando ? 'Registrando…' : `Registrar Ingreso (${codigos.length})`}
          </button>
        </div>
      </div>

      {resultado && <ResultadoLote resultado={resultado} tituloOk={`${esLuz ? 'luces' : 'baterías'} registradas`} />}

      {modalCodigoRegistrado && (
        <ModalCodigoYaRegistrado
          codigos={modalCodigoRegistrado.codigos}
          onClose={() => setModalCodigoRegistrado(null)}
          onIrADevolucion={() => {
            setModalCodigoRegistrado(null);
            if (onNavigate) onNavigate('devolucion');
          }}
        />
      )}
    </div>
  );
}

function ModalCodigoYaRegistrado({ codigos, onClose, onIrADevolucion }) {
  const lista = Array.isArray(codigos) ? codigos : [];
  return (
    <div className="modal-overlay modal-overlay--alert" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card modal-card--registered" role="dialog" aria-modal="true" aria-labelledby="codigo-registrado-title">
        <div className="modal-alert-icon"><IconAlert size={28} /></div>
        <div className="modal-card__body modal-card__body--alert">
          <div className="modal-alert-eyebrow">Ingreso no permitido</div>
          <h2 id="codigo-registrado-title" className="modal-alert-title">Batería ya registrada</h2>
          <p className="modal-alert-text">
            Esta batería ya se encuentra registrada en el sistema y <strong>no puede volver a ingresar mediante Ingreso Masivo</strong>.
          </p>

          <div className="modal-alert-codes">
            <div className="modal-alert-codes__label">Código{lista.length > 1 ? 's' : ''} detectado{lista.length > 1 ? 's' : ''}</div>
            {lista.map((codigo) => (
              <div key={codigo} className="modal-alert-code">
                <IconBattery size={17} />
                <span>{codigo}</span>
              </div>
            ))}
          </div>

          <div className="modal-alert-help">
            <div className="modal-alert-help__icon"><IconHistory size={18} /></div>
            <div>
              <strong>¿La batería está regresando?</strong>
              <p>Registra su retorno desde <b>Devolución</b>, donde podrás indicar el tipo de devolución correspondiente.</p>
            </div>
          </div>
        </div>
        <div className="modal-card__footer modal-card__footer--alert">
          <button className="btn btn-ghost" onClick={onClose}>Entendido</button>
          <button className="btn btn-primary" onClick={onIrADevolucion}>
            Ir a Devolución <IconArrowRight size={15} />
          </button>
        </div>
      </div>
    </div>
  );
}

// Panel de resumen reutilizado por Ingreso Masivo, Salida Masiva y Asignación de Luces.
function ResultadoLote({ resultado, tituloOk }) {
  return (
    <div className="panel">
      <div className="panel__header">
        <div className="panel__title">{resultado.numero_lote ? `Resultado del lote ${resultado.numero_lote}` : 'Resultado'}</div>
      </div>
      <div className="scan-counter-row">
        <div className="scan-counter"><div className="scan-counter__value" style={{ color: 'var(--st-almacen)' }}>{resultado.registradas.length}</div><div className="scan-counter__label">{tituloOk}</div></div>
        <div className="scan-counter"><div className="scan-counter__value" style={{ color: resultado.errores.length ? 'var(--st-extraviada)' : undefined }}>{resultado.errores.length}</div><div className="scan-counter__label">Con error</div></div>
      </div>
      {resultado.errores.length > 0 && (
        <div className="scan-list" style={{ marginTop: 12 }}>
          {resultado.errores.map((e, i) => (
            <div key={i} className="scan-list__row is-error">
              <span className="scan-list__code">{e.codigo}</span>
              <span className="scan-list__error">{e.error}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}