function Reportes() {
  const toast = useToast();
  const [dias, setDias] = React.useState('');
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await Api.get('/movimientos-baterias/reporte/pendientes-devolucion', { dias: dias || undefined });
      setData(res.data);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, [dias]);

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

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Baterías pendientes de devolución</div>
        </div>
        <p className="text-muted" style={{ marginTop: -8, marginBottom: 16 }}>
          Estas baterías quedan en estado <strong>Pendiente</strong> mientras la tienda o unidad vehicular no
          devuelva la unidad no utilizada. El sistema no las marca automáticamente como perdidas: este reporte
          es lo que se comparte con tu supervisor.
        </p>
        <div className="filters-row">
          <div className="field">
            <label>Mostrar solo con más de (días)</label>
            <input type="number" min="0" value={dias} onChange={(e) => setDias(e.target.value)} placeholder="Ej. 30" />
          </div>
        </div>

        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            keyField="bateria_codigo"
            columns={[
              { key: 'bateria_codigo', header: 'Código', mono: true },
              { key: 'destino_tipo', header: 'Destino', render: (r) => (
                <EstadoBadge estado={r.destino_tipo || (r.tienda_nombre ? 'TIENDA' : 'UNIDAD_VEHICULAR')} />
              ) },
              { key: 'ubicacion', header: 'Tienda / Unidad', render: (r) => r.tienda_nombre || r.unidad_vehicular_placa || <span className="text-muted">—</span> },
              { key: 'fecha_salida', header: 'Fecha de salida', render: (r) => new Date(r.fecha_salida).toLocaleDateString('es-PE') },
              { key: 'dias_transcurridos', header: 'Días transcurridos', render: (r) => (
                <span className="tag-chip" style={{ color: r.dias_transcurridos >= 30 ? 'var(--estado-extraviada)' : undefined }}>
                  {r.dias_transcurridos} día(s)
                </span>
              ) },
              { key: 'comentario', header: 'Comentario' },
            ]}
            rows={data}
            emptyTitle="No hay devoluciones pendientes 🎉"
            emptyHint="Todas las baterías enviadas a tiendas o unidades vehiculares ya regresaron."
          />
        )}
      </div>
    </div>
  );
}