// Registra movimientos reales tipo_movimiento = "Devolucion" (nunca edita la Salida anterior,
// crea registros nuevos e independientes — Mejora: Devolución como movimiento de bitácora).
//
// Existen dos escenarios que NUNCA deben mezclarse:
//  - "Sin usar": la MISMA batería que salió regresa sin haberse instalado. Vuelve al
//    inventario (estado ALMACEN) y cierra en Completado de inmediato.
//  - "Batería usada": la batería usada que regresa se relaciona con su "batería original
//    referente" (la que salió y originó el cambio) y se registra sobre ESA batería original —
//    la usada es solo información de texto (nombre/código), NUNCA se crea como inventario
//    nuevo ni afecta el stock (Mejora: Devolución de batería usada NO afecta inventario).
//    Cierra en Completado de inmediato, no requiere un paso posterior.
//
// Ambos modos permiten registrar VARIAS baterías en una sola operación (Mejora: Devolución -
// registro múltiple), reutilizando la lógica de captura por lista de Ingreso/Salida Masivo
// pero con un diseño propio, más simple, adaptado a este formulario.
function Devolucion() {
  const [tipoProducto, setTipoProducto] = React.useState('baterias');

  return (
    <div>
      <div className="main-tabs-box">
        <div className="movement-type-tabs" style={{ marginBottom: 0 }}>
          <button className={`movement-type-tab ${tipoProducto === 'baterias' ? 'active' : ''}`} onClick={() => setTipoProducto('baterias')}>
            <IconBattery size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Baterías
          </button>
          <button className={`movement-type-tab ${tipoProducto === 'luces' ? 'active' : ''}`} onClick={() => setTipoProducto('luces')}>
            <IconBulb size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Luces de Emergencia
          </button>
        </div>
      </div>

      {tipoProducto === 'baterias' ? <DevolucionBateriasForm /> : <DevolucionLucesForm />}
    </div>
  );
}

function DevolucionBateriasForm() {
  const toast = useToast();
  const [modo, setModo] = React.useState('SIN_USAR'); // 'SIN_USAR' | 'USADA'

  const [empleados, setEmpleados] = React.useState([]);
  const [entregaId, setEntregaId] = React.useState('');
  const [recibeId, setRecibeId] = 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);

  // Modo "Sin usar": lista simple de códigos.
  const [codigosSinUsar, setCodigosSinUsar] = React.useState([]);
  const [codigoInput, setCodigoInput] = React.useState('');

  // Modo "Batería usada": la lista se genera al escanear/escribir la BATERÍA ORIGINAL
  // REFERENTE (la que salió del almacén) — nunca al escanear la batería usada, que puede tener
  // otro código, otra marca u otro tamaño, o incluso no tener código de barras (Mejora:
  // Devolución - la lista nace de la batería original, no de la usada).
  const [codigoOriginal, setCodigoOriginal] = React.useState('');
  const [sugerenciasOriginal, setSugerenciasOriginal] = React.useState([]);
  const [buscandoOriginal, setBuscandoOriginal] = React.useState(false);
  const [originalSeleccionada, setOriginalSeleccionada] = React.useState(null);
  const [itemsUsada, setItemsUsada] = React.useState([]);
  const [mostrarMenuOriginal, setMostrarMenuOriginal] = React.useState(false);// Nuevo estado
  const [mostrarFaltantes, setMostrarFaltantes] = React.useState(false);
  const [numeroGuia, setNumeroGuia] = React.useState('');

  const [camaraAbierta, setCamaraAbierta] = React.useState(false);
  const [camaraTarget, setCamaraTarget] = React.useState(null); // 'SIN_USAR' | 'ORIGINAL' | null (fila específica)

  const wrapperRef = React.useRef(null); // Nueva referencia para detectar clics afuera
  const inputSinUsarRef = React.useRef(null);
  const inputOriginalRef = React.useRef(null);

  // 1. Escucha clics afuera para cerrar la lista
  React.useEffect(() => {
    const handleClickOutside = (e) => {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
        setMostrarMenuOriginal(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // 2. Carga los empleados (en el efecto existente)
  React.useEffect(() => {
    Api.get('/empleados', { activos: 'true' }).then((r) => setEmpleados(r.data)).catch(() => { });
  }, []);

  React.useEffect(() => {
    setResultado(null);
    setMostrarFaltantes(false);
    setTimeout(() => {
      if (modo === 'SIN_USAR') inputSinUsarRef.current && inputSinUsarRef.current.focus();
      else inputOriginalRef.current && inputOriginalRef.current.focus();
    }, 30);
  }, [modo]);

  // Autocompletado de Batería original referente.
  // En la base actual, RETIRADA representa una salida hacia tienda/destino y
  // UNIDAD_VEHICULAR representa una batería instalada en vehículo. Ambos estados son válidos.
  React.useEffect(() => {
    if (modo !== 'USADA') return;
    const termino = codigoOriginal.trim();
    if (termino.length < 2 || (originalSeleccionada && originalSeleccionada.codigo === termino)) {
      setSugerenciasOriginal([]);
      setBuscandoOriginal(false);
      return;
    }

    let cancelado = false;
    const timer = setTimeout(async () => {
      setBuscandoOriginal(true);
      try {
        const res = await Api.get('/baterias/originales-referentes', { texto: termino, limit: 10 });
        if (!cancelado) setSugerenciasOriginal(Array.isArray(res.data) ? res.data : []);
      } catch (err) {
        if (!cancelado) setSugerenciasOriginal([]);
      } finally {
        if (!cancelado) setBuscandoOriginal(false);
      }
    }, 300);

    return () => {
      cancelado = true;
      clearTimeout(timer);
    };
  }, [codigoOriginal, modo]);

  const abrirCamara = (target) => { setCamaraTarget(target); setCamaraAbierta(true); };
  const onCamaraDetecta = (texto) => {
    setCamaraAbierta(false);
    if (camaraTarget === 'SIN_USAR') agregarSinUsar(texto);
    else if (camaraTarget === 'ORIGINAL') agregarOriginal(texto);
    else if (typeof camaraTarget === 'number') actualizarItemUsada(camaraTarget, { codigoUsada: texto });
  };

  // ---- Modo "Sin usar" ----
  const agregarSinUsar = (codigoCrudo) => {
    const codigo = (codigoCrudo || '').trim();
    if (!codigo) return;
    setCodigosSinUsar((prev) => {
      const yaExiste = prev.some((c) => c.codigo === codigo);
      return [...prev, { codigo, esDuplicado: yaExiste }];
    });
    setCodigoInput('');
    setTimeout(() => inputSinUsarRef.current && inputSinUsarRef.current.focus(), 30);
  };
  const quitarSinUsar = (idx) => setCodigosSinUsar((prev) => prev.filter((_, i) => i !== idx));

  // ---- Modo "Batería usada" ----
  // Cada escaneo/entrada en "Batería original referente" agrega una fila nueva a la lista de
  // pendientes; el nombre/tipo de la batería usada se completa después, directamente en la fila.
  const agregarOriginal = (codigoCrudo) => {
    const codigo = (codigoCrudo || '').trim();
    if (!codigo) return;
    setItemsUsada((prev) => {
      if (prev.some((it) => it.codigoOriginal === codigo)) {
        toast.error(`"${codigo}" ya está en la lista`);
        return prev;
      }
      return [...prev, { codigoOriginal: codigo, nombreTipo: 'Batería 12v7ah', codigoUsada: '', conGarantia: false, voltaje: '' }];
    });
    setCodigoOriginal('');
    setOriginalSeleccionada(null);
    setSugerenciasOriginal([]);
    setTimeout(() => inputOriginalRef.current && inputOriginalRef.current.focus(), 30);
  };
  const actualizarItemUsada = (idx, cambios) => {
    setItemsUsada((prev) => prev.map((it, i) => (i === idx ? { ...it, ...cambios } : it)));
  };
  const quitarUsada = (idx) => setItemsUsada((prev) => prev.filter((_, i) => i !== idx));

  const listaActual = modo === 'SIN_USAR' ? codigosSinUsar : itemsUsada;

  const limpiarTodo = () => {
    setCodigosSinUsar([]);
    setCodigoInput('');
    setCodigoOriginal('');
    setSugerenciasOriginal([]);
    setOriginalSeleccionada(null);
    setItemsUsada([]);
    setMostrarFaltantes(false);
    setEntregaId('');
    setRecibeId('');
    setNumeroGuia('');
    setFecha(fechaHoy());
    setComentario('');
  };

  const registrar = async () => {
    if (listaActual.length === 0) { toast.error('Agrega al menos una batería a la lista'); return; }
    if (!entregaId) { toast.error('Selecciona quién entrega la devolución'); return; }
    if (!recibeId) { toast.error('Selecciona quién recibe en almacén'); return; }

    if (modo === 'USADA') {
      const faltantes = itemsUsada.filter((it) => !it.nombreTipo.trim());
      if (faltantes.length > 0) {
        setMostrarFaltantes(true);
        toast.error(`Selecciona la batería usada que regresó en ${faltantes.length} fila(s) antes de registrar`);
        return;
      }
      if (!numeroGuia.trim()) {
        toast.error('Indica el número de guía de la devolución (ej. G001)');
        return;
      }
    }

    const items = modo === 'SIN_USAR'
      ? codigosSinUsar.map((c) => ({ codigo: c.codigo }))
      : itemsUsada.map((it) => ({
        codigo_bateria_original: it.codigoOriginal,
        nombre_bateria_usada: it.nombreTipo.trim(),
        codigo: it.codigoUsada.trim() || undefined,
        con_garantia: Boolean(it.conGarantia),
        voltaje: it.conGarantia && it.voltaje !== undefined && it.voltaje !== '' ? Number(it.voltaje) : undefined,
      }));

    setEnviando(true);
    try {
      const res = await Api.post('/movimientos-baterias/devolucion-masiva', {
        items,
        tipo_devolucion: modo === 'USADA' ? 'USADA' : 'NUEVA',
        empleado_entrega_id: Number(entregaId),
        empleado_recibe_id: Number(recibeId),
        numero_guia: numeroGuia.trim() || undefined,
        fecha: fecha,
        comentario: comentario || undefined,
      });
      setResultado(res);
      toast.success(`${res.registradas.length} devolución(es) registrada(s) — Completadas`);
      // Reset SOLO tras éxito confirmado por el backend. Si falla, la lista y los datos se conservan.
      limpiarTodo();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setEnviando(false);
    }
  };

  return (
    <div>
      <div className="sub-type-tabs">
        <button className={`sub-type-tab ${modo === 'SIN_USAR' ? 'active' : ''}`} onClick={() => setModo('SIN_USAR')}>
          <IconCheck size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Sin usar (misma batería)
        </button>
        <button className={`sub-type-tab ${modo === 'USADA' ? 'active' : ''}`} onClick={() => setModo('USADA')}>
          <IconHistory size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Batería usada
        </button>
      </div>

      <p className="text-muted" style={{ margin: '10px 2px 16px', fontSize: 13 }}>
        {modo === 'SIN_USAR'
          ? 'Las baterías que salieron no se llegaron a instalar y regresan tal cual. Quedan Completadas de inmediato.'
          : 'Baterías usadas retiradas de una luz en campo — selecciona el modelo estandarizado, número de guía y evaluación de voltaje para garantía.'}
      </p>

      <div className="grid-2">
        {modo === 'SIN_USAR' ? (
          <div className="panel">
            <div className="panel__header">
              <div className="panel__title">Baterías sin usar</div>
              <button className="btn btn-ghost btn-sm" disabled={codigosSinUsar.length === 0} onClick={() => setCodigosSinUsar([])}>Vaciar lista</button>
            </div>
            <div className="stack-y">
              <div className="field">
                <label>Código de batería</label>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input
                    ref={inputSinUsarRef}
                    value={codigoInput}
                    onChange={(e) => setCodigoInput(e.target.value)}
                    onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); agregarSinUsar(codigoInput); } }}
                    placeholder="Escanea o escribe…"
                    style={{ flex: 1 }}
                    autoFocus
                  />
                  <button className="btn btn-ghost" onClick={() => abrirCamara('SIN_USAR')} title="Usar cámara"><IconCamera size={16} /></button>
                  <button className="btn btn-primary" onClick={() => agregarSinUsar(codigoInput)}>Agregar</button>
                </div>
              </div>
              <div className="scan-counter-row">
                <div className="scan-counter"><div className="scan-counter__value">{codigosSinUsar.length}</div><div className="scan-counter__label">Pendientes</div></div>
              </div>
              <div className="scan-list">
                {codigosSinUsar.length === 0 && <div className="scan-list__empty">Todavía no agregas ninguna batería</div>}
                {codigosSinUsar.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={() => quitarSinUsar(i)} title="Quitar"><IconX size={15} /></button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ) : (
          <div className="panel">
            <div className="panel__header">
              <div className="panel__title">Baterías originales referentes</div>
              <button className="btn btn-ghost btn-sm" disabled={itemsUsada.length === 0} onClick={() => setItemsUsada([])}>Vaciar lista</button>
            </div>
            <div className="stack-y">
              <div className="field">
                <label>Batería original referente</label>
                <div style={{ display: 'flex', gap: 8 }}>
                  <div className="autocomplete-wrap" ref={wrapperRef} style={{ flex: 1 }}>
                    <input
                      ref={inputOriginalRef}
                      value={codigoOriginal}
                      onChange={(e) => {
                        setCodigoOriginal(e.target.value);
                        setOriginalSeleccionada(null);
                        setMostrarMenuOriginal(true);
                      }}
                      onFocus={() => {
                        if (codigoOriginal.trim().length >= 2 && !originalSeleccionada) {
                          setMostrarMenuOriginal(true);
                        }
                      }}
                      onKeyDown={(e) => { if (e.key === 'Escape') setMostrarMenuOriginal(false); }}
                      placeholder="Escanea o escribe…"
                      style={{ width: '100%' }}
                      autoFocus
                      autoComplete="off"
                    />
                    {mostrarMenuOriginal && (buscandoOriginal || sugerenciasOriginal.length > 0 || (codigoOriginal.trim().length >= 2 && !buscandoOriginal)) && (
                      <div className="autocomplete-menu">
                        {buscandoOriginal && <div className="autocomplete-empty">Buscando baterías…</div>}
                        {!buscandoOriginal && sugerenciasOriginal.length === 0 && (
                          <div className="autocomplete-empty">No se encontraron baterías con estado salida o unidad vehicular.</div>
                        )}
                        {!buscandoOriginal && sugerenciasOriginal.map((bateria) => (
                          <button
                            key={bateria.id}
                            type="button"
                            className="autocomplete-option"
                            onMouseDown={(e) => e.preventDefault()}
                            onClick={() => {
                              setCodigoOriginal(bateria.codigo);
                              setOriginalSeleccionada(bateria);
                              setSugerenciasOriginal([]);
                              setMostrarMenuOriginal(false);
                              setTimeout(() => inputOriginalRef.current && inputOriginalRef.current.focus(), 0);
                            }}
                          >
                            <span className="autocomplete-option__code">{bateria.codigo}</span>
                            <span className={`autocomplete-option__status ${bateria.estado_actual === 'UNIDAD_VEHICULAR' ? 'is-vehicular' : ''}`}>
                              {bateria.estado_actual === 'UNIDAD_VEHICULAR' ? 'Unidad vehicular' : 'Salida'}
                            </span>
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                  <button className="btn btn-ghost" onClick={() => abrirCamara('ORIGINAL')} title="Usar cámara"><IconCamera size={16} /></button>
                  <button className="btn btn-primary" onClick={() => agregarOriginal(codigoOriginal)}>Agregar</button>
                </div>
                <p className="text-muted" style={{ fontSize: 12.5, marginTop: 4 }}>
                  La batería que salió del almacén. Escanea varias seguidas — luego selecciona abajo el modelo usado y la garantía.
                </p>
              </div>
              <div className="scan-counter-row">
                <div className="scan-counter"><div className="scan-counter__value">{itemsUsada.length}</div><div className="scan-counter__label">Pendientes</div></div>
              </div>

              <div className="scan-list">
                {itemsUsada.length === 0 && <div className="scan-list__empty">Todavía no agregas ninguna batería original</div>}
                {itemsUsada.map((it, i) => {
                  const incompleto = mostrarFaltantes && !it.nombreTipo.trim();
                  return (
                    <div key={i} className={`scan-list__row ${incompleto ? 'is-error' : ''}`} style={{ alignItems: 'flex-start', flexWrap: 'wrap' }}>
                      <div style={{ flex: 1, minWidth: 220 }}>
                        <span className="scan-list__code">{it.codigoOriginal}</span>
                        <div className="field" style={{ margin: '6px 0 0' }}>
                          <label style={{ fontSize: 11.5, fontWeight: '600' }}>Batería usada que regresa</label>
                          <select
                            value={it.nombreTipo}
                            onChange={(e) => actualizarItemUsada(i, { nombreTipo: e.target.value })}
                            style={{ width: '100%', padding: '6px 10px', fontSize: 13 }}
                            required
                          >
                            <option value="Batería 12v7ah">Batería 12v7ah</option>
                            <option value="Batería gordita">Batería gordita</option>
                            <option value="Batería chiquita">Batería chiquita</option>
                          </select>
                        </div>
                        <div className="field" style={{ margin: '6px 0 0' }}>
                          <label style={{ fontSize: 11.5 }}>Código de la batería usada (opcional)</label>
                          <div style={{ display: 'flex', gap: 8 }}>
                            <input
                              value={it.codigoUsada}
                              onChange={(e) => actualizarItemUsada(i, { codigoUsada: e.target.value })}
                              placeholder="Si tiene código de barras propio…"
                              style={{ flex: 1 }}
                            />
                            <button className="btn btn-ghost btn-sm" onClick={() => abrirCamara(i)} title="Usar cámara"><IconCamera size={14} /></button>
                          </div>
                        </div>
                        <div className="field" style={{ margin: '8px 0 0' }}>
                          <label style={{ fontSize: 11.5, display: 'block', marginBottom: 4, fontWeight: '600' }}>Estado de Garantía</label>
                          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                            <label style={{ fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5 }}>
                              <input
                                type="radio"
                                name={`garantia_${i}`}
                                checked={it.conGarantia === true}
                                onChange={() => actualizarItemUsada(i, { conGarantia: true })}
                              />
                              <span className="badge badge-success" style={{ fontSize: 11, padding: '3px 8px' }}>Con Garantía (≤ 1 año)</span>
                            </label>
                            <label style={{ fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5 }}>
                              <input
                                type="radio"
                                name={`garantia_${i}`}
                                checked={it.conGarantia !== true}
                                onChange={() => actualizarItemUsada(i, { conGarantia: false, voltaje: '' })}
                              />
                              <span className="badge badge-secondary" style={{ fontSize: 11, padding: '3px 8px' }}>Sin Garantía (&gt; 1 año)</span>
                            </label>
                          </div>
                        </div>

                        {it.conGarantia && (
                          <div className="field" style={{ margin: '8px 0 0' }}>
                            <label style={{ fontSize: 11.5, display: 'block', marginBottom: 4, fontWeight: '600' }}>
                              Medición de Voltaje (V)
                            </label>
                            <input
                              type="number"
                              step="0.1"
                              min="0"
                              max="30"
                              value={it.voltaje !== undefined ? it.voltaje : ''}
                              onChange={(e) => actualizarItemUsada(i, { voltaje: e.target.value })}
                              placeholder="Ej. 10.5, 11.8…"
                            />
                            {it.voltaje !== undefined && it.voltaje !== '' && !isNaN(Number(it.voltaje)) && (
                              <div style={{ marginTop: 4, fontSize: 11.5, fontWeight: '600' }}>
                                {Number(it.voltaje) < 11 ? (
                                  <span style={{ color: '#E5A100', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                                    🟡 Voltaje &lt; 11V: Candidata a cambio con proveedor
                                  </span>
                                ) : (
                                  <span style={{ color: '#3E6E92', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                                    🔵 Voltaje ≥ 11V: Reutilización para luces internas
                                  </span>
                                )}
                              </div>
                            )}
                          </div>
                        )}

                        {incompleto && <span className="scan-list__error" style={{ display: 'block', marginTop: 4 }}>Falta indicar qué batería usada regresó</span>}
                      </div>
                      <button className="scan-list__remove" onClick={() => quitarUsada(i)} title="Quitar"><IconX size={15} /></button>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        <div className="panel">
          <div className="panel__header"><div className="panel__title">Datos de la devolución</div></div>
          <div className="stack-y">
            {modo === 'USADA' && (
              <div className="field">
                <label>Número de Guía <span className="text-muted" style={{ fontWeight: 'normal', fontSize: 12 }}>(ej. G001)</span></label>
                <input
                  value={numeroGuia}
                  onChange={(e) => setNumeroGuia(e.target.value)}
                  placeholder="Ej. G001, G002..."
                  required
                />
              </div>
            )}
            <div className="field">
              <label>Quién entrega</label>
              <select value={entregaId} onChange={(e) => setEntregaId(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>Quién recibe en almacén</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. No se usó, cliente canceló…" />
            </div>
          </div>
          <button className="btn btn-primary btn-block" disabled={enviando || listaActual.length === 0} onClick={registrar} style={{ marginTop: 8 }}>
            {enviando ? 'Registrando…' : `Registrar Devoluciones (${listaActual.length})`}
          </button>
        </div>
      </div>

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

      {resultado && <ResultadoLote resultado={resultado} tituloOk="devoluciones registradas" />}
    </div>
  );
}

/* ============================================================================
 * DEVOLUCIÓN DE LUCES
 * ============================================================================
 * Las luces NO usan código de barras. Se identifican por un código
 * alfanumérico impreso en la etiqueta (LE035509), así que acá NO hay lector:
 * hay un campo de búsqueda con autocompletado. El lector vive solo en la
 * pestaña de baterías, que sí usan código de barras.
 *
 * Hay dos motivos por los que una luz vuelve, y terminan en estados opuestos:
 *
 *   SIN USAR : salió en la unidad o por encomienda y no se llegó a instalar.
 *              Vuelve al stock utilizable.
 *   USADA    : luz vieja retirada de una tienda. Llega al almacén pero NO al
 *              stock: queda de baja con su motivo.
 * ========================================================================== */

const MOTIVOS_RETIRO_LUZ = [
  { valor: 'DETERIORADA', etiqueta: 'Estaba deteriorada' },
  { valor: 'REEMPLAZADA', etiqueta: 'Se reemplazó por una nueva' },
  { valor: 'REGRESO_DENEGADO', etiqueta: 'La tienda no la entregó en su momento' },
];

function DevolucionLucesForm() {
  const toast = useToast();
  const [modo, setModo] = React.useState('SIN_USAR'); // 'SIN_USAR' | 'USADA'
  const esUsada = modo === 'USADA';

  const [codigos, setCodigos] = React.useState([]);
  const [codigoInput, setCodigoInput] = React.useState('');

  // Autocompletado: mismo mecanismo que la batería original referente.
  const [sugerencias, setSugerencias] = React.useState([]);
  const [buscando, setBuscando] = React.useState(false);
  const [mostrarMenu, setMostrarMenu] = React.useState(false);
  const wrapperRef = React.useRef(null);
  const inputRef = React.useRef(null);

  const [empleados, setEmpleados] = React.useState([]);
  const [transportistas, setTransportistas] = React.useState([]);
  const [entregaId, setEntregaId] = React.useState('');
  const [recibeId, setRecibeId] = React.useState('');
  const [numeroGuia, setNumeroGuia] = React.useState('');
  const [transportistaId, setTransportistaId] = 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);

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

  React.useEffect(() => {
    function alClickFuera(e) {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setMostrarMenu(false);
    }
    document.addEventListener('mousedown', alClickFuera);
    return () => document.removeEventListener('mousedown', alClickFuera);
  }, []);

  // Solo se sugieren luces que de verdad pueden devolverse en este modo: una
  // sin usar viene de la calle, una usada viene de una tienda. Sin este filtro
  // la lista ofrece luces que el servidor va a rechazar igual.
  const ESTADOS_SUGERIDOS = esUsada
    ? ['TIENDA']
    : ['UNIDAD_VEHICULAR', 'EN_TRANSITO'];

  React.useEffect(() => {
    const texto = codigoInput.trim();
    if (texto.length < 2) { setSugerencias([]); return; }
    let vigente = true;
    setBuscando(true);
    // Una consulta por estado, porque el filtro del servidor acepta uno solo.
    Promise.all(ESTADOS_SUGERIDOS.map((estado) =>
      Api.get('/luces', { texto, estado, limit: 10 }).then((r) => r.data || []).catch(() => [])
    ))
      .then((listas) => {
        if (!vigente) return;
        const juntas = [].concat(...listas);
        setSugerencias(juntas.slice(0, 10));
      })
      .finally(() => { if (vigente) setBuscando(false); });
    return () => { vigente = false; };
  }, [codigoInput, modo]); // eslint-disable-line

  const normalizar = (v) => String(v || '').trim().toUpperCase();
  const FORMATO = /^LE[0-9]{6}$/;

  const agregarCodigo = (codigoCrudo) => {
    const codigo = normalizar(codigoCrudo);
    if (!codigo) return;
    if (!FORMATO.test(codigo)) {
      toast.error(`"${codigo}" no tiene el formato correcto. Debe ser LE y 6 dígitos, por ejemplo LE035509.`);
      return;
    }
    setCodigos((prev) => {
      if (prev.some((c) => c.codigo === codigo)) {
        toast.error(`${codigo} ya está en la lista`);
        return prev;
      }
      return [...prev, { codigo, motivo: 'DETERIORADA' }];
    });
    setCodigoInput('');
    setSugerencias([]);
    setMostrarMenu(false);
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };

  const quitarCodigo = (idx) => setCodigos((prev) => prev.filter((_, i) => i !== idx));
  const cambiarMotivo = (idx, valor) =>
    setCodigos((prev) => prev.map((c, i) => (i === idx ? { ...c, motivo: valor } : c)));

  const cambiarModo = (nuevo) => {
    if (nuevo === modo) return;
    // Los códigos cargados corresponden al modo anterior: una luz de tienda no
    // se puede devolver como sin usar.
    if (codigos.length > 0) setCodigos([]);
    setModo(nuevo);
    setCodigoInput('');
    setSugerencias([]);
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };

  const registrar = async () => {
    if (codigos.length === 0) { toast.error('Agrega al menos una luz'); return; }
    if (!entregaId) { toast.error('Selecciona quién entrega las luces'); return; }
    if (!recibeId) { toast.error('Selecciona quién recibe en almacén'); return; }

    setEnviando(true);
    try {
      const res = await Api.post('/movimientos-luces/devolucion-masiva', {
        items: codigos.map((c) => (esUsada ? { codigo: c.codigo, motivo_retiro: c.motivo } : { codigo: c.codigo })),
        tipo_devolucion: esUsada ? 'USADA' : 'NUEVA',
        empleado_entrega_id: Number(entregaId),
        empleado_recibe_id: Number(recibeId),
        numero_guia: numeroGuia.trim() || undefined,
        transportista_id: transportistaId ? Number(transportistaId) : undefined,
        fecha,
        comentario: comentario || undefined,
      });
      setResultado(res);
      toast.success(`${res.registradas.length} devolución(es) de luz registradas correctamente`);
      setCodigos([]);
      setEntregaId('');
      setRecibeId('');
      setNumeroGuia('');
      setTransportistaId('');
      setFecha(fechaHoy());
      setComentario('');
    } catch (err) {
      toast.error(err.message);
    } finally {
      setEnviando(false);
    }
  };

  return (
    <div>
      <div className="sub-type-tabs">
        <button
          className={`sub-type-tab ${!esUsada ? 'active' : ''}`}
          onClick={() => cambiarModo('SIN_USAR')}
        >
          Luz sin usar
        </button>
        <button
          className={`sub-type-tab ${esUsada ? 'active' : ''}`}
          onClick={() => cambiarModo('USADA')}
        >
          Luz usada
        </button>
      </div>

      <p className="form-lead">
        {esUsada
          ? 'Luces viejas retiradas de una tienda. Llegan al almacén pero NO al stock: quedan de baja con su motivo, porque una luz retirada no se vuelve a vender.'
          : 'Luces que salieron en una unidad o por encomienda y no se llegaron a instalar. Vuelven al stock disponible y cierran la salida que quedó pendiente.'}
      </p>

      <div className="grid-2">
        <div className="panel">
          <div className="panel__header">
            <div className="panel__title">Luces a devolver</div>
            <button className="btn btn-ghost btn-sm" disabled={codigos.length === 0} onClick={() => setCodigos([])}>
              Vaciar lista
            </button>
          </div>

          <div className="form-stack">
            <div className="field">
              <label>Código de la luz</label>
              <div className="field-row">
                <div className="autocomplete-wrap" ref={wrapperRef} style={{ flex: 1 }}>
                  <input
                    ref={inputRef}
                    value={codigoInput}
                    onChange={(e) => { setCodigoInput(e.target.value.toUpperCase()); setMostrarMenu(true); }}
                    onFocus={() => { if (codigoInput.trim().length >= 2) setMostrarMenu(true); }}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') { e.preventDefault(); agregarCodigo(codigoInput); }
                      if (e.key === 'Escape') setMostrarMenu(false);
                    }}
                    placeholder="Escribe o busca: LE035509"
                    autoComplete="off"
                    style={{ width: '100%' }}
                  />
                  {mostrarMenu && codigoInput.trim().length >= 2 && (
                    <div className="autocomplete-menu">
                      {buscando && <div className="autocomplete-empty">Buscando luces…</div>}
                      {!buscando && sugerencias.length === 0 && (
                        <div className="autocomplete-empty">
                          {esUsada
                            ? 'No hay luces instaladas en tienda con ese código.'
                            : 'No hay luces en una unidad ni en encomienda con ese código.'}
                        </div>
                      )}
                      {!buscando && sugerencias.map((luz) => (
                        <button
                          key={luz.id}
                          type="button"
                          className="autocomplete-option"
                          onMouseDown={(e) => e.preventDefault()}
                          onClick={() => agregarCodigo(luz.codigo)}
                        >
                          <span className="autocomplete-option__code">{luz.codigo}</span>
                          <span className="autocomplete-option__status">
                            {luz.tienda_nombre || luz.unidad_vehicular_placa || luz.transportista_nombre || luz.ubicacion_actual}
                          </span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
                <button className="btn btn-primary" onClick={() => agregarCodigo(codigoInput)}>Agregar</button>
              </div>
              <p className="form-hint">
                Las luces no usan código de barras: se buscan por su código, el que está impreso en la etiqueta.
              </p>
            </div>

            <div className="scan-counter-row">
              <div className="scan-counter">
                <div className="scan-counter__value">{codigos.length}</div>
                <div className="scan-counter__label">En la lista</div>
              </div>
            </div>

            <div className="scan-list">
              {codigos.length === 0 && <div className="scan-list__empty">Todavía no agregas ninguna luz</div>}
              {codigos.map((c, i) => (
                <div key={c.codigo} className={`scan-list__row ${esUsada ? 'scan-list__row--stacked' : ''}`}>
                  <div className="scan-list__head">
                    <span className="scan-list__code">{c.codigo}</span>
                    <button className="scan-list__remove" onClick={() => quitarCodigo(i)} title="Quitar">
                      <IconX size={15} />
                    </button>
                  </div>
                  {esUsada && (
                    <div className="field">
                      <label>Por qué se retiró</label>
                      <select value={c.motivo} onChange={(e) => cambiarMotivo(i, e.target.value)}>
                        {MOTIVOS_RETIRO_LUZ.map((m) => (
                          <option key={m.valor} value={m.valor}>{m.etiqueta}</option>
                        ))}
                      </select>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel__header"><div className="panel__title">Datos de la devolución</div></div>

          <div className="form-stack">
            <div className="field">
              <label>Quién entrega</label>
              <select value={entregaId} onChange={(e) => setEntregaId(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>Quién recibe en almacén</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>Número de guía <span className="field__opcional">opcional</span></label>
              <input value={numeroGuia} onChange={(e) => setNumeroGuia(e.target.value)} placeholder="Ej. G-00123" maxLength={50} />
            </div>

            <div className="field">
              <label>Volvió por encomienda con <span className="field__opcional">opcional</span></label>
              <select value={transportistaId} onChange={(e) => setTransportistaId(e.target.value)}>
                <option value="">No vino por encomienda</option>
                {transportistas.map((t) => <option key={t.id} value={t.id}>{t.nombre}</option>)}
              </select>
            </div>

            <div className="field">
              <label>Comentario <span className="field__opcional">opcional</span></label>
              <input value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder="Ej. Retorno de unidad, no se instaló" />
            </div>
          </div>

          <button
            className="btn btn-primary btn-block form-submit"
            disabled={enviando || codigos.length === 0}
            onClick={registrar}
          >
            {enviando ? 'Registrando…' : `Registrar devolución (${codigos.length})`}
          </button>
        </div>
      </div>

      {resultado && <ResultadoLote resultado={resultado} tituloOk="devoluciones de luces registradas" />}
    </div>
  );
}