function AsignacionLuces() {
  const toast = useToast();
  const [lotes, setLotes] = React.useState([]);
  const [loteId, setLoteId] = React.useState('');
  const [lote, setLote] = React.useState(null);
  const [cargandoLote, setCargandoLote] = React.useState(false);

  const cargarLotes = React.useCallback(() => {
    Api.get('/movimientos-baterias/lotes/pendientes-cierre').then((r) => setLotes(r.data)).catch(() => {});
  }, []);

  React.useEffect(() => { cargarLotes(); }, [cargarLotes]);

  const seleccionarLote = async (id) => {
    setLoteId(id);
    setLote(null);
    if (!id) return;
    setCargandoLote(true);
    try {
      const res = await Api.get(`/asignaciones-luces/lote/${id}`);
      setLote(res.data);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setCargandoLote(false);
    }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header"><div className="panel__title">1. Selecciona la salida hacia Producción</div></div>
        {lotes.length === 0 ? (
          <div className="table-empty">
            <div className="table-empty__title">No hay salidas pendientes</div>
            <p className="text-muted">Todas las salidas hacia Producción ya tienen sus luces asignadas, o todavía no registras ninguna.</p>
          </div>
        ) : (
          <div className="form-grid">
            <div className="field span-2">
              <label>Salida (lote)</label>
              <select value={loteId} onChange={(e) => seleccionarLote(e.target.value)}>
                <option value="">Selecciona un lote…</option>
                {lotes.map((l) => (
                  <option key={l.id} value={l.id}>
                    {l.numero} — {l.fecha?.slice(0, 10)} — {l.entregadas} entregadas, {l.pendientes} pendientes
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}
      </div>

      {cargandoLote && <div className="panel"><p className="text-muted">Cargando lote…</p></div>}

      {lote && <AsignacionLuzForm key={lote.id} lote={lote} onGuardado={() => { cargarLotes(); seleccionarLote(lote.id); }} />}
    </div>
  );
}

function AsignacionLuzForm({ lote, onGuardado }) {
  const toast = useToast();
  const [pares, setPares] = React.useState([]); // [{codigo_luz, codigo_bateria}]
  const [codigoLuz, setCodigoLuz] = React.useState('');
  const [codigoBateria, setCodigoBateria] = React.useState('');
  const [modeloLuz, setModeloLuz] = React.useState('');
  const [luzRegistrada, setLuzRegistrada] = React.useState(null);
  const [fechaFormato, setFechaFormato] = React.useState('');
  const [guardando, setGuardando] = React.useState(false);
  const [resultado, setResultado] = React.useState(null);
  const luzRef = React.useRef(null);
  const bateriaRef = React.useRef(null);

  const consultarLuz = async (codigo) => {
    const valor = codigo.trim();
    if (!valor) { setLuzRegistrada(null); return; }
    try {
      const res = await Api.get(`/luces/codigo/${encodeURIComponent(valor)}`);
      setLuzRegistrada(res.data);
      setModeloLuz(res.data.modelo || '');
    } catch (_) {
      setLuzRegistrada(null);
    }
  };

  const bateriasDisponibles = lote.baterias.filter((b) => !b.ya_asignada);
  const codigosBateriaUsadosLocal = new Set(pares.map((p) => p.codigo_bateria));
  const opcionesCombobox = bateriasDisponibles.filter((b) => !codigosBateriaUsadosLocal.has(b.codigo));

  const agregarPar = () => {
    const luz = codigoLuz.trim();
    const bateria = codigoBateria.trim();
    if (!luz || !bateria) { toast.error('Completa código de luz y de batería'); return; }
    if (!modeloLuz) { toast.error('Selecciona el modelo de la luz'); return; }
    setPares((prev) => [...prev, { codigo_luz: luz, codigo_bateria: bateria, modelo_luz: modeloLuz }]);
    setCodigoLuz(''); setCodigoBateria(''); setModeloLuz(''); setLuzRegistrada(null);
    setTimeout(() => luzRef.current && luzRef.current.focus(), 30);
  };

  const quitarPar = (idx) => setPares((prev) => prev.filter((_, i) => i !== idx));

  const guardar = async () => {
    if (pares.length === 0) { toast.error('Registra al menos una asignación'); return; }
    setGuardando(true);
    try {
      const res = await Api.post(`/asignaciones-luces/lote/${lote.id}/guardar`, {
        asignaciones: pares,
        fecha_formato: fechaFormato || undefined,
      });
      setResultado(res);
      toast.success(`${res.registradas.length} asignaciones guardadas`);
      setPares([]);
      onGuardado();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setGuardando(false);
    }
  };

  return (
    <>
      <div className="panel">
        <div className="panel__header"><div className="panel__title">2. Baterías de este lote</div></div>
        <div className="scan-counter-row">
          <div className="scan-counter"><div className="scan-counter__value">{lote.baterias.length}</div><div className="scan-counter__label">Entregadas</div></div>
          <div className="scan-counter"><div className="scan-counter__value" style={{ color: 'var(--st-almacen)' }}>{lote.baterias.length - bateriasDisponibles.length}</div><div className="scan-counter__label">Ya asignadas</div></div>
          <div className="scan-counter"><div className="scan-counter__value" style={{ color: 'var(--hazard)' }}>{bateriasDisponibles.length}</div><div className="scan-counter__label">Pendientes</div></div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
          {lote.baterias.map((b) => (
            <span key={b.bateria_id} className="tag-chip" style={b.ya_asignada ? { opacity: .4, textDecoration: 'line-through' } : (codigosBateriaUsadosLocal.has(b.codigo) ? { borderColor: 'var(--hazard)', color: 'var(--hazard-ink)', background: 'var(--hazard-soft)' } : {})}>
              {b.codigo}
            </span>
          ))}
        </div>
      </div>

      <div className="panel">
        <div className="panel__header"><div className="panel__title">3. Registra el formato físico (Luz ↔ Batería)</div></div>
        <div className="form-grid">
          <div className="field">
            <label>Código de luz</label>
            <input
              ref={luzRef}
              value={codigoLuz}
              onChange={(e) => { setCodigoLuz(e.target.value); setLuzRegistrada(null); }}
              onBlur={(e) => consultarLuz(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); consultarLuz(e.currentTarget.value); } }}
              placeholder="Ej. LE033433"
              autoFocus
            />
            {luzRegistrada && <div className="text-muted" style={{ fontSize: 11, marginTop: 5 }}>Luz existente · modelo: <strong>{luzRegistrada.modelo}</strong></div>}
          </div>
          <div className="field">
            <label>Modelo de luz</label>
            <select value={modeloLuz} onChange={(e) => setModeloLuz(e.target.value)}>
              <option value="">Selecciona un modelo…</option>
              <option value="IPLE-01-ABS">IPLE-01-ABS</option>
              <option value="IPLE-01">IPLE-01</option>
            </select>
          </div>
          <div className="field">
            <label>Código de batería</label>
            <Combobox
              value={codigoBateria}
              onChange={(val) => setCodigoBateria(val)}
              options={opcionesCombobox.map((b) => ({ value: b.codigo, label: b.codigo, searchText: b.codigo }))}
              placeholder="Busca o escribe el código…"
              disabled={opcionesCombobox.length === 0}
            />
          </div>
          <div className="field span-2">
            <label>Fecha del formato físico (opcional)</label>
            <input type="date" value={fechaFormato} onChange={(e) => setFechaFormato(e.target.value)} />
          </div>
        </div>
        <button className="btn btn-ghost" onClick={agregarPar}><IconPlus size={15} /> Agregar a la lista</button>

        <div className="scan-list" style={{ marginTop: 16 }}>
          {pares.length === 0 && <div className="scan-list__empty">Todavía no registras ninguna asignación</div>}
          {pares.map((p, i) => (
            <div key={i} className="scan-list__row">
              <span className="scan-list__code">{p.codigo_luz} <span className="text-muted" style={{ margin: '0 8px' }}>({p.modelo_luz})</span> <IconArrowRight size={12} style={{ verticalAlign: 'middle', margin: '0 4px' }} /> {p.codigo_bateria}</span>
              <button className="scan-list__remove" onClick={() => quitarPar(i)}><IconX size={15} /></button>
            </div>
          ))}
        </div>

        <button className="btn btn-primary" disabled={guardando || pares.length === 0} onClick={guardar} style={{ marginTop: 14 }}>
          {guardando ? 'Guardando…' : `Guardar Asignaciones (${pares.length})`}
        </button>
      </div>

      {resultado && <ResultadoLote resultado={resultado} tituloOk="asignaciones guardadas" />}
    </>
  );
}