function SalidaMasiva() {
  const [tipo, setTipo] = React.useState('baterias'); // 'baterias' | 'luces'

  return (
    <div>
      <div className="movement-type-tabs">
        <button className={`movement-type-tab ${tipo === 'baterias' ? 'active' : ''}`} onClick={() => setTipo('baterias')}>
          <IconBattery size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Baterías
        </button>
        <button className={`movement-type-tab ${tipo === 'luces' ? 'active' : ''}`} onClick={() => setTipo('luces')}>
          <IconBulb size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Luces de Emergencia
        </button>
      </div>
      <SalidaMasivaForm key={tipo} tipo={tipo} />
    </div>
  );
}

function SalidaMasivaForm({ tipo }) {
  const toast = useToast();
  const esLuz = tipo === 'luces';
  const endpoint = esLuz ? '/movimientos-luces/salida-masiva' : '/movimientos-baterias/salida-masiva';
  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 [tiendas, setTiendas] = React.useState([]);
  const [unidades, setUnidades] = React.useState([]);
  const [transportistas, setTransportistas] = React.useState([]);

  const [entregaId, setEntregaId] = React.useState('');
  const [tipoSalida, setTipoSalida] = React.useState('INSTALACION');
  // En luces el destino natural es la unidad vehicular: al cargarlas todavia
  // no se sabe en que tienda van a terminar, asi que viajan en la unidad y la
  // tienda se registra recien al instalarlas.
  const [destinoTipo, setDestinoTipo] = React.useState(esLuz ? 'UNIDAD_VEHICULAR' : 'TIENDA');
  const [recibeId, setRecibeId] = React.useState('');
  const [tiendaId, setTiendaId] = React.useState('');
  const [unidadId, setUnidadId] = React.useState('');
  const [transportistaId, setTransportistaId] = React.useState('');
  const [numeroEncomienda, setNumeroEncomienda] = 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 inputRef = React.useRef(null);

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

  // Quién recibe se elige siempre de la lista general de empleados: la tienda o unidad
  // vehicular es solo el DESTINO, nunca determina automáticamente quién recibe (los técnicos
  // cambian de tienda/vehículo día a día — Mejora: Salida sin responsable fijo).
  React.useEffect(() => { setRecibeId(''); }, [destinoTipo, tiendaId, unidadId]);

  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 onKeyDown = (e) => { if (e.key === 'Enter') { e.preventDefault(); agregarCodigo(codigoInput); } };
  const onCamaraDetecta = (texto) => { setCamaraAbierta(false); agregarCodigo(texto); };

  const registrar = async () => {
    if (codigos.length === 0) { toast.error(`Escanea al menos una ${etiqueta}`); return; }
    if (!entregaId) { toast.error('Selecciona quién entrega'); return; }
    if (destinoTipo === 'TIENDA' && !tiendaId) { toast.error('Selecciona la tienda de destino'); return; }
    if (destinoTipo === 'UNIDAD_VEHICULAR' && !unidadId) { toast.error('Selecciona la unidad vehicular de destino'); return; }
    if (destinoTipo === 'ENCOMIENDA' && !transportistaId) { toast.error('Selecciona la empresa de transporte'); return; }
    // En una encomienda "quién recibe" no aplica: la recibe la agencia, no una
    // persona nuestra. Por eso queda fuera de esta comprobación.
    if ((destinoTipo === 'TIENDA' || destinoTipo === 'UNIDAD_VEHICULAR' || destinoTipo === 'PRODUCCION') && !recibeId) { toast.error('Selecciona quién recibe'); return; }

    setEnviando(true);
    try {
      const res = await Api.post(endpoint, {
        codigos: codigos.map((c) => c.codigo),
        tipo_salida: esLuz ? undefined : tipoSalida,
        empleado_entrega_id: Number(entregaId),
        empleado_recibe_id: recibeId ? Number(recibeId) : undefined,
        destino_tipo: destinoTipo,
        tienda_id: tiendaId ? Number(tiendaId) : undefined,
        unidad_vehicular_id: unidadId ? Number(unidadId) : undefined,
        transportista_id: transportistaId ? Number(transportistaId) : undefined,
        numero_encomienda: numeroEncomienda.trim() || undefined,
        comentario: comentario || undefined,
        fecha: fecha,
      });
      setResultado(res);
      toast.success(`Lote ${res.numero_lote}: ${res.registradas.length} ${esLuz ? 'luces' : 'baterías'} registradas`);
      // Reset completo tras éxito confirmado por el backend
      setCodigos([]);
      setEntregaId('');
      setTipoSalida('INSTALACION');
      setDestinoTipo(esLuz ? 'UNIDAD_VEHICULAR' : 'TIENDA');
      setRecibeId('');
      setTiendaId('');
      setUnidadId('');
      setTransportistaId('');
      setNumeroEncomienda('');
      setFecha(fechaHoy());
      setComentario('');
    } catch (err) {
      toast.error(err.message);
    } finally {
      setEnviando(false);
    }
  };

  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">
          {esLuz
            ? 'Las luces pueden salir a Unidad Vehicular (para instalarse después) o directamente a Tienda (venta / entrega sin retorno).'
            : 'Todas comparten el mismo destino, definido a la derecha.'}
        </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>
          <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">
            {/* En luces NO se muestra: todas sus salidas son ventas, asi que
                la distincion Instalacion / Venta sin retorno no existe. Antes
                aparecia igual y el dato se descartaba en silencio. */}
            {!esLuz && (
              <div className="field">
                <label>Tipo de salida</label>
                <select
                  value={tipoSalida}
                  onChange={(e) => setTipoSalida(e.target.value)}
                >
                  <option value="INSTALACION">Instalación</option>
                  <option value="MOVIMIENTO_INTERNO">Movimiento interno</option>
                  <option value="VENTA_SIN_RETORNO">Venta sin retorno</option>
                </select>
              </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>Destino</label>
              <select value={destinoTipo} onChange={(e) => { setDestinoTipo(e.target.value); setTiendaId(''); setUnidadId(''); setTransportistaId(''); setRecibeId(''); }}>
                <option value="UNIDAD_VEHICULAR">Unidad Vehicular</option>
                <option value="TIENDA">Tienda Directa</option>
                <option value="ENCOMIENDA">Encomienda</option>
                <option value="PRODUCCION">Producción</option>
              </select>
            </div>

            {destinoTipo === 'TIENDA' && (
              <>
                <div className="field">
                  <label>Tienda</label>
                  <select value={tiendaId} onChange={(e) => setTiendaId(e.target.value)} required>
                    <option value="">Selecciona…</option>
                    {tiendas.map((t) => <option key={t.id} value={t.id}>{t.nombre}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>Quién recibe</label>
                  <select value={recibeId} onChange={(e) => setRecibeId(e.target.value)} required disabled={!tiendaId}>
                    <option value="">{tiendaId ? 'Selecciona…' : 'Primero elige la tienda'}</option>
                    {empleados.map((e) => <option key={e.id} value={e.id}>{e.nombre} - {(e.area_nombre || '').toUpperCase()}</option>)}
                  </select>
                </div>
              </>
            )}

            {destinoTipo === 'ENCOMIENDA' && (
              <>
                <div className="field">
                  <label>Empresa de transporte</label>
                  <select value={transportistaId} onChange={(e) => setTransportistaId(e.target.value)} required>
                    <option value="">Selecciona…</option>
                    {transportistas.map((t) => <option key={t.id} value={t.id}>{t.nombre}</option>)}
                  </select>
                  {transportistas.length === 0 && (
                    <p className="scan-hero__hint" style={{ margin: '4px 0 0', opacity: .8 }}>
                      No hay transportistas registrados. Un administrador puede darlos de alta en
                      Transportistas.
                    </p>
                  )}
                </div>
                <div className="field">
                  <label>Número de encomienda</label>
                  <input
                    value={numeroEncomienda}
                    onChange={(e) => setNumeroEncomienda(e.target.value)}
                    placeholder="El que da la agencia (opcional)"
                    maxLength={50}
                  />
                </div>
                <div className="field">
                  <label>Quién entrega en la agencia</label>
                  <select value={recibeId} onChange={(e) => setRecibeId(e.target.value)}>
                    <option value="">Selecciona… (opcional)</option>
                    {empleados.map((e) => <option key={e.id} value={e.id}>{e.nombre} - {(e.area_nombre || '').toUpperCase()}</option>)}
                  </select>
                </div>
              </>
            )}

            {destinoTipo === 'UNIDAD_VEHICULAR' && (
              <>
                <div className="field">
                  <label>Unidad vehicular</label>
                  <select value={unidadId} onChange={(e) => setUnidadId(e.target.value)} required>
                    <option value="">Selecciona…</option>
                    {unidades.map((u) => <option key={u.id} value={u.id}>{u.placa}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>Quién recibe</label>
                  <select value={recibeId} onChange={(e) => setRecibeId(e.target.value)} required disabled={!unidadId}>
                    <option value="">{unidadId ? 'Selecciona…' : 'Primero elige la unidad'}</option>
                    {empleados.map((e) => <option key={e.id} value={e.id}>{e.nombre} - {(e.area_nombre || '').toUpperCase()}</option>)}
                  </select>
                </div>
              </>
            )}

            {/* Cuando el destino es Producción solo se muestran estos tres campos */}
            {destinoTipo === 'PRODUCCION' && (
              <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. Traslado, Producción…" />
            </div>
          </div>
          <button className="btn btn-primary btn-block" disabled={enviando || codigos.length === 0} onClick={registrar} style={{ marginTop: 8 }}>
            {enviando ? 'Registrando…' : `Registrar Salida (${codigos.length})`}
          </button>
        </div>
      </div>

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