/* ============================================================================
 * INSTALACIÓN DE LUCES EN TIENDA
 * ============================================================================
 * El paso que CIERRA el ciclo de una luz.
 *
 * Una luz no sale del almacén hacia una tienda concreta: sale hacia la unidad
 * vehicular, porque al cargarla nadie sabe todavía dónde va a terminar (se
 * anuncia una tienda y se termina instalando en otra). Recién cuando el
 * técnico la instala se registra, de una sola vez: la tienda real, el número
 * de guía, y qué pasó con la luz que retiró.
 *
 * La casilla "Por encomienda" es solo una marca, para las luces que se
 * mandaron a provincia con una empresa de transporte en vez de una unidad
 * nuestra. Marcada, no se pide unidad. El resto del proceso es el mismo.
 *
 * Hecho eso, el ciclo queda cerrado. Si esa misma luz se cambia más adelante,
 * será un movimiento nuevo, no una reapertura de este.
 * ========================================================================== */

const MOTIVOS_RETIRO = [
  { valor: 'DETERIORADA', etiqueta: 'Estaba deteriorada' },
  { valor: 'REGRESO_DENEGADO', etiqueta: 'La tienda no la entregó' },
];

function InstalacionLuces() {
  const toast = useToast();

  const [filas, setFilas] = 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 [unidadId, setUnidadId] = React.useState('');
  const [porEncomienda, setPorEncomienda] = React.useState(false);
  const [lucesEnUnidad, setLucesEnUnidad] = React.useState([]);

  // Con la casilla marcada no hace falta unidad; sin marcar, sí.
  const listoParaEscanear = porEncomienda || !!unidadId;

  const [tiendaId, setTiendaId] = React.useState('');
  const [entregaId, setEntregaId] = React.useState('');
  const [recibeId, setRecibeId] = React.useState('');
  const [numeroGuia, setNumeroGuia] = 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('/unidades-vehiculares', { activas: 'true' }).then((r) => setUnidades(r.data)).catch(() => {});
  }, []);

  // Las luces de la unidad se piden filtradas al servidor. Antes se traían 200
  // luces de todas las unidades y se descartaban en el navegador: con más de
  // 200 luces en la calle, las de esta unidad podían no venir en ese tope y la
  // pantalla las mostraba como si no existieran.
  // Las luces de la unidad elegida, solo para poder avisar al escanear si un
  // código no corresponde a esa unidad. Por encomienda no aplica: el servidor
  // lo comprueba contra el estado de cada luz.
  React.useEffect(() => {
    if (porEncomienda || !unidadId) { setLucesEnUnidad([]); return; }
    let vigente = true;
    Api.get('/luces', { estado: 'UNIDAD_VEHICULAR', unidad_vehicular_id: unidadId, limit: 500 })
      .then((r) => { if (vigente) setLucesEnUnidad(r.data || []); })
      .catch(() => { if (vigente) setLucesEnUnidad([]); });
    return () => { vigente = false; };
  }, [unidadId, porEncomienda]);

  // El código va en mayúsculas porque así está impreso en la etiqueta.
  const normalizar = (v) => String(v || '').trim().toUpperCase();
  const FORMATO = /^LE[0-9]{6}$/;

  const placaUnidad = React.useMemo(() => {
    const u = unidades.find((x) => String(x.id) === String(unidadId));
    return u ? u.placa : '';
  }, [unidades, unidadId]);

  // Cambiar de origen vacía la lista: esos códigos pertenecían al origen
  // anterior y enviarlos con el nuevo sería un error garantizado.
  const limpiarSiCambia = (valorNuevo, valorActual) => {
    if (filas.length > 0 && String(valorNuevo) !== String(valorActual)) {
      setFilas([]);
      const aviso = 'Cambiaste el origen: se vació la lista de luces';
      toast.info ? toast.info(aviso) : toast.success(aviso);
    }
  };

  const cambiarUnidad = (valor) => {
    limpiarSiCambia(valor, unidadId);
    setUnidadId(valor);
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };

  const cambiarPorEncomienda = (marcado) => {
    // Los códigos cargados venían del otro origen, así que se sueltan.
    if (filas.length > 0) setFilas([]);
    setPorEncomienda(marcado);
    if (marcado) setUnidadId('');
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };

  const agregarCodigo = (codigoCrudo) => {
    if (!listoParaEscanear) {
      toast.error('Primero elige de qué unidad vehicular salen las luces');
      return;
    }
    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.`);
      setCodigoInput('');
      return;
    }
    // Se avisa acá y no al enviar: si la luz no está en esta unidad, es mejor
    // saberlo al escanearla que después de haber cargado veinte.
    if (lucesEnUnidad.length > 0 && !lucesEnUnidad.some((l) => l.codigo === codigo)) {
      toast.error(`${codigo} no está cargada en la unidad ${placaUnidad}`);
      setCodigoInput('');
      return;
    }
    setFilas((prev) => {
      if (prev.some((f) => f.codigo === codigo)) {
        toast.error(`${codigo} ya está en la lista`);
        return prev;
      }
      return [...prev, {
        codigo,
        tipoRecambio: 'ninguno',   // ninguno | nuestra | ajena
        codigoRecambio: '',
        recambioAjeno: '',
        devuelto: true,
        motivo: 'DETERIORADA',
        conGarantia: false,
      }];
    });
    setCodigoInput('');
    setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
  };

  const cambiar = (idx, campo, valor) =>
    setFilas((prev) => prev.map((f, i) => (i === idx ? { ...f, [campo]: valor } : f)));
  const quitar = (idx) => setFilas((prev) => prev.filter((_, i) => i !== idx));

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

  const registrar = async () => {
    if (!listoParaEscanear) {
      toast.error('Elige de qué unidad vehicular salen las luces');
      return;
    }
    if (filas.length === 0) { toast.error('Escanea al menos una luz'); return; }
    if (!tiendaId) { toast.error('Selecciona la tienda donde se instalan'); return; }
    if (!entregaId) { toast.error('Selecciona quién entrega'); return; }

    for (const f of filas) {
      if (f.tipoRecambio === 'nuestra') {
        if (!FORMATO.test(normalizar(f.codigoRecambio))) {
          toast.error(`En ${f.codigo}: el código de la luz retirada debe ser LE y 6 dígitos`);
          return;
        }
        if (normalizar(f.codigoRecambio) === f.codigo) {
          toast.error(`En ${f.codigo}: la luz instalada y la retirada no pueden ser la misma`);
          return;
        }
      }
      if (f.tipoRecambio === 'ajena' && !String(f.recambioAjeno).trim()) {
        toast.error(`En ${f.codigo}: indica la marca o descripción de la luz retirada`);
        return;
      }
    }

    const items = filas.map((f) => {
      const item = { codigo: f.codigo, con_garantia: f.conGarantia };
      if (f.tipoRecambio === 'nuestra') {
        item.codigo_recambio = normalizar(f.codigoRecambio);
        item.recambio_devuelto = f.devuelto;
        if (!f.devuelto) item.motivo_retiro = f.motivo;
      } else if (f.tipoRecambio === 'ajena') {
        item.recambio_ajeno = String(f.recambioAjeno).trim();
      }
      return item;
    });

    setEnviando(true);
    try {
      const res = await Api.post('/movimientos-luces/instalar', {
        items,
        tienda_id: Number(tiendaId),
        unidad_vehicular_id: porEncomienda ? undefined : Number(unidadId),
        por_encomienda: porEncomienda,
        empleado_entrega_id: Number(entregaId),
        empleado_recibe_id: recibeId ? Number(recibeId) : undefined,
        numero_guia: numeroGuia || undefined,
        comentario: comentario || undefined,
        fecha,
      });
      setResultado(res);
      toast.success(`${res.registradas.length} luz(ces) instaladas en ${res.tienda}`);
      // Reset completo: ningún dato de esta operación debe arrastrarse a la
      // siguiente. Solo se llega aquí si el servidor confirmó.
      setFilas([]);
      setTiendaId('');
      setEntregaId('');
      setRecibeId('');
      setNumeroGuia('');
      setFecha(fechaHoy());
      setComentario('');
      // La unidad se mantiene: es normal instalar en varias tiendas seguidas
      // con la misma. Pero su lista de luces cambió, así que se recarga.
      if (!porEncomienda && unidadId) {
        const u = unidadId;
        setUnidadId('');
        setTimeout(() => setUnidadId(u), 0);
      }
    } catch (err) {
      toast.error(err.message);
    } finally {
      setEnviando(false);
    }
  };

  return (
    <div>
      <div className="scan-hero">
        <IconBulb size={28} style={{ marginBottom: 12, opacity: .85 }} />

        <input
          ref={inputRef}
          className="scan-hero__code-input"
          placeholder={listoParaEscanear ? 'Escanea las luces que se instalan (LE035509)…' : 'Elige primero la unidad vehicular'}
          value={codigoInput}
          onChange={(e) => setCodigoInput(e.target.value)}
          onKeyDown={onKeyDown}
          disabled={!listoParaEscanear}
        />
        <p className="scan-hero__hint">
          {porEncomienda
            ? 'Llegaron por encomienda. Todas se instalan en la misma tienda.'
            : (unidadId
                ? `${lucesEnUnidad.length} luz(ces) cargadas en ${placaUnidad}. Todas se instalan en la misma tienda.`
                : 'Una luz se instala desde la unidad que la llevó. Elige la unidad en el panel de la derecha.')}
        </p>
        <div className="scan-hero__actions">
          <button className="btn btn-primary" disabled={!listoParaEscanear} onClick={() => agregarCodigo(codigoInput)}>Agregar</button>
          <button
            className="btn btn-ghost"
            disabled={!listoParaEscanear}
            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={(t) => { setCamaraAbierta(false); agregarCodigo(t); }} />

      <div className="grid-2">
        <div className="panel">
          <div className="panel__header">
            <div className="panel__title">Luces a instalar</div>
            <button className="btn btn-ghost btn-sm" disabled={filas.length === 0} onClick={() => setFilas([])}>
              Vaciar lista
            </button>
          </div>
          <div className="scan-counter-row">
            <div className="scan-counter">
              <div className="scan-counter__value">{filas.length}</div>
              <div className="scan-counter__label">Escaneadas</div>
            </div>
          </div>

          <div className="scan-list">
            {filas.length === 0 && <div className="scan-list__empty">Todavía no escaneas ninguna luz</div>}
            {filas.map((f, i) => (
              <div key={f.codigo} className="scan-list__row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 8, paddingBottom: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="scan-list__code" style={{ flex: 1 }}>{f.codigo}</span>
                  <button className="scan-list__remove" onClick={() => quitar(i)} title="Quitar"><IconX size={15} /></button>
                </div>

                <div className="field">
                  <label>Luz que se retiró</label>
                  <select value={f.tipoRecambio} onChange={(e) => cambiar(i, 'tipoRecambio', e.target.value)}>
                    <option value="ninguno">No había (tienda nueva)</option>
                    <option value="nuestra">Una nuestra, con código</option>
                    <option value="ajena">De otra marca</option>
                  </select>
                </div>

                {f.tipoRecambio === 'nuestra' && (
                  <>
                    <div className="field">
                      <label>Código de la luz retirada</label>
                      <input
                        value={f.codigoRecambio}
                        onChange={(e) => cambiar(i, 'codigoRecambio', e.target.value.toUpperCase())}
                        placeholder="LE034100"
                      />
                    </div>
                    <div className="field">
                      <label>¿La devolvieron?</label>
                      <select
                        value={f.devuelto ? 'si' : 'no'}
                        onChange={(e) => cambiar(i, 'devuelto', e.target.value === 'si')}
                      >
                        <option value="si">Sí, volvió al almacén</option>
                        <option value="no">No volvió</option>
                      </select>
                    </div>
                    {!f.devuelto && (
                      <div className="field">
                        <label>¿Por qué no volvió?</label>
                        <select value={f.motivo} onChange={(e) => cambiar(i, 'motivo', e.target.value)}>
                          {MOTIVOS_RETIRO.map((m) => (
                            <option key={m.valor} value={m.valor}>{m.etiqueta}</option>
                          ))}
                        </select>
                      </div>
                    )}
                    {f.devuelto && (
                      <p className="scan-hero__hint" style={{ margin: 0, opacity: .75 }}>
                        Queda registrada en el almacén, pero fuera del stock disponible: no se vuelve a vender.
                      </p>
                    )}
                  </>
                )}

                {f.tipoRecambio === 'ajena' && (
                  <div className="field">
                    <label>Marca o descripción</label>
                    <input
                      value={f.recambioAjeno}
                      onChange={(e) => cambiar(i, 'recambioAjeno', e.target.value)}
                      placeholder="Ej. Marca Vencedor, lineal"
                      maxLength={150}
                    />
                    <p className="scan-hero__hint" style={{ margin: '4px 0 0', opacity: .75 }}>
                      No es nuestra, así que no toca el inventario. Queda solo como dato.
                    </p>
                  </div>
                )}

                <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={f.conGarantia}
                    onChange={(e) => cambiar(i, 'conGarantia', e.target.checked)}
                    style={{ width: 'auto', margin: 0 }}
                  />
                  La luz nueva vino fallada de fábrica (garantía)
                </label>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel__header"><div className="panel__title">Datos de la instalación</div></div>
          <div className="form-stack">
            {/* Una casilla, nada mas. Marcada, la unidad no corresponde y
                desaparece; sin marcar, todo sigue como siempre. Solo deja
                constancia de que esas luces llegaron por encomienda. */}
            <label className="check-field">
              <input
                type="checkbox"
                checked={porEncomienda}
                onChange={(e) => cambiarPorEncomienda(e.target.checked)}
              />
              <span>
                Por encomienda
                <span className="check-field__hint">
                  Llegaron a provincia con una empresa de transporte, no en una unidad nuestra.
                </span>
              </span>
            </label>

            {!porEncomienda && (
              <div className="field">
                <label>Unidad de la que salen</label>
                <select value={unidadId} onChange={(e) => cambiarUnidad(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>Tienda donde se instalan</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>Número de guía</label>
              <input value={numeroGuia} onChange={(e) => setNumeroGuia(e.target.value)} placeholder="Ej. G-0012345" maxLength={50} />
            </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 (opcional)</label>
              <select value={recibeId} onChange={(e) => setRecibeId(e.target.value)}>
                <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="Opcional" />
            </div>
          </div>
          <button
            className="btn btn-primary btn-block"
            disabled={enviando || filas.length === 0 || !listoParaEscanear}
            onClick={registrar}
            style={{ marginTop: 22 }}
          >
            {enviando ? 'Registrando…' : `Registrar instalación (${filas.length})`}
          </button>
        </div>
      </div>

      {resultado && <ResultadoLote resultado={resultado} tituloOk="luces instaladas" />}
    </div>
  );
}