const ESTADO_DEVOLUCION_LABEL = {
  NA: 'N/A', PENDIENTE: 'Pendiente', DEVOLVIO_NUEVA: 'Devolvió batería nueva',
  DEVOLVIO_USADA: 'Devolución de batería usada', COMPLETADO: 'Completado',
};

function Baterias({ params }) {
  const toast = useToast();
  const [texto, setTexto] = React.useState(params?.texto || '');
  const [estado, setEstado] = React.useState(params?.estado || '');
  const [motivoBaja, setMotivoBaja] = React.useState('');
  const [offset, setOffset] = React.useState(0);
  const [data, setData] = React.useState({ data: [], total: 0 });
  const [loading, setLoading] = React.useState(true);
  const [modalCodigo, setModalCodigo] = React.useState(null);
  const limit = 20;

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await Api.get('/baterias', { texto: texto || undefined, estado: estado || undefined, motivo_baja: estado === 'BAJA' ? (motivoBaja || undefined) : undefined, limit, offset });
      setData(res);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, [texto, estado, motivoBaja, offset]);

  React.useEffect(() => { cargar(); }, [cargar]);
  React.useEffect(() => { setOffset(0); }, [texto, estado, motivoBaja]);
  React.useEffect(() => { if (estado !== 'BAJA') setMotivoBaja(''); }, [estado]);

  return (
    <div>
      <div className="panel">
        <div className="filters-row">
          <div className="field">
            <label>Buscar por código</label>
            <input value={texto} onChange={(e) => setTexto(e.target.value)} placeholder="BK-0001…" />
          </div>
          <div className="field">
            <label>Estado</label>
            <select value={estado} onChange={(e) => setEstado(e.target.value)}>
              <option value="">Todos</option>
              <option value="ALMACEN">Almacén</option>
              <option value="RETIRADA">Retirada</option>
              <option value="PRODUCCION">Producción</option>
              <option value="TIENDA">Tienda</option>
              <option value="UNIDAD_VEHICULAR">Unidad vehicular</option>
              <option value="EXTRAVIADA">Extraviada</option>
              <option value="BAJA">Baja</option>
            </select>
          </div>
          {estado === 'BAJA' && (
            <div className="field">
              <label>Motivo de baja</label>
              <select value={motivoBaja} onChange={(e) => setMotivoBaja(e.target.value)}>
                <option value="">Todos</option>
                <option value="VENDIDA">Vendida</option>
                <option value="BATERIA_USADA">Batería usada</option>
                <option value="OTRA">Otra</option>
              </select>
            </div>
          )}
        </div>

        {loading ? <p className="text-muted">Cargando…</p> : (
          <>
            <p className="text-muted" style={{ fontSize: 12.5, marginBottom: 6 }}>Doble clic sobre una fila para ver toda la información.</p>
            <DataTable
              columns={[
                { key: 'codigo', header: 'Código', mono: true },
                { key: 'estado_actual', header: 'Estado', render: (r) => <EstadoBadge estado={r.estado_actual} /> },
                { key: 'motivo_baja', header: 'Motivo', render: (r) => r.estado_actual === 'BAJA' ? (r.motivo_baja === 'VENDIDA' ? 'Vendida' : r.motivo_baja === 'BATERIA_USADA' ? 'Batería usada' : r.motivo_baja || '—') : '—' },
                { key: 'ubicacion_actual', header: 'Ubicación' },
                { key: 'fecha_ingreso', header: 'Ingreso' },
                { key: 'acciones', header: '', render: (r) => (
                  <button className="btn btn-ghost btn-sm" onClick={() => setModalCodigo(r.codigo)}>Ver detalle</button>
                ) },
              ]}
              rows={data.data}
              onRowDoubleClick={(r) => setModalCodigo(r.codigo)}
              emptyTitle="No hay baterías registradas"
              emptyHint="Regístralas desde Ingreso Masivo."
            />
            <Pagination total={data.total} limit={limit} offset={offset} onChange={setOffset} />
          </>
        )}
      </div>

      {modalCodigo && <BateriaModal codigo={modalCodigo} onClose={() => setModalCodigo(null)} onCambiado={cargar} />}
    </div>
  );
}

// Modal de información completa: General, Logística e Historial, con ComboBox para
// cambiar rápidamente el estado de devolución (Mejora: Modal de Información + punto 9).
function BateriaModal({ codigo, onClose, onCambiado }) {
  const toast = useToast();
  const [data, setData] = React.useState(null);
  const [tab, setTab] = React.useState('general');
  const [guardandoEstado, setGuardandoEstado] = React.useState(false);

  const cargar = React.useCallback(() => {
    Api.get(`/baterias/codigo/${encodeURIComponent(codigo)}/historial`)
      .then((r) => setData(r.data))
      .catch((e) => toast.error(e.message));
  }, [codigo]);

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

  // El movimiento "activo" de devolución es el más reciente que no sea N/A.
  const movDevolucion = data?.movimientos.find((m) => m.estado_devolucion !== 'NA');
  // Solo se puede "cerrar" desde aquí una Devolución de batería usada que sigue Pendiente — es
  // la única acción manual que corresponde a este campo (Mejora: Detalle de batería - cierre
  // de devolución usada). Una Salida Pendiente (todavía no regresó) se muestra solo como
  // información: se cierra registrando la Devolución real, no editando este campo.
  const puedeCerrarUsada = movDevolucion && movDevolucion.tipo_movimiento === 'Devolucion' && movDevolucion.estado_devolucion === 'PENDIENTE';

  const cerrarDevolucionUsada = async () => {
    if (!movDevolucion) return;
    setGuardandoEstado(true);
    try {
      await Api.post(`/movimientos-baterias/${movDevolucion.id}/estado-devolucion`, { estado_devolucion: 'COMPLETADO' });
      toast.success('Devolución de batería usada cerrada — Completado');
      cargar();
      onCambiado && onCambiado();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setGuardandoEstado(false);
    }
  };

  if (!data) {
    return (
      <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
        <div className="modal-card modal-card--lg"><div className="modal-card__body"><p className="text-muted">Cargando…</p></div></div>
      </div>
    );
  }

  const b = data.bateria;

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card modal-card--lg">
        <div className="modal-card__header">
          <div className="modal-card__title">{b.codigo}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body" style={{ maxHeight: '68vh', overflowY: 'auto' }}>
          <div className="modal-tabs">
            <button className={`modal-tab ${tab === 'general' ? 'active' : ''}`} onClick={() => setTab('general')}>General</button>
            <button className={`modal-tab ${tab === 'historial' ? 'active' : ''}`} onClick={() => setTab('historial')}>Historial ({data.movimientos.length})</button>
          </div>

          {tab === 'general' && (
            <div className="stack-y">
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', marginBottom: 8 }}>Información general</div>
                <dl className="info-grid">
                  <div><dt>Código</dt><dd className="mono">{b.codigo}</dd></div>
                  <div><dt>Estado</dt><dd><EstadoBadge estado={b.estado_actual} /></dd></div>
                  {b.estado_actual === 'BAJA' && <div><dt>Motivo de baja</dt><dd>{b.motivo_baja === 'VENDIDA' ? 'Vendida' : b.motivo_baja === 'BATERIA_USADA' ? 'Batería usada' : b.motivo_baja || '—'}</dd></div>}
                  <div><dt>Período</dt><dd>{b.periodo || '—'}</dd></div>
                  <div><dt>Fecha de ingreso</dt><dd>{b.fecha_ingreso}</dd></div>
                </dl>
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', margin: '14px 0 8px' }}>Información logística</div>
                <dl className="info-grid">
                  <div><dt>Ubicación actual</dt><dd>{b.ubicacion_actual}</dd></div>
                  {data.movimientos[0] && <div><dt>Responsable actual</dt><dd>{data.movimientos[0].empleado_recibe_nombre || data.movimientos[0].empleado_entrega_nombre || '—'}</dd></div>}
                </dl>
              </div>

              {movDevolucion && (
                <div>
                  <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', margin: '14px 0 8px' }}>Estado de devolución</div>
                  {puedeCerrarUsada ? (
                    <>
                      <div className="field" style={{ maxWidth: 320 }}>
                        <select
                          value="PENDIENTE"
                          disabled={guardandoEstado}
                          onChange={(e) => { if (e.target.value === 'DEVOLVIO_USADA') cerrarDevolucionUsada(); }}
                        >
                          <option value="PENDIENTE">Pendiente</option>
                          <option value="DEVOLVIO_USADA">Devolución batería usada</option>
                        </select>
                      </div>
                      <p className="text-muted" style={{ fontSize: 12.5, marginTop: 6 }}>
                        Selecciona "Devolución batería usada" para cerrar el proceso — queda Completado de inmediato.
                      </p>
                    </>
                  ) : (
                    <span className={`badge-estado ${movDevolucion.estado_devolucion === 'COMPLETADO' ? 'badge-estado--almacen' : 'badge-estado--retirada'}`}>
                      <span className="dot" />
                      {ESTADO_DEVOLUCION_LABEL[movDevolucion.estado_devolucion]}
                      {movDevolucion.tipo_movimiento === 'Salida' && movDevolucion.estado_devolucion === 'PENDIENTE' ? ' (aún no regresa)' : ''}
                    </span>
                  )}
                </div>
              )}
            </div>
          )}

          {tab === 'historial' && (
            <DataTable
              columns={[
                { key: 'fecha', header: 'Fecha', render: (r) => r.fecha ? r.fecha.slice(0, 10) : '' },
                { key: 'tipo_movimiento', header: 'Mov.' },
                { key: 'origen', header: 'Origen' },
                { key: 'proveedor_nombre', header: 'Proveedor', render: (r) => r.proveedor_nombre || <span className="text-muted">—</span> },
                { key: 'destino', header: 'Destino', render: (r) => <DestinoBadge valor={r.destino} /> },
                { key: 'empleado_entrega_nombre', header: 'Entrega' },
                { key: 'empleado_recibe_nombre', header: 'Recibe' },
                { key: 'estado_devolucion', header: 'Devolución', render: (r) => <DevolucionHistorialBadge estado={r.estado_devolucion} /> },
                { key: 'nombre_bateria_usada', header: 'Batería usada', render: (r) => r.nombre_bateria_usada || <span className="text-muted">—</span> },
                { key: 'con_garantia', header: 'Garantía / Voltaje', render: (r) => {
                  if (r.tipo_movimiento !== 'Devolucion' || !r.nombre_bateria_usada) return <span className="text-muted">—</span>;
                  if (!r.con_garantia) return <span className="badge badge-secondary">Sin Garantía</span>;
                  const v = r.voltaje;
                  return v !== null && v !== undefined
                    ? <span className="badge" style={{ background: v < 11 ? '#E5A100' : '#3E6E92', color: '#fff' }}>{v < 11 ? `🟡 ${v}V (<11V Prov.)` : `🔵 ${v}V (≥11V Luces)`}</span>
                    : <span className="badge badge-warning" style={{ background: '#E5A100', color: '#fff' }}>⚡ Sin medición</span>;
                } },
                { key: 'codigo_bateria_usada', header: 'Código batería usada', render: (r) => r.codigo_bateria_usada || <span className="text-muted">—</span> },
                { key: 'comentario', header: 'Comentario' },
              ]}
              rows={data.movimientos}
              emptyTitle="Sin movimientos"
              emptyHint="Esta batería aún no tiene historial."
            />
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}